Bilder sind meist der schwerste Teil einer Webseite. Ein einziges unoptimiertes Foto direkt vom Smartphone oder von der Kamera kann mehrere Megabyte wiegen, mehr als das gesamte HTML, CSS und JavaScript der Seite zusammen. Bilder zu komprimieren ist einer der einfachsten Wege, eine Website schneller zu machen, und sie müssen dadurch nicht schlechter aussehen. Dieser Leitfaden erklärt, wie Bildkomprimierung funktioniert, welche Formate Sie wählen sollten, welche Qualitätseinstellungen sinnvoll sind und einen einfachen Ablauf, den Sie für jede Seite wiederholen können.
Warum die Bildgröße wichtig ist
- Geschwindigkeit. Schwere Bilder brauchen länger zum Herunterladen, besonders über mobile Verbindungen. Besucher merken das, und langsame Seiten verlieren Leser und Kunden.
- Core Web Vitals. Auf vielen Seiten ist das größte sichtbare Element ein Bild, oft ein Hero-Foto. Googles Largest Contentful Paint (LCP) misst, wie schnell dieses Element erscheint, und die Core Web Vitals sind Teil davon, wie Google die Nutzererfahrung einer Seite bewertet.
- Kosten und Limits. Kleinere Bilder verbrauchen weniger Bandbreite und Speicherplatz, und manche Plattformen begrenzen die Upload-Größe.
- Bildersuche. Schnelle, gut beschriebene Bilder lassen sich von Suchmaschinen leichter crawlen und in den Bildergebnissen anzeigen.
Verlustbehaftete und verlustfreie Komprimierung
Verlustfreie Komprimierung verkleinert eine Datei, ohne auch nur ein Pixel zu ändern. Sie findet effizientere Wege, dieselben Daten zu speichern. Die PNG-Optimierung ist verlustfrei, also gibt es keinen Qualitätsregler, aber die Einsparungen sind meist bescheiden.
Verlustbehaftete Komprimierung entfernt Details, die das Auge kaum bemerkt, etwa feine Farbabstufungen und Texturen, und liefert dafür deutlich kleinere Dateien. JPEG, WebP und AVIF unterstützen verlustbehaftete Komprimierung, gesteuert über eine Qualitätseinstellung. Bei vernünftigen Werten sehen die meisten Menschen in normaler Anzeigegröße keinen Unterschied.
Das richtige Bildformat wählen
JPEG (JPG)
Das klassische Format für Fotos. Überall unterstützt, gute Komprimierung für Fotografien, keine Transparenz. Nach wie vor eine sichere Wahl, wenn maximale Kompatibilität nötig ist, etwa in E-Mails.
PNG
Verlustfrei, mit Transparenz. Ideal für Screenshots, Logos, Icons und Grafiken mit flächigen Farben und scharfen Kanten. Eine schlechte Wahl für Fotos, die als PNG riesig werden.
WebP
Ein modernes, von Google entwickeltes Format, das verlustbehaftete und verlustfreie Komprimierung sowie Transparenz unterstützt. Es erzeugt bei ähnlicher Bildqualität meist deutlich kleinere Dateien als JPEG oder PNG, und alle großen aktuellen Browser unterstützen es. Eine hervorragende Standardwahl für Websites.
AVIF
Ein neueres Format auf Basis des Videocodecs AV1. Es komprimiert oft noch besser als WebP, besonders bei Fotos, und wird von den aktuellen Versionen der großen Browser unterstützt. Die Kodierung ist langsamer, und manche ältere Software kann es nicht öffnen. Halten Sie daher einen Fallback bereit, wenn Ihr Publikum ältere Geräte nutzt.
SVG
Gar kein Fotoformat, sondern als Code beschriebene Vektorgrafik. Perfekt für Logos und Icons, die in jeder Größe scharf bleiben müssen. Optimieren Sie SVGs, indem Sie Editor-Metadaten entfernen.
Welche Qualitätseinstellung sollten Sie verwenden?
Es gibt keine perfekte Zahl, denn sie hängt von Bild und Format ab, doch diese Ausgangswerte funktionieren gut:
- Fotos fürs Web: Beginnen Sie bei etwa 75–85 Qualität für JPEG oder WebP und vergleichen Sie dann.
- Große Hero-Bilder: Versuchen Sie es etwas niedriger, bei 70–80, da sie groß sind und schnell erfasst werden.
- Produktfotos, bei denen Details zählen: Bleiben Sie im oberen Bereich, 80–90.
- AVIF: nutzt eine andere Skala. Niedrigere Werte können trotzdem gut aussehen, vergleichen Sie also visuell.
Der beste Test sind Ihre eigenen Augen: Komprimieren Sie, betrachten Sie das Ergebnis in der tatsächlichen Anzeigegröße und senken Sie die Qualität, bis gerade ein Unterschied sichtbar wird. Gehen Sie dann eine Stufe zurück.
Erst skalieren, dann komprimieren
Komprimierung hilft, doch der größte Gewinn liegt oft im Skalieren. Ein Smartphone-Foto kann 4.000 Pixel breit sein, während die Inhaltsspalte Ihres Blogs 800 Pixel misst. Wird das Foto in voller Größe ausgeliefert, lädt der Browser ein Vielfaches der Pixel, die er anzeigen kann.
- Skalieren Sie auf ungefähr die größte Anzeigegröße des Bildes, oder etwa das Doppelte für scharfe Ergebnisse auf hochauflösenden (Retina-)Bildschirmen.
- Nutzen Sie die HTML-Attribute
srcsetundsizesoder die responsiven Bilder Ihres CMS, um kleineren Bildschirmen kleinere Dateien zu liefern.
Ein einfacher Ablauf für jedes Bild
- Das richtige Format wählen: Fotos als WebP oder JPEG (oder AVIF), Grafiken und Screenshots als PNG oder WebP, Logos als SVG.
- Skalieren auf die Anzeigegröße.
- Komprimieren mit dem Bildoptimierer. Laden Sie JPG-, PNG-, WebP- oder AVIF-Dateien hoch (Sie können mehrere auf einmal auswählen), wählen Sie eine Qualitätsstufe und konvertieren Sie bei Bedarf alles in ein einziges Ausgabeformat. Vergleichen Sie Original- und neue Größe und laden Sie die Ergebnisse einzeln oder als ZIP herunter.
- Das Ergebnis prüfen, in Originalgröße auf Smartphone und Desktop.
- Die Datei sprechend benennen, etwa
blaue-keramik-kaffeetasse.webpstattIMG_4821.webp. Der Slug-Generator macht aus jeder Beschreibung einen sauberen Dateinamen. - Alt-Text schreiben, der das Bild für Screenreader und Suchmaschinen beschreibt.
- Bilder unterhalb des sichtbaren Bereichs verzögert laden mit
loading="lazy", aber nicht Ihr Haupt-Hero-Bild, das sofort laden sollte.
Metadaten und Datenschutz nicht vergessen
Fotos von Kameras und Smartphones enthalten EXIF-Metadaten: Kameramodell, Einstellungen, Datum und manchmal GPS-Koordinaten. Das kostet etwas Gewicht und kann verraten, wo ein Foto aufgenommen wurde. Prüfen Sie vor der Veröffentlichung mit dem EXIF-Reader, was ein Bild enthält, besonders bei Fotos von zu Hause. Viele Optimierer und Exporteinstellungen entfernen Metadaten automatisch.
Sonderfälle
Winzige Icons
Sehr kleine Bilder lassen sich mit Bild zu Base64 als Base64-Data-URI direkt in HTML oder CSS einbetten, was eine Netzwerkanfrage spart. Das lohnt sich nur bei Dateien von wenigen Kilobyte, da Base64 die Größe um etwa ein Drittel erhöht.
YouTube-Thumbnails und Social-Media-Bilder
Wenn Sie ein Video-Thumbnail in einem Blogartikel verwenden, holen Sie es mit dem YouTube-Thumbnail-Downloader und komprimieren Sie es wie jedes andere Foto.
Screenshots
Screenshots mit Text sehen als PNG oder verlustfreies WebP oft besser aus. Sind sie sehr groß, genügt meist ein verlustbehaftetes WebP in hoher Qualität.
So erkennen Sie, ob Ihre Bilder ein Problem sind
- Testen Sie Ihre Seite mit Googles PageSpeed Insights oder Lighthouse in den Chrome DevTools. Achten Sie auf Hinweise wie Bilder richtig dimensionieren, Bilder in modernen Formaten bereitstellen und Bilder effizient codieren.
- Öffnen Sie in den DevTools den Tab Network, filtern Sie nach Bildern und sortieren Sie nach Größe, um die schwersten Dateien zu finden.
- Prüfen Sie, ob Ihr Server HTTP/2 oder HTTP/3 nutzt, damit viele Bilder effizient parallel laden. Der HTTP/2-Checker verrät es Ihnen.
Häufig gestellte Fragen
Verringert das Komprimieren die Bildqualität?
Verlustfreie Komprimierung verändert das Bild überhaupt nicht. Verlustbehaftete Komprimierung entfernt Details, doch bei moderaten Qualitätseinstellungen ist der Unterschied in normaler Anzeigegröße meist unsichtbar.
Welches Bildformat ist das beste für Websites?
Für die meisten Fotos ist WebP eine ausgezeichnete Standardwahl, AVIF liefert noch kleinere Dateien. Verwenden Sie PNG für Grafiken, die verlustfreie Qualität brauchen, und SVG für Logos und Icons.
Wie groß sollten Bilder für eine Website sein?
Skalieren Sie sie auf etwa ihre Anzeigegröße (oder bis zum Doppelten für hochauflösende Bildschirme) und komprimieren Sie sie dann. Bei den meisten Inhaltsbildern liegt man damit weit unter den mehreren Megabyte eines Kamera-Originals.
Hilft Bildkomprimierung bei der SEO?
Indirekt. Schnellere Seiten bieten eine bessere Nutzererfahrung und können Core Web Vitals wie LCP verbessern, die zu Googles Signalen für die Seitennutzung gehören.
Sollte ich alle Bilder in WebP umwandeln?
Für Websites ist das meist eine gute Idee, da moderne Browser es unterstützen. Bewahren Sie die Originale auf und nutzen Sie JPEG oder PNG dort, wo Kompatibilität zählt, etwa in E-Mail-Newslettern.
