Bildoptimierung für das Web: Ein Performance-Leitfaden für 2026

Bilder machen auf den meisten Websites rund 50 % des gesamten Seitengewichts aus. Ein einzelnes nicht optimiertes Hero-Foto kann den Seitenaufruf um 3–5 MB vergrößern – das kostet Sie Besucher in mobilen Netzwerken und schadet Ihren Core Web Vitals-Werten.

Warum Bildoptimierung wichtig ist

Google verwendet den Largest Contentful Paint (LCP) als Rankingsignal. Wenn Ihr größtes sichtbares Element ein überdimensioniertes JPEG ist, das 4 Sekunden zum Rendern benötigt, leidet Ihr SEO – und Ihre Absprungrate gleich mit.

Eine Verzögerung von 1 Sekunde beim Laden der Seite kann die Konversionen laut mehreren Performance-Studien um 7 % senken.

Das richtige Format wählen

Format	Am besten für	Transparenz	Animation
JPEG	Fotos, komplexe Verläufe	Nein	Nein
PNG	Screenshots, Logos, Textüberlagerungen	Ja	Nein
WebP	Alles oben Genannte, ~30 % kleiner	Ja	Ja
AVIF	Next-Gen-Komprimierung, kleinste Dateien	Ja	Ja

Für die meisten Websites im Jahr 2026 ist WebP der beste Kompromiss – von über 97 % der Browser unterstützt. Nutzen Sie unseren PNG to WebP Converter, um Assets stapelweise direkt im Browser zu konvertieren – ohne etwas hochzuladen.

Zuerst skalieren, dann komprimieren

Ein häufiger Fehler: Ein 4000×3000 Pixel großes Foto komprimieren, das nur in 800×600 angezeigt wird. Skalieren Sie immer zuerst, dann komprimieren Sie.

1. Bestimmen Sie die größte Darstellungsgröße auf Ihrer Website (prüfen Sie die responsiven Breakpoints).
2. Exportieren Sie mit 2-facher Größe für Retina-Displays – z. B. 1600×1200 für einen 800×600-Slot.
3. Anschließend komprimieren.

Unser Image Resizer erledigt das in einem Schritt – wählen Sie eine Voreinstellung oder geben Sie eigene Abmessungen ein.

Komprimierungsstrategien

Verlustbehaftete Komprimierung

Reduziert die Dateigröße, indem Daten verworfen werden, die Menschen kaum wahrnehmen. Eine Qualitätseinstellung von 75–85 % für JPEG/WebP sieht auf dem Bildschirm typischerweise identisch mit dem Original aus und reduziert gleichzeitig die Dateigröße um 60–80 %.

Verlustfreie Komprimierung

Reorganisiert die Pixeldaten, ohne Informationen zu verlieren. Geeignet für Icons, Diagramme und Screenshots, bei denen jedes Pixel zählt. Erwartete Einsparungen: 10–25 %.

Probieren Sie unseren Image Compressor – er läuft vollständig in Ihrem Browser und ermöglicht einen direkten Vorher-/Nachher-Vergleich.

Lazy Loading und modernes HTML

Selbst mit optimierten Bildern sollten Sie nur das laden, was der Nutzer sieht:

<img
  src="hero.webp"
  alt="Product screenshot"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
/>

• loading="lazy" — Der Browser verzögert das Laden von Bildern außerhalb des sichtbaren Bereichs.
• decoding="async" — Das Dekodieren blockiert den Haupt-Thread nicht.
• width und height — Verhindert Layout-Verschiebungen (verbessert CLS).

Das <picture>-Element als Format-Fallback

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="800" height="600" />
</picture>

Dies liefert AVIF an unterstützende Browser, WebP als Fallback und JPEG als letzten Ausweg.

Schnell-Checkliste zur Optimierung

1. Analysieren Sie Ihre Seiten mit Lighthouse oder PageSpeed Insights.
2. Skalieren Sie Bilder auf ihre tatsächlichen Darstellungsmaße (× 2 für Retina).
3. Konvertieren Sie zu WebP oder AVIF, wo immer möglich.
4. Komprimieren Sie mit einem Qualitätsziel von 75–85 %.
5. Fügen Sie loading="lazy" zu Bildern unterhalb des sichtbaren Bereichs hinzu.
6. Setzen Sie explizite width- und height-Attribute.

Bildoptimierung ist eine der Performance-Maßnahmen mit dem höchsten ROI – und mit browserbasierten Tools müssen Sie nicht einmal Software installieren.