Bilder für Web optimieren: Der komplette Guide

Warum Bildoptimierung wichtig ist

Bilder machen durchschnittlich 50% der Seitengröße aus. Optimierte Bilder bedeuten:

• Schnellere Ladezeiten
• Bessere Core Web Vitals
• Niedrigere Hosting-Kosten
• Bessere User Experience

Bildformate im Vergleich

[Tabelle - siehe unten]

WebP: Das beste Format 2025

WebP bietet das beste Verhältnis aus Qualität und Dateigröße:

• 30% kleiner als JPEG bei gleicher Qualität
• Unterstützt Transparenz (wie PNG)
• Unterstützt Animation (wie GIF)
• 97% Browser-Unterstützung

Optimierungs-Checkliste

✅ **Richtige Größe**

• Nicht größer als nötig (max. 1920px Breite)
• Responsive Images mit srcset

✅ **Format wählen**

• Fotos: WebP (Fallback JPEG)
• Grafiken mit Transparenz: WebP oder PNG
• Icons/Logos: SVG

✅ **Kompression**

• Qualität 80-85% für Fotos
• Tools: Squoosh, TinyPNG, ImageOptim

✅ **Lazy Loading**

• Bilder below-the-fold lazy laden
• Native: loading="lazy"
• Above-the-fold: loading="eager"

✅ **Dimensionen angeben**

• Immer width und height
• Verhindert Layout Shifts (CLS)

Tools für Bildoptimierung

Online (kostenlos):

• Squoosh.app (Google)
• TinyPNG
• Compressor.io

Desktop:

• ImageOptim (Mac)
• FileOptimizer (Windows)
• GIMP

Automatisiert:

• Next.js Image Component
• Cloudinary
• Imgix

Next.js Image Best Practice

import Image from 'next/image' <Image src="/hero.jpg" alt="Beschreibender Alt-Text" width={1200} height={630} priority // für above-the-fold quality={85} />

Fazit

Bildoptimierung ist einer der einfachsten Wege, Ihre Website schneller zu machen. Nutzen Sie WebP, komprimieren Sie richtig und implementieren Sie Lazy Loading – Ihre Nutzer und Google werden es Ihnen danken.