EMZETT.
Login

Emzett Wiki

Bilder im Web optimieren: Formate, Responsive und Lazy Loading

Properties1
tagsglossar, web, performance

2 Min. Lesezeit

Bilder im Web optimieren: Formate, Responsive und Lazy Loading

Kurz: Bilder sind meist der größte Teil einer Webseite; moderne Formate (WebP, AVIF), passende Größen (srcset), Lazy Loading und feste Maße beschleunigen Ladezeit und verhindern Layout-Sprünge.

Genauer: Ein 4-MB-Foto in einer 300-Pixel-Karte ist Verschwendung. Bildoptimierung verbessert LCP (größtes sichtbares Element), spart Datenvolumen und ist gut für SEO und Umwelt.

Im Detail

Das richtige Format

  • JPEG: Fotos, überall unterstützt.
  • PNG: Grafiken mit Transparenz, scharfe Kanten (groß bei Fotos).
  • WebP: ca. 25 bis 35 % kleiner, Transparenz, Animation.
  • AVIF: oft noch kleiner (HDR), langsamer zu erzeugen.
  • SVG: Logos, Icons, Diagramme (Vektor, skalierbar, per CSS stylbar; Skripte aus unbekannten SVGs vermeiden).
  • GIF: für Animationen besser MP4/WebM oder animiertes WebP. Qualität 70 bis 85 reicht meist; Metadaten (EXIF/GPS) entfernen (Datenschutz).

Responsive Bilder

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="533" alt="Beschreibung" loading="lazy" decoding="async">
 
<picture>
  <source type="image/avif" srcset="foto.avif">
  <source type="image/webp" srcset="foto.webp">
  <img src="foto.jpg" alt="Beschreibung" width="800" height="533">
</picture>

srcset/sizes lassen den Browser passend zur Bildschirmbreite und Pixeldichte wählen; <picture> liefert Formate und Art Direction (anderer Zuschnitt am Handy).

Lazy Loading und Layout

  • loading="lazy" lädt Bilder erst beim Heranscrollen; das wichtigste Bild oben (LCP) nicht lazy, sondern fetchpriority="high"/Preload.
  • width und height (oder aspect-ratio) angeben, damit kein Layout-Sprung (CLS) entsteht.
  • alt-Texte für Zugänglichkeit; dekorative Bilder alt="".
  • Platzhalter (Blur-Hash/dominante Farbe) für Eindruck von Tempo.
  • Hintergrundbilder in CSS: image-set(); iframes/Videos ebenfalls lazy.

Werkzeuge und Auslieferung

  • Next.js next/image, Astro, Nuxt Image: erzeugen Größen/Formate automatisch, mit Cache.
  • Sharp, Squoosh, cwebp, avifenc, ImageMagick im Build/Skript.
  • Bild-CDNs (Cloudinary, imgix, Vercel Image Optimization): Größe/Format per URL.
  • Caching: lange Cache-Control mit Hash im Dateinamen; CDN nutzen.
  • Prüfen: Lighthouse, WebPageTest, DevTools-Netzwerk (Größe vs. Anzeigegröße).
  • Rechte: Bildrechte/Lizenz beachten, Personen-Fotos nur mit Erlaubnis. Wiki-/Seiten-Bilder: Komprimieren vor dem Hochladen.

Siehe auch: WebP, Lighthouse und Core Web Vitals, CDN

Backlinks