Welche Qualitätsstufe ist die richtige?

Einen festen Wert gibt es nicht, weil er vom Motiv abhängt. Ein Start bei etwa 80 ist üblich. Senken Sie die Stufe schrittweise, bis Sie in der Vorschau bei 100 Prozent einen Unterschied sehen, und gehen Sie dann eine Stufe zurück.

Ist AVIF besser als WebP?

AVIF erzeugt bei Fotos oft kleinere Dateien, das Erzeugen dauert aber länger. WebP ist ein guter, schneller Standard. Beide werden von gängigen aktuellen Browsern unterstützt, ein JPEG als Rückfall bleibt trotzdem sinnvoll.

Verliere ich durch Komprimierung Bildqualität?

Bei verlustbehafteter Komprimierung geben Sie Details auf. Bei passender Stufe fällt das nicht auf. Verlustfreie Verfahren wie PNG verändern kein Pixel, erzeugen aber größere Dateien.

Brauche ich für jedes Bild mehrere Größen?

Nicht immer. Ein kleines Bild in fester Größe braucht nur eine Variante in doppelter Anzeigebreite. Mehrere Größen lohnen sich vor allem bei breiten Bildern, die auf Handy und Desktop unterschiedlich groß erscheinen.

Wie groß darf ein Bild auf der Seite sein?

Ein offizielles Limit gibt es nicht. Als Faustregel sollte das Hauptbild möglichst unter etwa 200 Kilobyte bleiben und die übrigen Bilder deutlich darunter. Entscheidend ist, wie sich das Ergebnis im Speed-Test verhält.

Bilder richtig komprimieren – Website Speed Test

Verlustfrei und verlustbehaftet

Komprimieren bedeutet, dieselbe Bildinformation mit weniger Daten zu speichern. Dafür gibt es zwei Wege. Verlustfreie Verfahren wie PNG oder verlustfreies WebP bewahren jedes Pixel exakt. Die Dateien bleiben vergleichsweise groß, eignen sich aber für Logos, Screenshots und Grafiken mit wenigen Farben. Verlustbehaftete Verfahren wie JPEG, WebP und AVIF verwerfen Details, die das Auge kaum wahrnimmt. Die Dateien werden deutlich kleiner, deshalb sind sie die erste Wahl für Fotos.

Bei verlustbehafteten Verfahren steuert ein Qualitätsregler den Kompromiss. Je niedriger die Stufe, desto kleiner die Datei und desto sichtbarer die Fehler: Blockmuster, verwaschene Kanten und Farbstufen in Verläufen. Ziel ist die niedrigste Stufe, bei der Sie noch keinen Unterschied sehen. Speichern Sie außerdem immer vom Original aus. Wer ein JPEG mehrfach neu speichert, verschlechtert es mit jedem Durchgang.

Das richtige Format wählen

Kein Format ist für alles gut. Die folgende Übersicht zeigt, wofür sich welches eignet:

Bildformate im Überblick
Format	Eignet sich für	Hinweis
JPEG	Fotos	Läuft überall, dient als Rückfall
PNG	Screenshots, Grafiken mit Transparenz	Verlustfrei, bei Fotos sehr groß
WebP	Fotos und Grafiken	Meist kleiner als JPEG und PNG, Transparenz möglich
AVIF	Fotos	Oft nochmals kleiner, Erzeugen dauert länger
SVG	Logos, Icons, einfache Grafiken	Vektorformat, beliebig skalierbar, nicht für Fotos
Video statt GIF	Animationen	MP4 oder WebM sind meist nur ein Bruchteil eines GIFs

WebP und AVIF werden von den gängigen aktuellen Browsern unterstützt. Für ältere Browser liefern Sie ein JPEG als Rückfall mit, wie im Abschnitt zum Einbinden gezeigt. Die einfache Regel lautet: Fotos als AVIF oder WebP mit JPEG-Rückfall, Logos und Icons als SVG, Screenshots als verlustfreies WebP oder PNG.

Zuerst die Größe, dann die Qualität

Der größte Hebel ist die Pixelzahl, nicht der Qualitätsregler. Eine moderne Kamera liefert 4.000 × 3.000 Pixel, also zwölf Millionen. Ihre Seite zeigt das Foto vielleicht mit 800 Pixeln Breite. Damit es auch auf Bildschirmen mit doppelter Pixeldichte scharf bleibt, reichen 1.600 Pixel Breite. Alles darüber wird heruntergeladen und nie gebraucht.

