Bilder für schnelle und gut lesbare Webseiten aufbereiten

Grundlage

Beginnen Sie mit dem sichtbaren Inhalt. Ein Porträt stellt eine Person vor, ein Produktfoto zeigt bestimmte Details und eine Erklärgrafik vermittelt einen Zusammenhang. Diese Aufgaben benötigen unterschiedliche Entscheidungen. Ein technisch kleines Bild ist nicht automatisch geeignet. Es muss auch in seiner tatsächlichen Größe verständlich bleiben und darf durch den Ausschnitt keine wesentliche Information verlieren.

Öffnen Sie die Seite auf einem schmalen und einem breiten Bildschirm. Prüfen Sie, welcher Teil des Motivs sichtbar ist und was Besucher daraus erkennen sollen. Bei einem Porträt kann ein enger Ausschnitt sinnvoll sein. Bei einem Produkt darf er wichtige Bestandteile nicht abschneiden. Eine Beschriftung am Bildrand muss ebenfalls erhalten bleiben, wenn sie zur Erklärung gehört. Halten Sie die benötigten Details fest, bevor Varianten exportiert oder automatisch erzeugt werden.

Als Arbeitsbeispiel kann ein Foto einer Maschine dienen. Eine breite Aufnahme zeigt den gesamten Aufbau, während eine kleine Kachel davon kaum mehr als die Außenform erkennen lässt. Vielleicht braucht die Übersichtsseite nur das Gesamtmotiv, die Produktseite aber zusätzlich einen Detailausschnitt. Das sind unterschiedliche redaktionelle Aufgaben. Sie werden nicht dadurch gelöst, dass dieselbe Originaldatei überall verkleinert angezeigt wird. Prüfen Sie außerdem, ob die Bildunterschrift zur jeweiligen Fassung passt und eine Aufnahme korrekt eingeordnet ist.

Bei einem Foto werden beispielsweise feine Strukturen, Farbverläufe und sichtbare Kompressionsfehler verglichen. Bei einer Grafik zählen dagegen die Lesbarkeit von Text, klare Linien und die Beziehungen zwischen ihren Elementen. Eine breite Grafik kann auf dem Handy vollständig sichtbar und trotzdem unverständlich klein sein. In diesem Fall ist eine andere Anordnung oft die passendere Aufgabe als eine weitere Verringerung der Dateigröße. Die Mobilfassung muss dabei dieselbe Aussage vermitteln.

Prüfen Sie eine Erklärgrafik in der Größe, in der sie tatsächlich erscheint. Lassen sich Überschriften, Zahlen und Hinweise ohne Vergrößerung lesen? Enden Pfeile eindeutig zwischen den richtigen Elementen? Ist eine wichtige Einschränkung nur in winziger Schrift vorhanden? Solche Beobachtungen gehören zur Bildprüfung. Der Zusammenhang mit dem restlichen Seitenaufbau wird beim Webdesign berücksichtigt. Ein Export kann technisch funktionieren und dennoch eine ungeeignete Gestaltung für den vorgesehenen Platz enthalten.

Bearbeitung

Nach der inhaltlichen Prüfung werden die benötigten Fassungen vorbereitet. Bewahren Sie ein geeignetes Original auf und erstellen Sie Arbeitsvarianten daraus. Vergleichen Sie sichtbare Qualität und Dateigröße am konkreten Motiv. Eine allgemeine Prozentangabe ist dafür kein Ersatz. Das sinnvolle Ergebnis hängt von Bildinhalt, Darstellung und den Möglichkeiten des verwendeten Systems ab.

Die Einführung zu responsiven Bildern auf web.dev erläutert, wie mehrere Quellen und Angaben zur Darstellung dem Browser bei der Auswahl helfen. Die dort beschriebenen Verfahren unterscheiden eine Auswahl anhand bereitgestellter Varianten von einer gezielten Vorgabe etwa für einen anderen Ausschnitt. Für die redaktionelle Planung ist deshalb wichtig, welche Bildfassungen tatsächlich gebraucht werden. Eine zusätzliche Datei allein sorgt noch nicht dafür, dass sie an der richtigen Stelle ausgeliefert wird.

Kontrollieren Sie nach der Einrichtung die verwendete Fassung auf der öffentlichen Seite. Ein kleines Vorschaubild darf nicht versehentlich als unscharfe Großaufnahme erscheinen. Umgekehrt sollte eine große Originaldatei nicht ohne nachvollziehbaren Grund für eine kleine Kachel verwendet werden. Bei automatisch erzeugten Varianten wird auch der Ausschnitt betrachtet. Wenn ein System die Mitte des Motivs bevorzugt, kann ein wichtiger Bestandteil am Rand fehlen. Eine andere Datei oder ein angepasster Bildfokus wird dann gezielt geprüft.

