Bilder fürs Web optimieren: Format, Größe und Kompression richtig wählen

Ein Foto direkt aus dem Smartphone hat 4000 × 3000 Pixel und 3–6 MB. Auf einer Website wird es vielleicht 800 Pixel breit angezeigt. Der Browser lädt trotzdem die volle Datei – auf dem Handy im Mobilfunk eine Sache von Sekunden. Bildoptimierung bedeutet: das passende Format, die passende Größe und eine sinnvolle Kompression. Sie ist der schnellste und günstigste Weg zu einer schnelleren Website.

Die Bildformate im Überblick

Die Prozentangaben sind typische Werte; das tatsächliche Einsparpotenzial hängt vom Motiv ab. JPEG und PNG wandeln Sie mit dem WebP-Konverter direkt im Browser um.

Schritt 1: Die richtige Größe

Ermitteln Sie die maximale Anzeigebreite des Bildes in Ihrem Layout und multiplizieren Sie sie mit der Pixeldichte hochauflösender Displays (meist 2):

• Inhaltsbild im Blog mit 760 px Spaltenbreite → ca. 1520 px Breite
• Produktbild im Raster mit 400 px → ca. 800 px
• Vollbreites Hero-Bild → 1920–2400 px

Mehr bringt keine sichtbare Qualität, nur Datenmenge. Zum Verkleinern nutzen Sie das Werkzeug Bildgröße ändern direkt im Browser.

Rechenbeispiel: Ein Foto mit 4000 × 3000 px hat 12 Millionen Pixel, eines mit 1600 × 1200 px nur 1,92 Millionen – also 16 % der Pixelmenge. Schon dadurch sinkt die Datei typischerweise auf einen Bruchteil.

Schritt 2: Komprimieren

Verlustbehaftete Kompression entfernt Bildinformationen, die das Auge kaum wahrnimmt. Bewährte Startwerte:

• JPEG: Qualität 75–85
• WebP: Qualität 70–80
• AVIF: Qualität 50–65 (die Skala ist nicht direkt mit JPEG vergleichbar)

Prüfen Sie das Ergebnis immer in Originalgröße, besonders bei Hauttönen, Verläufen (Himmel) und feinen Kanten. Mit dem Bildkompressor sehen Sie die Vorher-nachher-Größe direkt. Zusätzlich lohnt es sich, Metadaten (EXIF) zu entfernen – sie können Kameramodell und sogar GPS-Koordinaten enthalten, was auch datenschutzrechtlich relevant sein kann.

Schritt 3: Responsive Bilder

Mit srcset und sizes wählt der Browser automatisch die passende Datei für Bildschirm und Pixeldichte:

<img src="/bilder/werkstatt-800.webp"
     srcset="/bilder/werkstatt-400.webp 400w,
             /bilder/werkstatt-800.webp 800w,
             /bilder/werkstatt-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="533"
     alt="Meister bei der Arbeit in der Werkstatt"
     loading="lazy" decoding="async">

Für moderne Formate mit Fallback nutzen Sie das <picture>-Element:

<picture>
  <source srcset="/bilder/team.avif" type="image/avif">
  <source srcset="/bilder/team.webp" type="image/webp">
  <img src="/bilder/team.jpg" width="1200" height="800" alt="Unser Team">
</picture>

Schritt 4: Lazy Loading – aber richtig

loading="lazy" lädt Bilder erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Das spart Daten bei langen Seiten. Aber: Das wichtigste Bild oben (Hero, erstes Produktbild) darf nicht lazy geladen werden – sonst verschlechtert sich der LCP-Wert. Geben Sie diesem Bild stattdessen fetchpriority="high". Hintergründe erklärt der Ratgeber Core Web Vitals erklärt.

Weitere Tipps

• Immer width und height angeben, damit der Browser Platz reserviert und nichts springt.
• Aussagekräftige Dateinamen (fliesen-bad-koeln.webp statt IMG_4711.jpg) und Alt-Texte helfen Barrierefreiheit und Bildersuche. Seit Juni 2025 gilt mit dem Barrierefreiheitsstärkungsgesetz für viele Onlineshops in Deutschland ohnehin eine Pflicht zu barrierefreien Angeboten.
• Dekorative Grafiken per CSS oder mit leerem alt="" einbinden.
• Bildrechte beachten: Nutzen Sie nur Bilder, für die Sie eine Lizenz haben.
• CMS-Funktionen nutzen: WordPress erzeugt automatisch mehrere Größen und srcset; Plugins oder ein Bild-CDN können WebP/AVIF automatisch ausliefern.

Beispiel: Produktseite vorher und nachher

Eine Produktseite eines kleinen Onlineshops lädt fünf Produktfotos direkt aus der Kamera, je rund 4 MB, zusammen etwa 20 MB. Nach der Optimierung:

• Hauptbild als AVIF in 1600 px Breite: ca. 180 KB
• Vier Galeriebilder als WebP in 800 px Breite: je ca. 70 KB, zusammen ca. 280 KB
• Vier Galeriebilder mit Lazy Loading, das Hauptbild mit hoher Priorität

Zusammen sind es nur noch rund 460 KB statt 20 MB – etwa 2,3 % der ursprünglichen Datenmenge. Auf dem Smartphone erscheint das Hauptbild dadurch nicht mehr nach mehreren Sekunden, sondern fast sofort. Die Werte sind typische Größenordnungen; je nach Motiv können sie abweichen.

Werkzeuge und Automatisierung

Für einzelne Bilder genügen Browser-Werkzeuge. Bei vielen Dateien lohnt sich Automatisierung: CMS-Plugins wandeln Uploads automatisch in WebP oder AVIF um, Build-Tools für statische Websites erzeugen beim Veröffentlichen mehrere Größen, und Bild-CDNs liefern je nach Browser das passende Format aus. Wichtig ist, die Originale separat zu archivieren – so können Sie später mit besseren Formaten oder anderen Größen erneut exportieren, ohne Qualität zu verlieren.

Häufige Fehler

• Originalfotos direkt hochladen und per CSS verkleinern.
• PNG für Fotos verwenden.
• Logo als großes JPEG statt als SVG.
• Lazy Loading für das erste sichtbare Bild.
• Fehlende Abmessungen, dadurch Layoutverschiebungen.
• Zu starke Kompression bei Produktfotos, die Details zeigen sollen.

Kontrollieren Sie das Ergebnis anschließend mit einem Geschwindigkeitstest auf dem Smartphone.

Checkliste

• Fotos als AVIF/WebP, Logos und Icons als SVG.
• Bildbreite = maximale Anzeigebreite × 2, nicht mehr.
• Qualität sinnvoll eingestellt, Metadaten entfernt.
• srcset/sizes für Inhaltsbilder, <picture> für Format-Fallbacks.
• Lazy Loading nur unterhalb des sichtbaren Bereichs.
• width, height und Alt-Text bei jedem Bild.

Weitere Hebel für schnelle Seiten zeigt der Ratgeber Website schneller machen.