Die Pixelzahl wächst quadratisch: Halbieren Sie die Breite und die Höhe, bleibt nur ein Viertel der Pixel übrig. Deshalb bringt das Verkleinern auf die richtige Größe meist mehr als jede Feineinstellung der Qualität. Als Richtwert gilt: Die Breite der Datei ist höchstens doppelt so groß wie die Breite, mit der das Bild angezeigt wird.

Rechenbeispiel: Was ein Foto wirklich kostet

Das Beispiel nutzt angenommene Ausgangswerte. Echte Dateigrößen hängen vom Motiv ab, etwa von Bildrauschen und Detailreichtum. Gerechnet wird mit einem Foto von 3,2 Megabyte, das auf 1.600 Pixel Breite verkleinert und als WebP gespeichert wird.

Ein Foto und eine Seite mit sechs Fotos (Beispielwerte)

Pixel im Original, 4.000 × 3.000: 12,0 Mio.
Pixel nach dem Verkleinern, 1.600 × 1.200: 1,92 Mio.
Anteil der Pixel: 16 %
Dateigröße nach dem Verkleinern, 3,2 MB × 0,16: 0,51 MB
Nach Umwandlung in WebP, angenommen 30 % kleiner: 0,36 MB
Seite mit sechs Fotos: vorher, 6 × 3,2 MB: 19,2 MB
Seite mit sechs Fotos: nachher, 6 × 0,36 MB: 2,16 MB
Ladezeit der Bilder bei 10 Mbit/s: vorher, 19,2 MB ÷ 1,25 MB/s: 15,4 s
Ladezeit der Bilder bei 10 Mbit/s: nachher, 2,16 MB ÷ 1,25 MB/s: 1,7 s
Eingesparte Datenmenge: rund 89 %

Die Größe der Datei ist beim Verkleinern ungefähr proportional zur Pixelzahl, das ist eine grobe Näherung. Für Handys reicht oft eine Variante mit 800 Pixel Breite. Sie hat nur ein Viertel der Pixel der 1.600er-Variante und damit ein Vielfaches weniger Daten als das Original. Bei einer mobilen Verbindung entscheidet das darüber, ob der Hauptinhalt in zwei Sekunden oder in fünfzehn erscheint.

Praxisbeispiel: Das Titelbild dieses Beitrags

Die Dateigrößen des Fotos über diesem Beitrag lassen sich nachmessen. Gemessen wurden die Dateien dieser Website, 1 KB entspricht hier 1.000 Byte. Die Qualitätsstufen der JPEG- und WebP-Dateien sind nicht identisch eingestellt, der Vergleich zeigt deshalb die Größenordnung.

Dateigrößen desselben Fotos
Variante und Einsatz	Dateigröße
1.600 Pixel, JPEG (Rückfall)	255 KB
1.600 Pixel, WebP (große Bildschirme)	59 KB
1.200 Pixel, WebP (Laptops, Tablets, Handys mit dreifacher Pixeldichte)	41 KB
800 Pixel, WebP (Handys mit doppelter Pixeldichte)	26 KB
480 Pixel, WebP (Bildschirme mit einfacher Pixeldichte)	14 KB

Bei gleicher Breite ist die WebP-Datei rund 77 Prozent kleiner als das JPEG: Aus 255 KB werden 59 KB. Ein Handy lädt dank srcset je nach Pixeldichte meist die 800er- oder 1.200er-Variante mit 26 oder 41 KB, also etwa 10 bis 16 Prozent der Datenmenge des 255-KB-JPEGs.

Schritt für Schritt: So gehen Sie vor

Original sichern. Bewahren Sie die unbearbeitete Datei auf und exportieren Sie jede Webversion davon.
Auf die Zielgröße skalieren. Nehmen Sie die doppelte Anzeigebreite. Für flexible Layouts erstellen Sie mehrere Varianten, zum Beispiel mit 480, 800, 1.200 und 1.600 Pixeln Breite.
Format wählen. Fotos als AVIF oder WebP, dazu ein JPEG als Rückfall. Logos und Icons als SVG.
Qualität einstellen. Beginnen Sie bei etwa 80, betrachten Sie das Ergebnis bei 100 Prozent und senken Sie schrittweise, bis Sie einen Unterschied sehen. Gehen Sie dann eine Stufe zurück.
Metadaten entfernen. Ohne Kameradaten und Aufnahmeort wird die Datei kleiner, und der Aufnahmeort gehört aus Datenschutzgründen nicht auf die Seite.
Sprechend benennen. Ein Dateiname wie werkstatt-eingang-800.webp hilft Ihnen und der Suche mehr als IMG_4821.webp. Ergänzen Sie einen Alternativtext, der das Motiv beschreibt.
Nachmessen. Der Speed-Test meldet, ob Bilder noch zu groß oder im falschen Format sind.