Erstellen Sie bei Bedarf mehrere Exportvarianten und vergleichen Sie diese in der vorgesehenen Anzeigegröße. Achten Sie auf Gesichter, kleine Konturen, Schrift innerhalb des Motivs und wichtige Oberflächen. Ein Blick auf eine stark verkleinerte Vorschau reicht dafür nicht aus. Halten Sie fest, welche Fassung gewählt wurde und weshalb sie die benötigten Informationen erhält. Ein kleinerer Dateiumfang ist nützlich, solange die redaktionelle Aufgabe weiterhin erfüllt wird.

Bei der Formatwahl werden außerdem die Möglichkeiten des Systems und die benötigte Weiterverarbeitung berücksichtigt. Eine Website, eine Druckvorlage und ein weitergegebenes Original können unterschiedliche Anforderungen haben. Für den Webeinsatz wird eine geeignete Fassung erstellt, das Original bleibt davon getrennt. Prüfen Sie auch Transparenz und Hintergrundfarbe. Ein Logo, das auf Weiß gut aussieht, kann im dunklen Footer unpassende Ränder zeigen. Die technische Umwandlung muss deshalb zusammen mit der tatsächlichen Verwendung betrachtet werden.

Umsetzung

Eine optimierte Datei kann durch eine ungeeignete Einbindung trotzdem spät erscheinen oder den Aufbau stören. Prüfen Sie deshalb nicht nur den Export, sondern den ersten Besuch der veröffentlichten Seite. Besonders wichtig sind das unmittelbar benötigte Bild und die später im Text verwendeten Motive. Beide können unterschiedliche Aufgaben beim Laden haben.

Die Dokumentation zum verzögerten Laden von Bildern beschreibt, dass der Browser geeignete Bilder in der Nähe des sichtbaren Bereichs nachladen kann. Das bedeutet nicht, dass erst ein bereits sichtbares Bild angefordert wird. Ein wichtiges Bild im ersten Bildschirm, besonders ein LCP-Bild, sollte dadurch nicht zusätzlich verzögert werden. Für die Einrichtung werden also Position und Bedeutung des Motivs betrachtet, statt dieselbe Ladeeinstellung pauschal auf alle Bilder anzuwenden.

Testen Sie den Einstieg ohne vorheriges Scrollen oder Antippen. Erscheinen die benötigten Informationen? Bleibt der reservierte Bildbereich nachvollziehbar? Betrachten Sie anschließend weiter unten liegende Motive beim normalen Lesen. Eine Aufnahme, die erst nach erneutem Scrollen sichtbar wird, wäre ein konkreter Befund. Ebenso sollte kein Platzhalter dauerhaft stehen bleiben. Falls mehrere Werkzeuge das Laden beeinflussen, wird ihre tatsächliche Wirkung geprüft. Eine aktivierte Einstellung allein bestätigt noch kein brauchbares Ergebnis.

Prüfen Sie den Alternativtext passend zur Funktion des Bildes. Ein informatives Motiv benötigt eine sinnvolle Beschreibung, während ein rein dekoratives Element anders behandelt werden kann. Vermeiden Sie Suchwortlisten und Angaben, die das Motiv nicht zeigt. Bei einem Symbolbild darf die Beschreibung keine echte Kundenaufnahme oder einen bewiesenen Projekterfolg erfinden. Auch eine Bildunterschrift sollte den Zusammenhang verständlich machen. Dateiname, Alternativtext und sichtbare Beschriftung erfüllen unterschiedliche Aufgaben und werden nicht wahllos gleichgesetzt.

Wenn eine Datei mehrfach verwendet wird, erfassen Sie die betroffenen Stellen vor einer Änderung. Ein Austausch kann eine Leistungsseite, Teamkarte und weitere Vorschauen gleichzeitig berühren. Kontrollieren Sie diese konkreten Verwendungen mit ihren jeweiligen Ausschnitten. Bei einer Website mit fünf vereinbarten Unterseiten sind zusätzliche Ratgeber, Ortsseiten und laufende Bildpflege nicht automatisch enthalten. Der benötigte Umfang wird vorab abgestimmt. Die allgemeine Leistung zur Seitengeschwindigkeit verbindet solche Medienaufgaben mit der Untersuchung des vorhandenen Auftritts.

Legen Sie für neue Bilder einen einfachen Ablauf fest. Benennen Sie, wer das Original bereitstellt, den benötigten Ausschnitt bestätigt und die öffentliche Darstellung kontrolliert. Wenn neue Motive von verschiedenen Personen geliefert werden, hilft eine kurze Vorgabe zu ihrer Verwendung. Eine frühere Optimierung einzelner Fotos bearbeitet später hochgeladene Dateien nicht automatisch mit. Das Verhalten einer eingerichteten Automatik wird deshalb an einem geeigneten neuen Beispiel geprüft und als eigener Umfang beschrieben.