Die Überschrift passt, die Farben stimmen, und Termine und Preise stehen fest. Trotzdem sieht die Seite noch nach Vorlage aus. Die Fotos könnten genauso gut auf der Website eines anderen Anbieters stehen.
Eigene Bilder einzusetzen gehört oft zu den letzten Arbeiten an einer HTML-Vorlage. Das gilt auch für eine mit KI erstellte Landingpage oder eine Seite, die Ihnen ein Designteam übergeben hat. Der Aufbau kann bereits passen, während die Fotos noch auf aktuelle Produkte, Dienstleistungen oder die neue Kollektion abgestimmt werden müssen. Auf der bestehenden Seite können Sie das neue Bild direkt neben der Überschrift oder Beschreibung beurteilen.
Die Seite des fiktiven Töpferstudios Claywell zeigt zwei unterschiedliche Fälle. Im Einstiegsbereich weicht ein Schwarz-Weiß-Stillleben einem Foto vom Arbeitstisch. Weiter unten ersetzt die Illustration einer einzelnen Schale ein Foto mit mehreren Geschirrstücken.
Bilder auf der vorhandenen HTML-Seite ändern
Öffnen Sie die Datei im Online-Editor für HTML-Dateien von HtmlDrag über „HTML hochladen“. Bilder, Schrift und Stile sind in der Claywell-Datei bereits enthalten. So können Sie die Kursseite als Ganzes bearbeiten.
Schauen Sie vor der Bildauswahl, welche Aufgabe das jeweilige Foto im Layout erfüllt. Bei Claywell stehen ein Keramikstillleben, eine gelbe Kurskarte und eine Nahaufnahme vom Formen des Tons nebeneinander. Beim Tausch des linken Bildes bleiben Überschrift, Preis und die rechte Aufnahme sichtbar. So lässt sich die Wirkung der neuen Aufnahme im gesamten Einstieg beurteilen.
Bilder danach auswählen, was Besucher sehen möchten
Auf der Website eines Töpferkurses und in einem Keramikshop können ähnliche Fotos stehen. Trotzdem erwarten Besucher unterschiedliche Informationen. Fertige Stücke zeigen, wie die Keramik aussehen kann. Ein Arbeitstisch mit Ton und Werkzeug hilft Interessierten, sich selbst beim Töpfern vorzustellen. Auf der Kursseite für Einsteiger ist genau dieser Eindruck wichtig.
Wer weiter bis zur Materialbeschreibung liest, möchte die Keramik genauer sehen. Neben der Überschrift „Es gibt keine perfekte Form“ zeigt eine einzelne Schale ihren unregelmäßigen Rand und die Struktur der Glasur besser als ein Gruppenbild mit Tassen und Tellern. Die beiden Positionen beantworten unterschiedliche Fragen.
| Einsatz auf der Seite | Geeignetes Motiv | Was sollte erkennbar bleiben? |
|---|---|---|
| Hauptbild oder Szenenfoto | Eine klar erkennbare Tätigkeit und Platz um das Hauptmotiv. | Die Tätigkeit auf einen Blick, neben Überschrift und wichtigster Schaltfläche. |
| Produkt- oder Materialdetail | Ein gut beleuchtetes Motiv mit Abstand zu wichtigen Bildrändern. | Form, Oberfläche und das im Text beschriebene Merkmal. |
| Ergänzendes Bild | Eine andere Perspektive, eine Oberflächenstruktur oder eine Nahaufnahme. | Ein zusätzliches Detail, das auf dem Hauptbild nicht zu sehen ist. |
Achten Sie bei der Auswahl auf das Seitenverhältnis, den Platz um das Motiv und die Details, die in der späteren Anzeigegröße erkennbar bleiben. Selbst bei einem Querformat kann im schmalen Bildfeld ein wichtiger Teil fehlen. Ein Hochformat mit genügend Hintergrund kann dagegen auch in einem breiten Feld gut funktionieren.
Eine kurze Beschreibung hilft, wenn Sie im Bildarchiv suchen oder Fotos vorbereiten lassen.
Die Seite bewirbt einen Töpferkurs für Einsteiger. Für den Einstieg brauchen wir ein Foto vom Arbeitstisch, für die Materialbeschreibung ein Bild mit einer einzelnen, gut erkennbaren Schale. Lassen Sie um die Hände und den Schalenrand genug Platz für die Ausschnitte auf Desktop und Smartphone. Das abgestimmte Layout und die Kursangaben bleiben bestehen. Die Motive sollen zum tatsächlichen Angebot passen.
Bei Claywell dienten das Stillleben im Einstiegsbereich und das Geschirrfoto im Materialabschnitt als Ausgangspunkt. Beide lassen sich am besten neben dem zugehörigen Text beurteilen.
Das Hauptbild im bestehenden Layout austauschen
Das neue Foto zeigt Ton, Werkzeug und den Arbeitstisch, an dem getöpfert wird. Rechts ist in der Nahaufnahme zu sehen, wie der Ton von Hand geformt wird. Das eine Foto zeigt die Umgebung, das andere die Arbeit im Detail.
Klicken Sie in HtmlDrag mit der rechten Maustaste auf das gewünschte Foto und wählen Sie „Bild ersetzen...“. Wenn Bilder und Karten so dicht beieinanderstehen, prüfen Sie kurz, ob wirklich das einzelne Foto ausgewählt ist.
Mit „Von Gerät hochladen“ verwenden Sie eine Datei von Ihrem Rechner. Mit „Online-Bild verwenden“ geben Sie die Adresse eines bereits gehosteten Bildes an. In diesem Beispiel stammt das neue Foto vom Arbeitstisch aus einer lokalen Datei.
Nach dem Austausch lohnt sich ein Blick auf den ganzen Einstieg. Das Foto darf detailreicher sein, solange Kursgebühr und wichtigste Schaltfläche leicht zu finden sind. Ein Vorschaubild im Archiv verrät darüber wenig.
Hier hebt sich die Struktur des Arbeitstischs gut von der schlichten gelben Karte ab. Auch im sichtbaren Ausschnitt bleibt die Szene erkennbar. Für das eigene Hauptbild gilt derselbe Maßstab: Vermittelt es die Situation auf einen Blick? Ist von der Überschrift aus klar, wie es weitergeht?
Beim Detailbild ein Merkmal in den Mittelpunkt stellen
Ein Detailbild soll eine bestimmte Eigenschaft gut erkennbar machen. Bei Keramik kann das der Rand, die Glasur oder die Oberflächenstruktur sein. Bei anderen Produkten geht es vielleicht um einen Verschluss, die Verarbeitung oder ein Etikett. Was zu sehen sein soll, bestimmt, wie nah das Bild herangehen muss.
Das zweite Claywell-Motiv ist die vorab mit KI erstellte Illustration einer Schale. Helle Glasur und unregelmäßiger Umriss passen zum Text über die Form der Keramik.
Der Austausch funktioniert wie beim Hauptbild. Die Quelldatei liegt im Hochformat vor, der Bildbereich auf dem Desktop ist dagegen breiter. Weil um die Schale genug Hintergrund bleibt, ist auch im breiten Ausschnitt der ganze Rand zu sehen.
In der Nahaufnahme lässt sich die Schale zusammen mit dem erklärenden Text betrachten. Prüfen Sie auch bei anderen Produkt- und Materialbildern, ob das im Text genannte Merkmal sichtbar ist. Wenn ein wichtiger Rand abgeschnitten ist, versuchen Sie es zunächst mit einem Foto, das mehr Platz um das Motiv lässt, oder wählen Sie einen anderen Ausschnitt. Wenn der wichtige Rand weiterhin fehlt, prüfen Sie das Layout.
Warum ein neues Bild abgeschnitten oder unscharf wirkt
Bilddatei und Bildfeld haben jeweils ein eigenes Seitenverhältnis. Bei unterschiedlichen Proportionen kann die Seite das Bild zuschneiden, um die Fläche auszufüllen. Mit der CSS-Eigenschaft object-fit: cover bleiben die Proportionen erhalten. Überstehende Bildteile werden abgeschnitten.
Deshalb kann ein Foto im Bildarchiv vollständig aussehen und auf der Seite nur zum Teil sichtbar sein. Achten Sie in der tatsächlichen Ansicht auf die Ränder des Motivs und wählen Sie einen Ausschnitt, der die wichtigen Details zeigt. Wenn Sie das Bild in die Breite oder Länge ziehen, kann das die Form des Gegenstands verfälschen.
In der Desktop-Vorschau lässt sich der erste Eindruck in normaler Lesegröße prüfen. Ist auf Anhieb zu erkennen, worum es im Kurs geht? Ergänzt das Bild die Überschrift, und ist die wichtigste Schaltfläche gut zu finden?
Im Materialabschnitt braucht die Schale genügend Platz, damit Form und Oberfläche neben dem Text zu erkennen sind. Sehen Sie sich jedes Motiv an seiner tatsächlichen Position an. In einer verkleinerten Gesamtansicht fallen manche Probleme kaum auf.
Wirkt das Bild unscharf, prüfen Sie die Qualität der Datei. Ein kleines Vorschaubild enthält oft zu wenig Details für eine breite Darstellung. Verwenden Sie ein passendes Original, exportieren Sie es fürs Web und beurteilen Sie die Schärfe in der späteren Anzeigegröße. Allein durch eine kleinere Darstellung wird die heruntergeladene Datei nicht kleiner.
Die Änderungen speichern und die mobile Ansicht prüfen
Wenn beide Bilder im Layout funktionieren, legen Sie mit „Version speichern“ eine Version ab. Für die spätere Veröffentlichung stehen im Exportfenster unter „Bearbeitetes HTML“ die Optionen „HTML herunterladen“ und „HTML kopieren“ zur Verfügung.
Die beiden neuen Bilder sind im Claywell-Projekt gespeichert. Der Materialabschnitt bleibt bearbeitbar. Bei neuen Terminen, Produkten oder saisonalen Fotos können Sie auf dieser Version aufbauen.
Sehen Sie sich die Seite auch in einer schmalen Ansicht an. Das Bildfeld kann enger werden, ein ergänzendes Foto kann ausgeblendet sein, und die Kursangaben können an einer anderen Stelle stehen. Prüfen Sie, ob das Hauptmotiv weiterhin verständlich ist. In Claywells mobiler Ansicht stehen das Foto vom Arbeitstisch und die gelbe Karte nebeneinander.
Nach dem Bildwechsel fällt manchmal auf, dass ein Satz zur Einordnung fehlt. Sie können eine kurze Bildunterschrift zum Material einfügen oder ein Produktbild mit der Detailseite verlinken. Sollen Besucher verschiedene Kursangebote vergleichen, können Sie in HtmlDrag eine Tabelle einfügen und ihre Zellen, Zeilen und Spalten bearbeiten.
Wenn Sie daneben etwas anpassen, lassen sich fertige Elemente sperren, damit sie nicht versehentlich verrutschen. Abgelaufene Aktionen können Sie entfernen. So passen die neuen Bilder auch inhaltlich zum aktuellen Angebot.
Prüfen Sie vor der Weitergabe der Seite die folgenden Punkte.
- Die vorgesehenen Bilder sind ausgetauscht und ihre Hauptmotive gut erkennbar.
- Die wichtigen Details sind auf Desktop und Smartphone sichtbar.
- Die fürs Web vorbereiteten Dateien wirken in Anzeigegröße scharf.
- Bildunterschriften, Alternativtexte und Quellenangaben stimmen mit den neuen Motiven überein.
- Verlinkte Bilder führen zum gewünschten Ziel.
- Die gespeicherte Version und das HTML für die Veröffentlichung enthalten die Änderungen.
Mit dem Motiv sollte sich bei Bedarf auch der Alternativtext ändern. Die Hinweise von Google zur Bildersuche empfehlen Alt-Texte, die zum Inhalt der Seite passen. Eine konkrete Beschreibung des Motivs hilft dabei mehr als eine Liste von Suchbegriffen.
Häufige Fragen zum Austausch von Bildern in HTML
Kann ich die Bilder einer mit KI erstellten HTML-Seite ändern?
Ja, sofern sich die HTML-Datei im Editor korrekt öffnen lässt. Prüfen Sie, ob Bilder und Stile geladen werden, und wählen Sie das Foto aus, das Sie ersetzen möchten. Eine vorbereitete Bilddatei lässt sich direkt einsetzen. Damit sparen Sie sich eine weitere Anfrage an die KI.
Sollte ich eine Datei hochladen oder eine Bild-URL verwenden?
Wenn die freigegebene Datei auf dem Rechner liegt, laden Sie sie hoch. Eine URL bietet sich für ein Bild an, das bereits dauerhaft erreichbar ist. Verwenden Sie einen Link, der direkt die Bilddatei öffnet. Liegt Ihnen nur die Adresse einer Galerie oder Anmeldeseite vor, suchen Sie zuerst nach dem direkten Bildlink.
Funktioniert ein Hochformat in einem breiten Bildbereich?
Das hängt vom Platz um das Motiv ab. Auf dem Bild der Claywell-Schale bleibt rund um das Motiv genug Platz für einen breiteren Ausschnitt. Bei einem eng gefassten Hochformat können wichtige Details verloren gehen. Prüfen Sie das Foto deshalb im tatsächlichen Bildfeld und auch auf Smartphone-Breite.
Ändert sich beim Bildtausch auch die Bildunterschrift oder der Link?
Bild, Bildunterschrift, Quellenangabe und Linkziel sind getrennte Bestandteile. Prüfen Sie nach dem Tausch, ob Text und gegebenenfalls Link noch zur neuen Aufnahme passen.
Wie groß sollte die neue Bilddatei für eine Website sein?
Die Auflösung sollte zur späteren Anzeigegröße passen, die Dateigröße zur Nutzung im Web. Ein großes Hauptbild braucht in der Regel mehr Details als ein kleines Kartenbild. Prüfen Sie die Darstellung und das aktuelle Upload-Limit, statt eine Größe für alle Bilder vorzugeben.
Wird meine veröffentlichte Website durch das Speichern aktualisiert?
Beim Speichern landen die Änderungen im HtmlDrag-Projekt. Für eine separat gehostete Website müssen Sie das bearbeitete HTML über den üblichen Veröffentlichungsweg der Website einspielen.
Ein Foto vom Arbeitstisch zeigt, was Besucher im Kurs erwartet. Ein Bild der einzelnen Schale macht die Glasur und Form sichtbar. Wenn Ihre HTML-Vorlage noch Platzhalter oder alte Fotos enthält, öffnen Sie die Datei im visuellen HTML-Editor und tauschen Sie die Fotos direkt an ihrer bisherigen Position aus.