Image Optimization (deutsch: Bildoptimierung) umfasst alle Techniken und Prozesse, die darauf abzielen, Bilder fuer 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 groesste Hebel fuer 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 beruecksichtigt die Core Web Vitals als Rankingfaktor, und der Largest Contentful Paint haengt 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 unterstuetzt Transparenz. Next.js generiert WebP automatisch ueber die next/image-Komponente, was den Einstieg erleichtert.
AVIF fuer 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 fuer Browser ohne AVIF-Support.
Techniken der Bildoptimierung
Responsive Images
Responsive Design erfordert responsive Bilder: Verschiedene Bildgroessen fuer verschiedene Viewport-Breiten. Das srcset-Attribut und das <picture>-Element liefern dem Browser die optimale Groesse:
- 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 benoetigt 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 fuer Retina-Displays, nicht groesser.
Komprimierung
Tools fuer 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 fuer 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-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.