Bildoptimierung für schnellere Websites: Der vollständige Leitfaden

Bilder machen fast die Hälfte des durchschnittlichen Seitengewichts aus. Ihre Optimierung ist der wirksamste einzelne Hebel für mehr Performance.

---

Warum das so wichtig ist

• 53 % der mobilen Nutzer verlassen eine Seite, wenn das Laden länger als 3 Sekunden dauert (Google)
• 1 Sekunde Verzögerung = 7 % weniger Conversions (Akamai)
• Core Web Vitals (LCP, CLS, INP) beeinflussen das Google-Ranking direkt

---

Schritt 1: Das richtige Format

---

Schritt 2: Komprimieren

Nutzen Sie TinyImg — browserbasiert, datenschutzkonform, sofort einsatzbereit.

---

Schritt 3: Responsive Bilder

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Beschreibender Alternativtext"
  width="800"
  height="600"
/>

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

---

Schritt 4: Lazy Loading

<img src="image.webp" alt="Beschreibung" loading="lazy" width="800" height="600" />

Lazy Loading niemals auf Bilder oberhalb des sichtbaren Bereichs anwenden. Breite und Höhe immer angeben, um CLS zu vermeiden.

---

Schritt 5: Bildabmessungen

<!-- Korrekt -->
<img src="photo.webp" alt="Foto" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Schritt 6: CDN

• Cloudflare (kostenloser Tarif)
• Cloudinary
• imgix
• Vercel (Next.js)

---

Schritt 7: Performance messen

Tools: PageSpeed Insights, Lighthouse, WebPageTest.

---

Checkliste

• Richtiges Format (WebP/PNG/SVG)
• Komprimierung mit TinyImg
• srcset + sizes
• Lazy Loading unterhalb des sichtbaren Bereichs
• width + height bei allen Bildern angeben
• CDN einsetzen
• PageSpeed-Audit durchführen

---

Fazit

Beginnen Sie mit der Komprimierung in TinyImg. Ihre Nutzer und Google werden es Ihnen danken.