Ein Website-Bild ist bereit für die Veröffentlichung, wenn es einen klaren Zweck hat, verwendet werden darf, passend zugeschnitten ist, effizient gespeichert wurde und eine Textalternative besitzt, die zu seiner Aufgabe passt. Die kleinste Datei ist nicht immer die beste Wahl: Besucher müssen weiterhin ein Produkt erkennen, ein Diagramm lesen oder die Aussage einer Illustration verstehen können. Prüfen Sie das Bild auf der tatsächlichen Seite, bevor Sie es freigeben.
Nutzen Sie diese Checkliste, wenn Sie eine neue Website vorbereiten, einen zu großen Banner ersetzen oder einen Ordner mit Bildmaterial an die Entwicklung übergeben. Bearbeiten Sie zunächst ein repräsentatives Bild, stimmen Sie die Entscheidungen ab und übertragen Sie das Vorgehen anschließend auf die übrigen Bilder. Bewahren Sie das Original separat auf, damit ein späteres Redesign nicht von einem bereits komprimierten Export abhängt.
1. Legen Sie fest, was das Bild vermitteln soll
Beschreiben Sie die Aufgabe jedes Bildes in einem Satz. Ein Produktfoto könnte eine Oberflächenstruktur zeigen, ein Ablaufdiagramm eine Reihenfolge erklären und eine dekorative Textur lediglich die Stimmung der Seite unterstützen. Wenn niemand die Aufgabe benennen kann, prüfen Sie, ob sich das Herunterladen dieses Bildes überhaupt lohnt. Eine schlankere Seite entsteht auch dadurch, dass unnötige Bilder entfallen, statt jedes vorhandene Bild nur stärker zu komprimieren.
Dokumentieren Sie neben der Originaldatei die Quelle, den Urheber oder Lieferanten, die erlaubte Nutzung und gegebenenfalls erforderliche Quellenangaben. Prüfen Sie, ob die Erlaubnis die geplante Verwendung auf der Website sowie Bearbeitungen und Zuschnitte abdeckt. Dass eine Datei per E-Mail eingetroffen ist, beantwortet diese Fragen noch nicht. Klären Sie ungewisse Nutzungsrechte mit dem zuständigen Rechteinhaber oder einer qualifizierten Beratung. Dies ist eine Prüfung der Bildverwaltung, keine Rechtsberatung.
Bewahren Sie bei generierten Konzeptbildern den Prompt und den Erstellungsnachweis auf und kennzeichnen Sie ihre Funktion ehrlich. Stellen Sie einen erfundenen Arbeitsraum, ein Team oder ein Produkt nicht als tatsächliches Foto des Unternehmens dar. Entfernen Sie unnötige personenbezogene Informationen aus Screenshots und prüfen Sie den fertigen Export einschließlich sichtbarer Browser-Tabs und Kontobereiche.
2. Wählen Sie ein Format, das zum Inhalt passt
Wählen Sie zunächst ein Ausgangsformat, exportieren Sie eine Variante und vergleichen Sie sie in der späteren Darstellungsgröße mit dem Original. Verschiedene Bilder reagieren unterschiedlich auf dieselben Encoder-Einstellungen. Es gibt weder einen einzelnen Qualitätswert noch eine Dateiendung, die jedes Bild automatisch veröffentlichungsreif macht.
- Fotos und detailreiche Illustrationen: Vergleichen Sie WebP oder AVIF mit einem gut codierten JPEG. Behalten Sie die Variante, die wichtige Details bei einer vertretbaren Übertragungsgröße erhält.
- Einfache Logos und Diagramme: Ziehen Sie SVG in Betracht, wenn ein vertrauenswürdiges Vektororiginal vorliegt. Prüfen Sie die gelieferte SVG-Datei vor dem Einbau und halten Sie wesentliche Texte auch auf der Seite verfügbar.
- Rastergrafiken mit präzisen Kanten oder Transparenz: Vergleichen Sie PNG mit einem geeigneten verlustfreien oder transparenten WebP-Export. Prüfen Sie feine Linien, Schrift und halbtransparente Kanten auf dem tatsächlichen Hintergrund.
- Animierte Inhalte: Fragen Sie zuerst, ob die Bewegung Informationen vermittelt. Ein Standbild kann dieselbe Aussage mit weniger Ablenkung und einer einfacheren Bereitstellung transportieren.
Das sind Ausgangspunkte für Vergleiche, keine Aufforderung, jedes Format zu erzeugen. Jede zusätzliche Variante braucht einen Grund und eine funktionierende Auslieferung. Eine ungenutzte AVIF-Datei neben dem veröffentlichten JPEG verbessert nichts. Halten Sie die Exporteinstellungen in der Bilddokumentation fest, damit eine andere Person eine Korrektur ohne Rätselraten nachvollziehen kann.
3. Stimmen Sie die Abmessungen auf das Layout ab
Unterscheiden Sie zwischen den Abmessungen der Quelldatei, der angezeigten Größe und dem Ausschnitt. Ein Foto kann Tausende Pixel enthalten und dennoch nur in einer kleinen Karte erscheinen. Wenn jede Karte das vollständige Kameraoriginal lädt, steigt die übertragene Datenmenge, ohne dass die Karte zwangsläufig nützlicher wird. Umgekehrt wird ein winziger Export unscharf, wenn er auf eine große Darstellung gestreckt wird.
Responsives Bild-Markup kann über srcset mehrere Bildbreiten anbieten; sizes beschreibt dabei die erwartete Breite im Layout. Der Browser wählt anhand dieser Angaben und seiner Umgebung eine Ressource aus. Verwenden Sie picture, wenn sich die Bildkomposition ändern muss, etwa für einen engeren mobilen Ausschnitt. MDN erklärt den Unterschied zwischen Auflösungswechsel und Art Direction im Leitfaden zu responsiven Bildern.
Listen Sie für die Prüfung die tatsächlichen Einsatzorte auf: Banner über die volle Breite, Bild in einem zweispaltigen Inhaltsbereich, Karte und Social-Media-Vorschau. Prüfen Sie ein schmales Smartphone und einen breiten Bildschirm. Platzieren Sie das Motiv nicht an Rändern, die beim Zuschneiden verschwinden. Wird ein Gesicht, eine Beschriftung oder ein wichtiges Merkmal abgeschnitten, hilft eine andere Komprimierung nicht. Ändern Sie den Ausschnitt oder das Layout.
Setzen Sie passende Attribute für width und height, damit der Browser anhand des Seitenverhältnisses Platz reservieren kann. Achten Sie darauf, dass das responsive CSS und alternative Zuschnitte zu diesem reservierten Bereich passen. Prüfen Sie sowohl das erste Laden als auch die vollständig geladene Seite: Ein ruhiger Screenshot kann einen zuvor aufgetretenen Layoutsprung verbergen.
4. Komprimieren Sie, ohne den Bildzweck zu verlieren
Vergleichen Sie Exporte nebeneinander in der vorgesehenen Darstellungsgröße. Achten Sie bei Verläufen auf sichtbare Farbstufen, bei feinen Kanten auf Säume, bei kleinen Details auf Verschmierungen und bei transparenten Bereichen auf unerwartete Ränder. Stellen Sie bei Produktbildern sicher, dass Texturen oder Farbunterschiede erhalten bleiben. Welcher Kompromiss vertretbar ist, hängt davon ab, was Besucher erkennen sollen.
Vereinbaren Sie für jeden Einsatzort einen Arbeitsrichtwert für die Dateigröße und prüfen Sie Ausnahmen. Ein detailreiches Erklärbild darf möglicherweise mehr Daten benötigen als eine dekorative Karte. Ein Richtwert sollte zu einer sinnvollen Abstimmung über Format, Ausschnitt und Abmessungen führen. Er sollte weder ein unleserliches Ergebnis erzwingen noch zu einer erfundenen allgemeinen Regel wie „Jedes Bild muss unter 100 KB bleiben“ werden.
Messen Sie die Datei, die der Browser tatsächlich erhält. Ein Content-System kann einen Upload erneut komprimieren, eine unerwartete Variante ausliefern oder ein vorheriges Bild im Cache behalten. Prüfen Sie nach der Veröffentlichung die gerenderte Seite und die Netzwerkantwort. Bewahren Sie ein freigegebenes Original und eindeutig benannte Exporte auf, statt ein bereits komprimiertes Bild immer wieder verlustbehaftet zu speichern.
5. Schreiben Sie Alt-Text passend zur Bildfunktion
Beginnen Sie beim umgebenden Inhalt. Informative Bilder benötigen eine Textalternative, die ihre relevante Bedeutung vermittelt; dekorative Bilder erhalten normalerweise ein leeres alt="". Liefert ein Bild den zugänglichen Namen eines Links oder einer Schaltfläche, beschreiben Sie die Aktion oder das Ziel. Komplexe Diagramme brauchen eine ausführlichere Erklärung in der Nähe. Der Alt-Entscheidungsbaum des W3C hilft, diese Situationen zu unterscheiden.
Eine Nahaufnahme auf einer Materialseite könnte beispielsweise den Text „Griff aus gebürstetem Messing mit abgerundeter Kante“ erhalten. Ein verlinktes Symbol für einen Download braucht den Zweck des Downloads, keine Beschreibung des Pfeils. Ein dekorativer Lichtschein hinter einer Überschrift sollte nicht allen Screenreader-Nutzern als „blau leuchtender Hintergrund“ vorgelesen werden. Dasselbe Bild kann auf einer anderen Seite eine andere Alternative benötigen, weil sich seine Aufgabe geändert hat.
Schreiben Sie knapp und natürlich. Nehmen Sie Details nur auf, wenn sie die relevanten visuellen Informationen ersetzen helfen. Füllen Sie das Attribut nicht mit Dienstleistungs-Keywords. Prüfen Sie, ob eine Bildunterschrift oder ein benachbarter Absatz bereits dasselbe sagt, und vermeiden Sie unnötige Wiederholungen beim Lesen. Übersetzen Sie Textalternativen zusammen mit der Seite und berücksichtigen Sie Bedeutungsänderungen durch lokalisierte Beschriftungen oder Screenshots.
Prüfen Sie die Seite bei nicht verfügbaren Bildern und kontrollieren Sie die zugänglichen Namen verlinkter Bilder. So finden Sie fehlende Informationen und doppelte Ansagen, die bei einer rein visuellen Prüfung unbemerkt bleiben können. Automatische Prüfungen erkennen möglicherweise ein fehlendes Attribut. Ob ein Satz das Richtige beschreibt, können sie jedoch nicht zuverlässig beurteilen.
6. Laden Sie das wichtige Bild zum richtigen Zeitpunkt
Das beim Seitenaufruf sichtbare Hauptbild sollte nicht durch Lazy Loading verzögert werden. Weiter unten stehende Bilder kommen für loading="lazy" infrage. Reservieren Sie auch für sie Platz. Die Lazy-Loading-Empfehlungen von web.dev erklären, warum anfangs sichtbare Bilder anders behandelt werden müssen als Bilder außerhalb des ersten sichtbaren Bereichs.
Prüfen Sie, welches Bild tatsächlich zum größten sichtbaren Element der Seite wird. Ein großer dekorativer Banner kann mit der Überschrift und nützlichen Inhalten konkurrieren. Wenn das Hero-Bild voraussichtlich das Largest-Contentful-Paint-Bild ist, machen Sie es früh auffindbar und prüfen Sie, ob eine hohe Abrufpriorität angemessen ist. Wenn jedes Bild eine hohe Priorität erhält, geht diese sinnvolle Unterscheidung verloren.
Testen Sie mit einem frischen Seitenaufruf und einer gedrosselten Verbindung und scrollen Sie anschließend durch die gesamte Seite. Achten Sie auf dauerhaft leere Flächen, sichtbare Inhaltsverschiebungen und Downloads, die viel größer sind als für ihren Anzeigeplatz nötig. Betrachten Sie einen lokalen Performance-Test als Nachweis für die geprüfte Seite und Testumgebung, nicht als Versprechen für die Verbindung oder das Gerät jedes Besuchers.
7. Nutzen Sie vor dem Export eine Entscheidungsvorlage
Bewahren Sie diese kurze Dokumentation im Bildordner auf. Sie verbindet eine gestalterische Entscheidung mit einer Umsetzungsprüfung und gibt der nächsten bearbeitenden Person mehr an die Hand als einen Dateinamen mit dem Zusatz „final“. Füllen Sie für jede Funktion eine Zeile aus, wenn dasselbe Original an mehreren Stellen erscheint.
| Entscheidung | Dokumentieren und prüfen |
|---|---|
| Zweck und Quelle | Was das Bild erklärt; Originaldatei; Nachweis der Nutzungserlaubnis oder Freigabe. |
| Platzierung und Ausschnitt | Seite und Einsatzort; angezeigte Breiten; Bildfokus; mobiler Ausschnitt. |
| Export | Gewähltes Format; Pixelabmessungen; Dateigröße; Einstellungen; visuelle Prüfung. |
| Textalternative | Informative, dekorative oder funktionale Rolle; lokalisierter Text; Erklärung in der Nähe. |
| Auslieferung | Responsive Varianten; reservierte Abmessungen; Ladeverhalten; veröffentlichte URL. |
Stellen Sie sich einen fiktiven Keramikshop vor, der ein Schalenfoto für eine Produktseite vorbereitet. Das freigegebene Originalfoto ist 4000 Pixel breit. Das Team prüft den tatsächlichen Bildbereich auf der Produktseite, exportiert zwei sinnvolle Breiten, vergleicht JPEG und WebP und wählt die Variante, die die Glasurdetails erhält. Im Smartphone-Ausschnitt bleibt der Rand der Schale sichtbar. Die Textalternative beschreibt die relevante Oberfläche; der benachbarte Produkttext enthält Maße und Pflegehinweise.
Dieses Beispiel beschreibt einen Entscheidungsprozess, kein verbindliches Exportrezept und kein Kundenergebnis. Eine Textur-Nahaufnahme, eine Maßzeichnung und ein dekoratives Kampagnenbild würden zu unterschiedlichen Entscheidungen führen. Dokumentieren Sie den Grund für eine Ausnahme, damit die nächste Aktualisierung sie nicht wieder rückgängig macht.
8. Prüfen Sie die Auffindbarkeit und die fertige Seite
Verwenden Sie für bedeutungstragende Inhalte reguläre Bildelemente, stellen Sie einen funktionierenden src-Fallback bereit und halten Sie Bild-URLs für Crawler zugänglich, wenn die Bilder gefunden werden sollen. Nutzen Sie beschreibende Dateinamen und platzieren Sie Bilder neben passenden Texten. Googles Empfehlungen zur Bild-SEO erläutern diese Vorgehensweisen und weisen darauf hin, dass Google CSS-Hintergrundbilder nicht indexiert. Die Prüfungen unterstützen die Auffindbarkeit, garantieren aber weder Indexierung noch Rankings.
- Bestätigen Sie das freigegebene Bild, den Ausschnitt und die Textalternative in jeder veröffentlichten Sprache.
- Prüfen Sie die ausgewählte responsive Datei, die intrinsischen Abmessungen und das Ladeverhalten.
- Bedienen Sie Bildlinks mit der Tastatur und prüfen Sie, ob ihre Namen verständlich sind.
- Prüfen Sie die Social-Media-Vorschau separat; sie verwendet möglicherweise einen anderen Ausschnitt und eine andere Datei.
- Halten Sie das Original, die Exporteinstellungen und den Nachweis der Nutzungserlaubnis für die nächste Aktualisierung bereit.
Wenn die Bildvorbereitung Teil eines größeren Website-Projekts ist, sehen Sie sich das Website-Angebot von Digital Studio an und nennen Sie vorhandene Dateien und fehlendes Bildmaterial in Ihrem Website-Briefing. Eine klare Bildliste hilft, das Projekt mit konkreten Entscheidungen darüber zu beginnen, was erhalten, ersetzt oder neu erstellt werden soll.