Dafür genügen Bildbearbeitungsprogramme, Browser-Werkzeuge wie Squoosh, Kommandozeilenprogramme wie cwebp oder ImageMagick sowie die Bildfunktionen vieler Redaktionssysteme und Plugins. Welches Werkzeug Sie nutzen, ist zweitrangig, solange Größe, Format und Qualität stimmen.

Bilder im HTML richtig einbinden

Mit mehreren Größen und Formaten wählt der Browser selbst die passende Datei. Das Element picture kombiniert beides:

<picture>
  <source type="image/avif" srcset="foto-800.avif 800w, foto-1600.avif 1600w" sizes="(min-width: 60rem) 50vw, 100vw">
  <source type="image/webp" srcset="foto-800.webp 800w, foto-1600.webp 1600w" sizes="(min-width: 60rem) 50vw, 100vw">
  <img src="foto-800.jpg" srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
       sizes="(min-width: 60rem) 50vw, 100vw" width="800" height="600"
       alt="Beschreibung des Motivs" loading="lazy">
</picture>

Der Browser nimmt die erste Quelle, die er versteht, und fällt sonst auf das JPEG im img-Element zurück. Die Angaben width und height reservieren den Platz, damit die Seite beim Laden nicht springt. Das Attribut loading="lazy" gehört an alle Bilder unterhalb des ersten Bildschirms. Das Hauptbild laden Sie dagegen ohne Verzögerung und mit fetchpriority="high", damit der größte Inhalt früh erscheint. Warum das für die Ladezeit zählt, steht unter Core Web Vitals erklärt.

Sonderfälle: Hintergründe, Galerien, Vorschaubilder

Hintergrundbilder über die gesamte Breite sind häufig die größten Dateien einer Seite. Für sie gelten dieselben Regeln: auf die nötige Breite verkleinern, modern speichern und die Qualität in der Vorschau prüfen. Liegt Text darüber, verträgt das Bild oft eine stärkere Komprimierung, weil das Auge auf den Text schaut.

Galerien brauchen für die Übersicht kleine Vorschaubilder als eigene Dateien. Erst beim Anklicken wird die große Version geladen. Wer zwanzig Fotos in voller Größe lädt und per CSS verkleinert, überträgt ein Vielfaches der nötigen Daten.

Fotos von Personen und Produkten zeigen Kompressionsfehler früher, weil Haut, Stoffe und Oberflächen feine Verläufe haben. Wählen Sie hier die Qualität etwas höher als bei Landschaften oder unscharfen Hintergründen und prüfen Sie das Ergebnis am Handy und am großen Bildschirm.

Häufige Fehler

Fotos in voller Kameraauflösung hochladen. Die Seite lädt zwölf Millionen Pixel, zeigt aber nur einen Bruchteil.
Fotos als PNG speichern. PNG ist verlustfrei und bei Fotos ein Vielfaches größer als JPEG oder WebP.
Logos als JPEG ausliefern. Kanten werden unscharf und die Datei größer als ein SVG.
Bilder nur per CSS verkleinern. Die Datei bleibt gleich groß, nur die Darstellung schrumpft.
Das Hauptbild mit Lazy Loading verzögern. Der größte Inhalt erscheint dadurch später.
Animierte GIFs verwenden. Dasselbe als Video ist meist deutlich kleiner.
Text in Bilder einbetten. Er wird bei hoher Komprimierung unscharf und ist für Screenreader unsichtbar.

Checkliste für jedes Bild

Original gesichert, Webversion davon exportiert
Breite höchstens doppelt so groß wie die angezeigte Breite
Fotos als AVIF oder WebP mit JPEG-Rückfall, Logos und Icons als SVG
Qualität in der Vorschau bei 100 Prozent geprüft
Metadaten wie Aufnahmeort entfernt
Breite und Höhe im HTML gesetzt
Hauptbild ohne Lazy Loading, alle übrigen mit
Alternativtext vorhanden, bei reiner Dekoration leer
Ergebnis im Speed-Test geprüft

Quellen und Stand

Stand: Oktober 2026. Die Browserunterstützung finden Sie aktuell bei Can I use: WebP und Can I use: AVIF, die Hinweise zum Hauptbild in der Google-Anleitung Largest Contentful Paint optimieren. Alle Rechenbeispiele verwenden frei gewählte Zahlen und sind keine Studien.

Wie Sie die übrigen Bremsen finden, zeigt die Liste Website schneller machen: 15 Maßnahmen. Warum sich der Aufwand lohnt, beschreibt der Beitrag Warum langsame Websites Kunden kosten.

Bilder richtig komprimieren