Bilder optimieren: Format, Größe und Ladeverhalten für schnellere Seiten

Was ist das Problem#

Bilder sind bei den meisten Websites der größte Anteil der übertragenen Datenmenge — und damit einer der wirkungsvollsten Hebel für Ladezeit. EverAudit prüft dabei mehrere unabhängige Ursachen gleichzeitig: ob Bilder in einem veralteten Format ausgeliefert werden (modern-image-formats), ob sie effizient komprimiert sind (uses-optimized-images), ob kleine Bildschirme unnötig die große Desktop-Variante laden (uses-responsive-images), ob Bilder unterhalb des sichtbaren Bereichs sofort statt bedarfsgerecht geladen werden (offscreen-images), ob einzelne Bilder ein festes Größenbudget überschreiten (oversized-image) und ob ihnen feste Abmessungen im Markup fehlen (unsized-images). Der zusammenfassende Befund image-delivery-insight bündelt das gesamte Einsparpotenzial aus Format, Größe und Ladeverhalten.

Warum EverAudit das prüft#

Bild-Performance wirkt sich direkt auf zwei der drei Core Web Vitals aus: auf den Largest Contentful Paint, wenn das größte sichtbare Element ein Bild ist, und auf den Cumulative Layout Shift, wenn Bildern kein reservierter Platz zugewiesen ist. Weil Bilder in aller Regel den größten Einzelposten der übertragenen Datenmenge einer Seite ausmachen, ist ihre Optimierung meist die Maßnahme mit dem besten Verhältnis von Aufwand zu Wirkung. EverAudit trennt die Ursachen bewusst auf — Format, Komprimierung, responsive Auslieferung, Ladezeitpunkt, Abmessungen —, weil jede für sich behoben werden kann, ohne die anderen anzufassen.

Welche Auswirkung hat es#

Große, unkomprimierte oder falsch formatierte Bilder verlangsamen den Seitenaufbau spürbar, besonders auf dem Smartphone und bei mobiler Verbindung, wo Besucher weniger Geduld mitbringen als am Desktop-Rechner. Das kostet nicht nur Ladezeit, sondern auch das Datenvolumen der Besucher, wenn Bilder in voller Desktop-Größe an ein kleines Display ausgeliefert werden. Fehlende Abmessungsangaben führen zusätzlich zu springenden Inhalten, die die Bedienung erschweren. In der Summe wirkt sich das sowohl auf die Absprungrate als auch auf das Ranking bei Google aus, da Bild-Performance direkt in die Core-Web-Vitals-Bewertung einfließt.

Wie Sie es beheben#

1. Moderne Formate ausliefern. Konvertieren Sie Hero- und Content-Bilder nach AVIF oder WebP und stellen Sie für ältere Browser einen JPEG-Fallback bereit:

<picture>
  <source srcset="/produkt.avif" type="image/avif">
  <source srcset="/produkt.webp" type="image/webp">
  <img src="/produkt.jpg" alt="Produktbeschreibung" width="1200" height="800">
</picture>

2. Komprimieren, bevor Sie veröffentlichen. JPEGs mit einer Qualitätsstufe zwischen 75 und 82 neu kodieren, PNGs vor dem Upload durch ein Optimierungswerkzeug wie pngcrush oder oxipng schicken. Der Qualitätsunterschied ist in der Regel nicht sichtbar, die Dateigröße sinkt jedoch deutlich.

3. Responsive Bildgrößen über srcset bereitstellen, damit jedes Gerät nur die tatsächlich benötigte Auflösung lädt:

<img
  srcset="/bild-480.avif 480w, /bild-960.avif 960w, /bild-1600.avif 1600w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 1600px"
  src="/bild-960.avif" alt="…" width="960" height="640">

4. Bilder unterhalb des sichtbaren Bereichs lazy laden, das erste sichtbare Bild dagegen nicht:

<img src="/weiter-unten.avif" loading="lazy" alt="…" width="800" height="533">

5. Feste width- und height-Attribute ergänzen (oder per CSS aspect-ratio setzen), damit der Browser vor dem Laden bereits den richtigen Platz reserviert und kein Layout-Shift entsteht.

6. Ein Bild-CDN oder eine automatisierte Bildpipeline erwägen, wenn Format, Größe und srcset manuell zu pflegen aufwendig wird — viele Hosting- und CMS-Umgebungen bieten dafür eine eingebaute oder zubuchbare Lösung, die Formatwahl, Kompression und responsive Varianten automatisch übernimmt.

Fazit#

Bild-Optimierung ist in fast jedem Projekt der Hebel mit dem besten Verhältnis von Aufwand zu Wirkung: Ein moderneres Format, saubere Komprimierung, passende srcset-Größen, korrektes Lazy-Loading und feste Abmessungen lassen sich unabhängig voneinander umsetzen und wirken sich gemeinsam sowohl auf LCP als auch auf CLS positiv aus — ohne dass Sie an der sichtbaren Bildqualität etwas verändern müssen.