Gute Web-Bilder brauchen nicht unnötig viele Megabyte.

Ein gutes Web-Bild zeigt das Nötige in ausreichender Qualität und wird in einer passenden Größe ausgeliefert. Das kleinste mögliche Bild ist nicht automatisch die beste Wahl: Ein unlesbarer Screenshot erfüllt seinen Zweck nicht mehr.

Entscheide zuerst, was das Bild erklären soll

Ein Stimmungsfoto, eine Produktaufnahme und ein Screenshot haben unterschiedliche Aufgaben. Bei einem Foto können leichte Detailverluste unauffällig sein. Bei einer Bedienungsanleitung müssen Beschriftungen und Schaltflächen lesbar bleiben. Wenn der relevante Bereich nur einen kleinen Teil des Screenshots einnimmt, hilft ein gezielter Ausschnitt häufig mehr als stärkere Kompression.

Bewahre das Original separat auf. Erzeuge daraus die Web-Version, damit du später einen anderen Zuschnitt oder eine größere Variante exportieren kannst. Verwende nur Bilder, für deren Nutzung du die erforderlichen Rechte hast; ein öffentlich sichtbares Bild ist nicht automatisch frei verwendbar.

Passe die Pixelzahl an die Darstellung an

Miss, wie breit das Bild im Layout tatsächlich erscheint. Ein Bild mit mehreren tausend Pixeln Breite ist für eine kleine Vorschaukachel meist unnötig. Die benötigte Auflösung hängt aber auch von der Pixeldichte des Displays ab.

Ein Beispiel: Ein Bild wird 600 CSS-Pixel breit angezeigt. Eine Variante mit 1.200 Bildpixeln kann auf einem Display mit doppelter Pixeldichte sinnvoll sein. Das bedeutet nicht, dass jedes Gerät immer diese große Datei laden sollte. Mehrere Varianten und eine passende responsive Einbindung erlauben dem Browser eine Auswahl.

Vergleiche Formate am gleichen Motiv

Für Fotos sind WebP und AVIF häufig geeignete Kandidaten; JPEG kann ebenfalls sinnvoll sein. Für Screenshots und andere scharf begrenzte Grafiken lohnt sich der Vergleich mit einer verlustfreien Variante. Eine Transparenzanforderung oder deine Werkzeugkette kann die Auswahl weiter beeinflussen.

Exportiere zwei Varianten mit ähnlicher sichtbarer Qualität und vergleiche Dateigröße sowie Details. Eine Qualitätszahl wie „80“ ist zwischen verschiedenen Programmen und Formaten nicht unmittelbar vergleichbar. Entscheide deshalb nicht nur anhand des Reglers.

Verhindere unnötige Wartezeit und springende Inhalte

Hinterlege Bildabmessungen oder ein passendes Seitenverhältnis, damit der Browser früh Platz reservieren kann. Bei responsiven Bildern helfen passende Varianten und Größenangaben. Kontrolliere in den Browserwerkzeugen, welche Datei tatsächlich geladen wird.

Bilder außerhalb des anfänglich sichtbaren Bereichs können oft verzögert geladen werden. Das wichtige Bild am Seitenanfang sollte dagegen nicht pauschal auf später verschoben werden. Wenn es für den größten sichtbaren Inhalt verantwortlich ist, kann das den sichtbaren Seitenaufbau bremsen.

Beschreibe die Bedeutung, nicht nur das Aussehen

Ein Alternativtext vermittelt die Information, die das Bild an dieser Stelle beiträgt. Bei einer hilfreichen Abbildung könnte das etwa sein: „LAN-Kabel im gelben Netzwerkanschluss des Routers“. Eine lange Aufzählung von Farben wäre dafür weniger nützlich.

Ein rein dekoratives Bild erhält bei einem HTML-Bildelement normalerweise einen leeren Alternativtext. Wichtige Beschriftungen und komplexe Zusammenhänge gehören zusätzlich in den Text der Seite. Der Alternativtext ist kein Platz zum Ansammeln von Suchbegriffen.

Öffne die Seite auf einem kleinen und einem großen Bildschirm. Sind die entscheidenden Details lesbar? Springt der Text beim Laden? Lädt eine unnötig große Datei? Kontrolliere diese Punkte am eingebundenen Bild, nicht nur im Exportfenster.

Der Ratgeber zu schnellen Websites zeigt, wie du solche Änderungen mit einer Ausgangsmessung vergleichst.