So komprimieren Sie Bilder für eine Website

Laut dem Web Almanac 2025 des HTTP Archive wog eine typische Startseite (Median) auf Mobilgeräten 2,56 MB, davon entfielen 911 KB auf Bilder. Auf dem Desktop enthielt die mittlere Seite 1.058 KB an Bildern. Bilder sind auch das, worauf Besucher warten: Das größte Element, das beim Laden auf dem Bildschirm erscheint, der Largest Contentful Paint (LCP), war auf 76 % der mobilen Seiten ein Bild.

Leichtere Bilder laden bei langsamen Verbindungen schneller, verbrauchen weniger mobiles Datenvolumen Ihrer Besucher und kosten Sie weniger Bandbreite. Der LCP gehört zu den Core Web Vitals, den Messwerten, mit denen Google die Nutzererfahrung einer Seite bewertet. Schwere Bilder können also mehr kosten als ein paar Sekunden Geduld.

Komprimierung kann ein Bild nicht retten, das weit größer ist als der Platz, den es ausfüllt. Ein Kamerafoto mit 4000 Pixeln Breite in einer 800 Pixel breiten Spalte enthält 25-mal mehr Pixel, als die Seite nutzen kann. Laut web.dev kann es 2–4-mal mehr Daten als nötig verbrauchen, wenn Smartphones Bilder in Desktop-Größe erhalten.

• Banner über die volle Breite: Für die meisten Layouts reichen etwa 1600–2000 Pixel Breite.
• Bilder in einer Artikelspalte: etwa die doppelte Spaltenbreite, damit sie auf hochauflösenden Bildschirmen scharf bleiben (zum Beispiel 1400 Pixel für eine 700 Pixel breite Spalte).
• Vorschaubilder und Avatare: das Doppelte ihrer Anzeigegröße, oft 200–400 Pixel.

Das Format bestimmt, wie effizient sich ein Bild speichern lässt. Kurz gesagt: Für Fotos eignen sich JPG oder WebP, für Logos, Screenshots und alles mit Transparenz PNG oder WebP. Unser Vergleich von JPG, PNG und WebP erklärt, wann welches Format vorne liegt.

Rund 97 % der genutzten Browser zeigen WebP an, und die Dateien sind oft deutlich kleiner. Zum Ausprobieren wandeln Sie mit JPG in WebP oder PNG in WebP um und vergleichen das Ergebnis mit dem Original: Eine umgewandelte Datei ist nicht immer kleiner, vor allem bei einfachen Grafiken.

Bei der Komprimierung werden Daten entfernt, deren Fehlen dem Auge kaum auffällt. Im Bildkompressor von Bitinz können Sie mehrere JPG-, PNG- oder WebP-Dateien auf einmal ablegen und eine von drei Stufen wählen:

• Schnell: Tempo hat Vorrang, für große Mengen.
• Ausgewogen: die Standardeinstellung und für die meisten Website-Bilder gut geeignet.
• Maximal: dauert etwas länger und liefert kleinere Dateien; lohnt sich für Bilder, die auf jeder Seite erscheinen, etwa Banner und Hintergründe.

Wenn Sie das Format beibehalten, gibt Ihnen Bitinz nie eine größere Datei zurück als die hochgeladene. Vergleichen Sie das Ergebnis in voller Größe mit dem Original, besonders bei Bildern mit feiner Schrift oder weichen Farbverläufen, und laden Sie dann die Bilder herunter, mit denen Sie zufrieden sind.

Auch ein gut komprimiertes Bild kann eine Seite bremsen, wenn es zum falschen Zeitpunkt oder in der falschen Größe geladen wird. Ein paar HTML-Attribute erledigen den Großteil der Arbeit:

• Geben Sie bei jedem Bild width und height an, damit der Browser den Platz reservieren kann und das Layout beim Laden nicht springt.
• Ergänzen Sie loading="lazy" bei Bildern weiter unten auf der Seite, damit sie erst geladen werden, wenn Besucher in ihre Nähe scrollen.
• Laden Sie das Hauptbild oben auf der Seite nie per Lazy Loading. web.dev empfiehlt für dieses Bild stattdessen fetchpriority="high", und zwar für höchstens ein oder zwei Bilder.
• Bieten Sie mit srcset und sizes dasselbe Bild in mehreren Breiten an, damit Smartphones eine kleinere Datei laden als große Bildschirme.
• Liefern Sie Bilder mit langer Cache-Dauer aus, über ein CDN, falls Sie eines haben, damit wiederkehrende Besucher sie nicht erneut herunterladen.

Testen Sie die Seite mit PageSpeed Insights oder im Lighthouse-Panel von Chrome. Seit Lighthouse 13 sind die Bildprüfungen in einem einzigen Insight gebündelt, „Improve image delivery“. Es listet Bilder auf, die sich stärker komprimieren, in einem modernen Format ausliefern oder verkleinern ließen. Bilder, die weniger als 4 KiB einsparen würden, erscheinen dort nicht; eine kurze Liste ist also ein gutes Zeichen.

Sehen Sie sich die Seite danach selbst auf einem Smartphone an. An scharfen Kanten, Text in Bildern und Hauttönen zeigen sich Komprimierungsprobleme zuerst.

Kommen auf Ihrer Website täglich Bilder hinzu, etwa über ein Content-Management-System oder einen Onlineshop, komprimieren Sie sie beim Hochladen oder Veröffentlichen statt von Hand. Die Entwickler-API von Bitinz nimmt ein Bild per HTTP entgegen und gibt einen Link zur komprimierten Datei zurück, sodass Sie sie aus einem Skript oder einer Build-Pipeline heraus aufrufen können. Jedes Konto hat ein kostenloses monatliches Kontingent.

1. 01Skalieren Sie jedes Bild auf etwa das Doppelte seiner Anzeigegröße.
2. 02Verwenden Sie JPG oder WebP für Fotos und PNG oder WebP für Grafiken und Transparenz.
3. 03Komprimieren Sie mit der Stufe Ausgewogen und probieren Sie Maximal für die größten Bilder.
4. 04Vergleichen Sie das Ergebnis mit dem Original, bevor Sie es ersetzen.
5. 05Geben Sie Breite und Höhe an und nutzen Sie Lazy Loading für Bilder unterhalb des sichtbaren Bereichs, aber nie für das Hauptbild.
6. 06Prüfen Sie die Seite erneut mit PageSpeed Insights.

Sie laden Bilder auf andere Plattformen als Ihre eigene Website hoch? Jede Plattform hat eigene Regeln: Siehe Bildgrößen und Limits für E-Mail und Onlineshops.