Ein gutes Website-Bild beantwortet eine Frage: Was bieten Sie an, wie arbeiten Sie oder was erwartet einen Kunden vor Ort? Ein beliebiges schönes Foto reicht dafür oft nicht. Wählen Sie deshalb zuerst die Aufgabe des Bildes und bereiten Sie dann Ausschnitt, Datei und Beschreibung für die konkrete Seite vor.
Mit diesem Ablauf überarbeiten Sie die Bilder einer einzelnen Leistungsseite in Zeta Producer. Als Beispiel dient ein fiktives Keramikatelier mit Einsteigerkursen. Das ist eine Planungshilfe, kein Kundenbericht. Beginnen Sie mit einer Seite; so können Sie das Ergebnis prüfen, bevor Sie weitere Bilder austauschen.
1. Jedem Bild eine Aufgabe geben
Öffnen Sie Ihre Seite und lesen Sie die Überschrift sowie den ersten Absatz. Welches Bild hilft, genau dieses Angebot zu verstehen? Beim Keramikkurs wäre eine Aufnahme der Hände beim Formen hilfreich. Ein Foto fertiger Schalen zeigt dagegen ein mögliches Ergebnis. Ein Blick in den Kursraum beantwortet eine andere Frage: Wo findet der Kurs statt?
Stellen Sie höchstens drei Motive nebeneinander und entscheiden Sie nach diesen Kriterien:
- Aussage: Zeigt das Foto eine relevante Tätigkeit, ein Ergebnis oder eine Orientierungshilfe?
- Glaubwürdigkeit: Passt das Gezeigte zu Ihrem tatsächlichen Angebot? Verwenden Sie für Ihr Team, Ihre Räume und Ihre Referenzen eigene, freigegebene Aufnahmen.
- Erkennbarkeit: Ist das Hauptmotiv auch klein verständlich, ohne winzige Details oder eingebrannten Werbetext?
Ein Symbolfoto kann eine Tätigkeit illustrieren. Es sollte aber nicht wie ein Beleg für Ihre eigenen Kurse oder Arbeiten beschriftet werden. Schreiben Sie darunter beispielsweise „Symbolfoto: Arbeiten mit Ton“. Sobald geeignete eigene Aufnahmen vorhanden sind, können diese den tatsächlichen Ablauf genauer zeigen. Wie die Bilder in den restlichen Seiteninhalt passen, zeigt unsere Anleitung zum Aufbau einer Leistungsseite.
2. Quelle und Original zusammen ablegen
Speichern Sie die Originaldatei in einem nachvollziehbaren Ordner, zum Beispiel „Website-Bilder / Keramikkurs / Originale“. Legen Sie daneben eine kurze Notiz mit Bildquelle, Urheber, Lizenz und Abrufdatum ab. Bei eigenen Aufnahmen halten Sie fest, wer fotografiert hat und für welche Verwendung die nötigen Freigaben vorliegen. So müssen Sie die Herkunft später nicht erneut recherchieren.
Bei kostenlosen Bildportalen prüfen Sie die Lizenz des konkreten Motivs. Die reguläre Unsplash-Lizenz erlaubt auch die kommerzielle Nutzung und Bearbeitung. Kostenpflichtige Unsplash+-Inhalte haben eigene Bedingungen. Eine Bildlizenz klärt außerdem nicht automatisch sämtliche Rechte an erkennbaren Personen, Marken oder abgebildeten Werken. Wählen Sie ein anderes Motiv, solange erforderliche Rechte ungeklärt sind.
Bewahren Sie das Original auf und arbeiten Sie für die Website mit einer Kopie. Ein sinnvoller Dateiname wäre keramikkurs-ton-formen.jpg. Das hilft Ihnen beim Wiederfinden und beschreibt den Inhalt besser als IMG_4821.jpg.
3. Den Ausschnitt für den vorgesehenen Platz wählen
Ein breites Kopfbild und ein Foto neben einem Absatz brauchen nicht denselben Ausschnitt. Prüfen Sie zuerst den Platz auf der Seite. Im Keramikbeispiel sollen Hände und Ton zusammen sichtbar bleiben. Ein enger Zuschnitt nur auf einen Finger würde die Tätigkeit schwerer erkennbar machen.
In Zeta Producer öffnen Sie das verwendete Bild-Widget zum Bearbeiten. Über die Bildvorschau beziehungsweise deren Kontextmenü gelangen Sie zu Bearbeiten. Mit der Zuschneidefunktion legen Sie den Ausschnitt fest. Bei Headern kann das Layout einen festen Zielbereich vorgeben. Die einzelnen Möglichkeiten zeigt das Handbuch unter Bilder bearbeiten.
Bei dafür geeigneten Widgets können Sie einen Fokuspunkt setzen. Er hilft, den wichtigen Bildbereich bei einem automatischen Beschnitt zu berücksichtigen. Das gilt jedoch nicht pauschal für jede Einbindung: Beim Slider hängt es beispielsweise von einer eingestellten Mindesthöhe ab. Prüfen Sie deshalb immer die tatsächliche schmale Ansicht. Wenn beide Hände dort nicht sinnvoll ins Bild passen, wählen Sie einen anderen Ausschnitt oder lassen Sie das Bild proportional anzeigen.
4. Abmessungen und Dateigröße gemeinsam prüfen
Die Pixelmaße bestimmen, wie viele Bildpunkte vorhanden sind; die Dateigröße bestimmt, wie viele Daten übertragen werden. Eine kleine Dateigröße allein macht ein unscharfes Foto nicht brauchbar. Umgekehrt muss ein kleines Bild neben einem Absatz nicht als riesige Kameradatei ausgeliefert werden.
Als Ausgangspunkt für eine Bildfläche von ungefähr 600 Pixeln Breite können Sie eine Datei mit 1.200 Pixeln Breite prüfen. Das bietet Reserve für scharfe Displays, ist aber keine allgemeine Pflichtgröße. Für ein breites Kopfbild kann mehr nötig sein. Vergrößern Sie ein bereits zu kleines Original nicht künstlich, um diese Zahl zu erreichen.
Für ein gewöhnliches Foto ist JPEG ein praktischer Ausgangspunkt. PNG eignet sich beispielsweise für eine Grafik mit Transparenz oder eine scharfe Bildschirmaufnahme. Beim Export einer JPEG-Kopie reduzieren Sie die Qualität schrittweise und vergleichen das Ergebnis in der späteren Anzeigegröße. Achten Sie auf ausgefranste Kanten, fleckige Flächen und verloren gegangene Details. Wählen Sie die kleinere Datei, solange die für Ihre Seite wichtigen Details erhalten bleiben.
Importieren Sie die vorbereitete Datei über das Bild-Widget von Ihrem PC und bestätigen Sie die Auswahl. Zeta Producer passt die angezeigte Bildgröße an die Spaltenbreite an. Diese automatische Darstellung ersetzt Ihre Qualitätskontrolle nicht. Eine pauschale Kilobyte-Grenze für alle Bilder wäre wenig hilfreich: Motiv, Abmessungen und gewünschte Detailansicht unterscheiden sich.
5. Alt-Text und Bildunterschrift gezielt ausfüllen
Der Alt-Text vermittelt den relevanten Bildinhalt, wenn jemand das Bild nicht sehen kann. Die sichtbare Bildunterschrift ergänzt den Kontext für alle Leser. Schreiben Sie die beiden Texte deshalb nach ihrer jeweiligen Aufgabe.
Für das abgebildete Motiv wäre „Zwei Hände formen einen Klumpen Ton auf einer Arbeitsplatte“ ein passender Alt-Text. „Keramikkurs günstig buchen beste Töpferei“ beschreibt das Bild nicht. Auch Namen, Kursorte oder konkrete Arbeitstechniken sollten Sie nur nennen, wenn diese Angaben tatsächlich zutreffen. Für rein dekorative, nicht verlinkte Bilder ist ein leerer Alt-Text passend; die Entscheidungshilfe des W3C erklärt die Unterscheidung.
Öffnen Sie in Zeta Producer Einstellungen > Bilder, markieren Sie das Bild und öffnen Sie Bilder > Eigenschaften. Im Bereich Name stehen Dateiname, Alt-Text und Beschreibung. Beachten Sie: Die Angaben der zentralen Bilderverwaltung gelten projektweit für die Verwendungen dieses Bildes. Kontrollieren Sie daher auch andere betroffene Seiten. Die Beschreibung kann je nach Widget als Bildunterschrift erscheinen.
Optional erzeugt das KI-Symbol neben dem Alt-Text einen Vorschlag. Prüfen und korrigieren Sie ihn vor der Übernahme. Diese Funktion setzt eine passende Lizenz und verfügbare KI-Tokens voraus; Tokens werden bereits beim Erzeugen verbraucht. Dabei werden unter anderem das Bild und die Zielsprache zur Verarbeitung an das Zeta-Backend übertragen. Den genauen Ablauf und die Voraussetzungen beschreibt die Anleitung zu den KI-Funktionen.
6. Das Ergebnis am Computer und Smartphone kontrollieren
Öffnen Sie die externe Vorschau Ihrer Website. In der Responsive-Vorschau von Zeta Producer können Sie zwischen Desktop, Tablet und Smartphone wechseln. Prüfen Sie Hoch- und Querformat. Bleiben Hände und Ton erkennbar? Passt die Bildunterschrift darunter? Lässt sich eine gewünschte Großansicht öffnen und wieder schließen?
Für das fiktive Kursangebot könnte der Vorher-nachher-Abgleich so aussehen:
- Vorher: Ein allgemeines Bürobild lockert die Seite auf. Nachher: Das Tätigkeitsfoto erklärt sofort, dass mit Ton gearbeitet wird.
- Vorher: Der schmale Ausschnitt zeigt überwiegend Hintergrund. Nachher: Hände und Material bleiben gemeinsam erkennbar.
- Vorher: Dateiname und Alt-Text lauten „Bild1“. Nachher: Beide beschreiben das Motiv; die Bildunterschrift kennzeichnet das Symbolfoto.
Nach dem Veröffentlichen öffnen Sie die öffentliche Seite zusätzlich auf einem echten Smartphone, möglichst auch über eine mobile Datenverbindung. Kontrollieren Sie Bildschärfe, Ausschnitt und Ladeverhalten erneut. Die lokale Vorschau zeigt noch nicht, wie sich die veröffentlichte Seite unterwegs lädt.
Ihr nächster Schritt: Wählen Sie eine Leistungsseite und notieren Sie für jedes Bild Aufgabe, Quelle, Ausschnitt, Alt-Text und Prüfergebnis. Ersetzen Sie zuerst das Bild, das die Leserfrage am wenigsten unterstützt. Wenn Sie Ihre Website künftig selbst pflegen möchten, finden Sie auf der Produktseite von Zeta Producer den Einstieg in die Windows-Software.