Bilder webtauglich machen

Damit Webseiten zügig geladen werden, sollten Bilder nur so groß wie nötig sein und im im richtigen Dateiformat vorliegen. Unter Bildgröße versteht man zwei Aspekte: die Auflösung und die Dateigröße. Optimierte Bilder verbessern das Nutzererlebnis und reduzieren die übertragene Datenmenge. Dieser Artikel zeigt anhand von Richtwerten, wie Bilder skaliert und gespeichert werden.

Theorie

Auflösung

oder auch Skalierung oder räumliche Auflösung genannt, beschreibt die Anzahl an Pixel (px) für Höhe und Breite eines Bildes. Dabei unterscheidet man zwischen:

tatsächlicher Auflösung: Anzahl an Pixel, die ein Bild tatsächlich enthält bzw. mit der es eine Kamera aufgenommen hat
Darstellungsgröße: Anzahl an Pixel, mit der das Bild auf einem Bildschirm dargestellt wird

Ist die tatsächliche Auflösung niedriger als die Darstellungsgröße, muss das Bild vergrößert werden, was die sichtbare Qualität vermindert. Ist dagegen die tatsächliche Auflösung größer als die Darstellungsgröße, werden unnötig viele Daten übertragen. Daher ist es optimal, wenn die tatsächliche Auflösung der Darstellungsgröße entspricht. Fotos aus Kameras haben eine Auflösung von 48 Megapixel (MP) und mehr, PC-Bildschirme und Smartphones dagegen nur um die 2 bis 3 MP. Für die Darstellung von Bildern auf Webseiten ist daher eine Auflösung von 2 MP (FullHD: 1.920 x 1.080) ausreichend. Entscheidend ist die Bildbreite.

Auflösungen von Bildschirm und Kamera im Vergleich

Praktisch reicht es, die tatsächliche Auflösung ungefähr auf die Darstellungsgröße zu verringern (max. 1.920 Pixel breit).

Dateigröße

beschreibt den benötigten Speicherplatz bzw. die zu übertragende Datenmenge. Je kleiner eine Datei ist, desto schneller ist sie geladen. Bilder aus Kameras sind mehrere Megabyte groß.

Webtaugliche Bilder sollten nicht größer als 500 Kilobyte sein.

Dateiformat

beschreibt, wie das Bild abgelegt ist. Es gibt verschiedene Formate. Einige sind auf bestimmte Anforderungen optimiert.

	AVIF	JPG	PNG
Beschreibung	modernes Format	altes Format, Standard für Fotos	altes, offenes Format
geeignet für	Fotos, Grafiken	Fotos	Grafiken
Dateigrößen	50 % kleiner als JPG/PNG	mittel	klein
Kompatibilität	hoch von allen Browsern und vielen Grafikprogrammen unterstützt	sehr hoch von allen Browsern und Programmen unterstützt	sehr hoch von allen Browsern und Programmen unterstützt
Verbreitung	noch gering Tendenz steigend	sehr weit verbreitet	weit verbreitet
technische Details	unterstützt Transparenz und hohe Farbtiefen (HDR)		unterstützt Transparenz

Empfehlenswert ist das AVIF-Format, da es Fotos und Grafiken effizient kodiert und von allen Browsern unterstützt wird.

Praxis

für einzelne Bilder ist die webbasierte Opensource-Anwendung Squoosh.app geeignet. Obwohl es eine Web-Anwendung ist, werden die Bilddaten lokal verarbeitet.

Rufen Sie https://squoosh.app/ auf.
Öffnen Sie ein Bild per Drag-and-Drop, Upload oder durch Einfügen aus der Zwischenablage (Strg+V).
Aktivieren Sie im Abschnitt "Edit" die Option Resize und geben Sie in das Feld Width 1.920 ein.
Scrollen Sie im Menü nach unten und wählen Sie im Abschnitt "Compress" AVIF aus. Falls Sie das Bild im alten JPG-Format speichern möchten, nutzen Sie MozJPEG, für PNG OxiPNG.
Mit dem Schieberegler in der Mitte des Bildes können Sie das Originalbild (links) mit dem optimierten (rechts) vergleichen. Wenn die Skalierung verringert wurde, erscheint das optimierte Bild unscharf, da es stark vergrößert angezeigt wird. Das ist unproblematisch. Mit Klick auf das Zahnrad mit Pfeil nach oben unter Edit können Sie Einstellung für weitere Bilder speichern.
Rechts unten sehen Sie die erzielte Einsparung in % bzw. die tatsächliche Größe. Klicken Sie auf das Symbol mit dem blauen Pfeil, um das optimierte Bild herunterzuladen.