Image Optimization (deutsch: Bildoptimierung) umfasst alle Techniken und Prozesse, die darauf abzielen, Bilder für den Web-Einsatz zu optimieren -- hinsichtlich Dateisgroesse, Ladegeschwindigkeit, Darstellungsqualitaet und Zugaenglichkeit. Bilder machen typischerweise 40-60 % des Gesamtgewichts einer Website aus und sind damit der größte Hebel für die Page Speed.
Professionelle Bildoptimierung ist kein Nice-to-have, sondern direkt geschaeftsrelevant: Eine Sekunde laengere Ladezeit kostet im E-Commerce bis zu 7 % der Conversions. Google berücksichtigt die Core Web Vitals als Rankingfaktor, und der Largest Contentful Paint hängt oft direkt vom Hero-Bild ab.
Bildformate im Vergleich
| Format | Kompression | Transparenz | Animation | Browser-Support | Einsatz |
|---|---|---|---|---|---|
| JPEG | Verlustbehaftet | Nein | Nein | 100 % | Fotos |
| PNG | Verlustfrei | Ja | Nein | 100 % | Grafiken, Screenshots |
| WebP | Beides | Ja | Ja | 97 % | Universell empfohlen |
| AVIF | Verlustbehaftet | Ja | Ja | 92 % | Maximale Kompression |
| SVG | Vektoren | Ja | Ja | 100 % | Icons, Logos, Illustrationen |
WebP als Standard
WebP bietet 25-35 % kleinere Dateien als JPEG bei vergleichbarer Qualitaet und unterstützt Transparenz. Next.js generiert WebP automatisch über die next/image-Komponente, was den Einstieg erleichtert.
AVIF für maximale Effizienz
AVIF komprimiert nochmals 20-30 % besser als WebP, erfordert aber mehr Encoding-Zeit. Nutzen Sie AVIF als primaeres Format mit WebP als Fallback für Browser ohne AVIF-Support.
Techniken der Bildoptimierung
Responsive Images
Responsive Design erfordert responsive Bilder: Verschiedene Bildgroessen für verschiedene Viewport-Breiten. Das srcset-Attribut und das <picture>-Element liefern dem Browser die optimale Größe:
- Mobile (bis 735px): Maximal 750px breit
- Tablet (735-1068px): Maximal 1100px breit
- Desktop (ab 1068px): Maximal 1920px breit
Lazy Loading
Lazy Loading laedt Bilder erst, wenn sie in den sichtbaren Bereich scrollen. Das beschleunigt den initialen Seitenaufbau erheblich. In HTML genuegt das Attribut loading="lazy", Next.js setzt dies automatisch.
Ausnahme: Das LCP-Bild (typischerweise das Hero-Bild) darf nicht lazy geladen werden -- es benötigt priority bzw. fetchpriority="high".
Dimensionen und Skalierung
Laden Sie niemals ein 4000px-Bild, wenn es nur 800px breit dargestellt wird. Die Faustregel: Liefern Sie Bilder in der doppelten Darstellungsgroesse für Retina-Displays, nicht größer.
Komprimierung
Tools für die Bildkomprimierung:
| Tool | Typ | Staerke |
|---|---|---|
| Squoosh (Google) | Web-App | Visueller Vergleich, alle Formate |
| Sharp (Node.js) | Library | Automatisierung in Build-Pipelines |
| ImageOptim | Desktop-App (Mac) | Batch-Verarbeitung |
| TinyPNG | Web-API | PNG- und JPEG-Kompression |
SEO-Aspekte der Bildoptimierung
Alt-Texte
Jedes Bild braucht einen beschreibenden Alt-Text für Accessibility und Bild-SEO. Gute Alt-Texte beschreiben den Bildinhalt in 5-15 Woertern, ohne Keyword-Stuffing. Dekorative Bilder erhalten einen leeren Alt-Text (alt="").
Dateinamen
Verwenden Sie sprechende, keyword-relevante Dateinamen: [webdesign](/lexikon/webdesign)-bielefeld-hero.webp statt IMG_4532.jpg. Trennen Sie Woerter mit Bindestrichen.
Bildgroesse und CLS
Definieren Sie immer width und height im HTML, um Cumulative Layout Shift zu vermeiden. Der Browser reserviert den Platz, bevor das Bild geladen ist, und verhindert so Verschiebungen im Layout.
Bildoptimierung in Next.js
Die next/image-Komponente von Next.js automatisiert viele Optimierungen: automatische Format-Konvertierung (WebP/AVIF), responsive Bildgroessen, Lazy Loading und Platzhalter waehrend des Ladens. Nutzen Sie sie konsequent statt des nativen <img>-Tags.