Verringert das Komprimieren eines Bildes die Qualität?

Die Kompression bei JPG und WebP ist verlustbehaftet, aber bei Qualität 75 bis 85 ist der Unterschied meist kaum sichtbar. Bewahren Sie das Original immer separat auf, damit Sie bei Bedarf erneut exportieren können.

Wie groß sollte ein Artikelbild sein?

Die genaue Grenze hängt vom Inhalt ab, doch Fotos in einem Artikel kommen oft mit einigen hundert Kilobyte statt mehreren Megabyte aus. Entscheidend ist, dass die Breite in Pixeln der angezeigten Breite entspricht.

Unterstützt jeder Browser WebP?

Alle gängigen modernen Browser unterstützen WebP derzeit. Wenn Sie auch sehr alte Software abdecken müssen, verwenden Sie ein -Element mit einem JPG als Rückfalloption.

Bilder für die Website komprimieren und Seiten beschleunigen

Bilder machen meist den größten Teil des Gewichts einer Seite aus, deshalb lohnt sich ihre Optimierung mehr als fast alles andere. Dieser Ratgeber erklärt, wie sich die Bildgröße auf Geschwindigkeit und Core Web Vitals auswirkt, welches Format und welche Qualität Sie wählen sollten und was Sie vor der Veröffentlichung prüfen.

Warum das Bildgewicht wichtig ist

Ein Foto direkt vom Smartphone kann mehrere Megabyte wiegen. Binden Sie es in einen Artikel ein, muss ein Besucher mit Mobilfunkverbindung die ganze Datei laden, obwohl sie nur wenige hundert Pixel breit angezeigt wird. Die Folge sind eine langsame Seite, mehr Besucher, die abspringen, und verschwendetes mobiles Datenvolumen.

Die Geschwindigkeit hängt auch mit den Core Web Vitals zusammen, die Google heranzieht. Eine davon ist LCP (Largest Contentful Paint), die misst, wie schnell das größte sichtbare Element erscheint. Sehr oft ist das Hauptbild dieses Element, sein Gewicht wirkt sich also direkt auf den Wert aus. Google beschreibt einen guten LCP als 2,5 Sekunden oder weniger.

Das Format wählen: WebP oder JPG

JPG eignet sich für Fotografien und funktioniert überall. WebP erzeugt bei ähnlicher visueller Qualität meist eine kleinere Datei, oft um etwa ein Viertel oder mehr, und alle gängigen Browser unterstützen es inzwischen. Für neue Websites ist WebP in der Regel eine gute Standardwahl.

PNG ist die richtige Wahl für Screenshots, Logos und Grafiken mit scharfen Kanten oder Transparenz. Als PNG gespeicherte Fotos werden ungewöhnlich groß, wandeln Sie sie daher besser in JPG oder WebP um. Auch HEIC-Dateien vom Smartphone sollten Sie umwandeln, bevor sie auf eine Website kommen.

Die Qualität einstellen

Bei verlustbehafteten Formaten (JPG, WebP) genügt für Fotos meist eine Qualität von etwa 75 bis 85 auf der Skala von 0 bis 100. Unter etwa 70 werden blockartige Flächen und Rauschen an den Kanten sichtbar, über 90 wächst die Datei stark für einen Unterschied, den das Auge kaum wahrnimmt.

Am besten probieren Sie es aus: Exportieren Sie einige Versionen und vergleichen Sie sie am Bildschirm in der Größe, in der sie tatsächlich angezeigt werden. Bilder mit großen einfarbigen Flächen oder feiner Schrift zeigen Kompressionsartefakte früher und brauchen womöglich eine höhere Einstellung.

Auf die angezeigte Größe skalieren

Komprimieren ohne Verkleinern ist nur die halbe Arbeit. Wird ein Bild 800 px breit angezeigt, ist es sinnlos, eine Datei mit 4000 px auszuliefern. Wenn Sie ein großes Foto von 4000 auf 1600 px Breite verkleinern, sinkt das Dateigewicht um ein Vielfaches, denn die Pixelzahl fällt mit dem Quadrat der Breite.

Damit Bilder auf Bildschirmen mit hoher Pixeldichte scharf bleiben, bereiten Sie eine Version mit etwa der doppelten angezeigten Breite vor. Für einen Platz von 800 px genügt meist eine Datei mit 1600 px.

Responsive Bilder und Laden

Mit dem Attribut srcset wählt der Browser eine Datei passender Größe für den Bildschirm. Beispiel:

Das Attribut loading="lazy" weist den Browser an, das Bild erst zu laden, wenn der Besucher in seine Nähe scrollt. Setzen Sie es daher für Bilder unterhalb des ersten Bildschirms ein. Laden Sie das oben sichtbare Hauptbild nicht per Lazy Loading, denn das kann den LCP verschlechtern.

Mit den Attributen width und height kann der Browser den Platz im Voraus reservieren, sodass die Seite beim Laden nicht springt. Das verbessert die Kennzahl CLS (Cumulative Layout Shift).

Eine praktische Checkliste vor der Veröffentlichung

Das Bild ist auf die Breite verkleinert, in der es tatsächlich angezeigt wird (höchstens etwa das Doppelte davon).
Format gewählt: WebP oder JPG für Fotos, PNG oder WebP für Grafiken mit Transparenz.
Qualität um 75 bis 85, am Bildschirm visuell geprüft.
Die Attribute width und height sind gesetzt.
Bilder unterhalb des ersten Bildschirms verwenden loading="lazy".
Aussagekräftige Dateinamen (zum Beispiel muenchen-altstadt.webp) und sinnvolle Alt-Texte.
Die tatsächlich heruntergeladene Dateigröße ist in den Entwicklertools des Browsers (Reiter Netzwerk) geprüft.

So messen Sie das Ergebnis

Notieren Sie vor der Optimierung, wie viel die Seite wiegt. In den Entwicklertools des Browsers (F12, Reiter Netzwerk, Filter Img) sehen Sie die Größe jedes Bildes und die Gesamtsumme. Wiederholen Sie die Messung nach der Optimierung bei deaktiviertem Cache („Cache deaktivieren“), damit der Vergleich fair ist.

Beispiel: Ein Artikel enthält fünf Fotos zu je 3 MB, insgesamt etwa 15 MB. Verkleinern Sie jedes auf 1600 px Breite und speichern es als WebP mit Qualität 80, wiegt jedes oft nur noch etwa 100 bis 250 KB, alle zusammen weniger als 1,5 MB. Der genaue Wert hängt vom Bildinhalt ab, messen Sie daher immer selbst.

Häufige Fehler

Verkleinern nur mit CSS: Laden Sie eine Datei mit 4000 px hoch und zeigen sie 400 px breit an, lädt der Browser trotzdem die ganze Datei.
Wiederholtes Neukomprimieren: Jedes erneute Speichern eines JPG bringt weitere Verluste. Exportieren Sie immer vom Original.
PNG für Fotos: Die Datei kann um ein Vielfaches größer sein als ein JPG oder WebP.
Lazy Loading beim ersten Bild: Das Hauptbild am Seitenanfang sollte sofort geladen werden.
Fehlender Alt-Text: Er ist für die Barrierefreiheit wichtig und hilft Suchmaschinen, das Bild zu verstehen.