Bilder fürs Web optimieren, ohne Qualität zu verlieren

Um Bilder fürs Web zu optimieren, ohne sichtbaren Verlust, tust du fünf Dinge: Exportiere jedes Bild in der Pixelgröße, in der es angezeigt wird (für scharfe Bildschirme etwa doppelt so groß), wähle ein modernes Format wie AVIF oder WebP, komprimiere auf eine mittlere Qualität und vergleiche mit dem Auge, liefere mit srcset mehrere Größen aus und lade alles unterhalb des sichtbaren Bereichs per Lazy Loading. Diese Schritte beseitigen die meisten Bildwarnungen in Lighthouse und senken das Seitengewicht meist drastisch, denn das Originalfoto direkt aus Kamera oder Design-Tool ist um ein Vielfaches größer, als der Bildschirm braucht.

Schritt 1: in der angezeigten Größe exportieren

Ein Bild, das 800 Pixel breit angezeigt wird, muss nicht 4.000 Pixel breit sein. Lighthouse markiert zu große Bilder, weil die zusätzlichen Pixel heruntergeladen, dekodiert und weggeworfen werden. Miss, wie breit das Bild in deinem Layout maximal erscheint, und exportiere dann in etwa der doppelten Breite für Handys und Laptops mit hoher Pixeldichte. Mehr als das Doppelte sieht selten schärfer aus und kostet immer Bytes.

Schritt 2: das richtige Format wählen

Das Format zählt mehr als jeder Kompressionsregler. AVIF liefert meist die kleinste Datei, WebP kommt nah heran und wird überall aktuell unterstützt, JPEG und PNG bleiben die sicheren Rückfalloptionen. WebP oder PNG und PNG oder JPG gehen bei jedem Paar tiefer.

Schritt 3: komprimieren, dann hinsehen

Verlustbehaftete Formate haben eine Qualitätseinstellung, und der richtige Wert hängt vom Bild ab. Beginne bei WebP um 75 bis 80 und bei AVIF um 50 bis 60, exportiere und vergleiche mit dem Original bei 100 % Zoom. Senke den Wert, bis du einen Unterschied siehst, und geh dann eine Stufe zurück. Gesichter, feiner Text und Verläufe brauchen mehr Qualität als unruhige Landschaften. Bildkompression erklärt, was der Encoder weglässt.

Entferne bei der Gelegenheit Metadaten wie Kameradaten und eingebettete Vorschaubilder. Die meisten Exportwerkzeuge erledigen das mit einem Häkchen, und es entfernt Bytes, die niemand sieht.

Schritt 4: responsives Markup mit srcset und sizes

Hast du mehrere Breiten exportiert, lass den Browser wählen. srcset listet die Dateien und ihre Breiten; sizes sagt dem Browser, wie breit das Bild erscheinen wird. Der Browser lädt dann die kleinste Datei, die für diesen Bildschirm scharf genug ist.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

Für ein Bild in einer Spalte beschreibst du das Layout in sizes, zum Beispiel sizes="(min-width: 1024px) 720px, 100vw". Ein falsches sizes ist der häufigste Grund, warum ein responsives Setup trotzdem die große Datei lädt.

Schritt 5: Ladehinweise, die zählen

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Diese Hinweise wirken direkt auf die Core Web Vitals. Das Hero-Bild ist oft das Element des Largest Contentful Paint, das laut web.dev innerhalb von 2,5 Sekunden gerendert sein sollte, und fehlende Maße sind eine klassische Ursache für Layoutverschiebungen. Ist dein Hero ein Video statt eines Bildes, gilt dasselbe Denken in Videohintergründe für Websites.

Eine Checkliste vor dem Veröffentlichen

1. 1

   Den Platz messen

   Finde die größte angezeigte Breite jedes Bildes in deinem Layout.

2. 2

   In den richtigen Größen exportieren

   Ein- bis zweimal die Platzbreite, plus kleinere Versionen für Handys.

3. 3

   Das Format wählen

   AVIF oder WebP für Fotos und Verläufe, SVG für Logos, PNG nur, wenn es gewinnt.

4. 4

   Mit dem Auge komprimieren

   Senk die Qualität, bis du eine Veränderung siehst, und heb sie dann eine Stufe an.

5. 5

   Auszeichnen

   srcset, sizes, width, height, alt und Lazy Loading unterhalb des sichtbaren Bereichs.

6. 6

   Testen

   Lass Lighthouse in einem Inkognito-Fenster laufen und prüf die Bild-Audits und das LCP-Element.

Vieles davon wird leichter, wenn das Bild von Anfang an in seiner finalen Größe entsteht. In Gradiently gestaltest du einmal, Pro bringt das Design in einem Schritt auf jede Größe und exportiert PNG, JPG oder SVG in exakten Maßen bis 4K, sodass Hero, Banner und Open-Graph-Bild jeweils in der Größe beginnen, die die Seite zeigt.