Cookie-Einstellungen
Wir verwenden Cookies für Analysen. Datenschutzerklärung Du kannst nicht notwendiges Tracking akzeptieren oder ablehnen.
Praxisleitfaden zu „Bildkomprimierungspipeline: JPEG zu WebP und AVIF“: zentrale Schritte, typische Fehler und Umsetzung mit Bildkompressor.
Gehen Sie zu Werkzeug
Komprimieren Sie Bilder bei Bedarf mit Browser-Steuerelementen und einer Serververarbeitung in der Warteschlange.
Moderne Bildformate reduzieren die Dateigröße dramatisch, ohne sichtbare Qualitätseinbußen. Eine gut konfigurierte Kompressions-Pipeline kann die Bildlast um 50-70% reduzieren, was direkt die Ladezeiten von Seiten und Core Web Vitals verbessert.
| Format | Typische Einsparungen vs. JPEG | Browser-Unterstützung | Am besten für |
|---|---|---|---|
| **JPEG** (Qualität 80) | Basislinie | 100% | Universeller Fallback |
| **WebP** (Qualität 80) | 25-35% kleiner | 97%+ | Primärformat für die meisten Websites |
| **AVIF** (Qualität 65) | 50% kleiner als JPEG | 92%+ | Maximale Kompression, neueren Browsern |
Reales Beispiel: Ein 400KB-JPEG-Hero-Bild wird zu ~280KB in WebP und ~200KB in AVIF -- ohne sichtbaren Unterschied bei normaler Betrachtungsdistanz.
Schritt 1: Zuerst skalieren.
Nie ein 4000px-Bild komprimieren, wenn es bei 800px angezeigt wird. Skalieren Sie auf die maximale Breite, bei der es angezeigt wird. Für einen Blog-Beitrag mit einer maximalen Inhaltsbreite von 800px skalieren Sie auf 1600px (2x für Retina).
Schritt 2: Zu WebP komprimieren.
Qualität 80 ist der Sweet Spot für die meisten Fotos. Qualität 75 spart mehr, kann aber Artefakte auf Farbverläufen anzeigen. Qualität 85+ hat abnehmende Erträge bei der Einsparung.
Verwenden Sie Bildkompressor, um in einem Schritt zu konvertieren und zu komprimieren.
Schritt 3: Optional AVIF generieren.
AVIF bei Qualität 65 entspricht visuell WebP bei Qualität 80, aber bei einer deutlich kleineren Dateigröße. Die AVIF-Kodierung ist langsamer, daher eignet sie sich am besten für statische Assets, die Sie zur Build-Zeit generieren, nicht für On-the-Fly-Transformationen.
Schritt 4: Mit `<picture>`-Fallback servieren.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Produkt-Hero-Aufnahme" width="1600" height="900" />
</picture>Der Browser wählt das erste Format, das er unterstützt: AVIF > WebP > JPEG. Jeder Benutzer erhält das beste Format, das sein Browser unterstützt.
| Anwendungsfall | JPEG | WebP | AVIF |
|---|---|---|---|
| Fotos, Hero-Bilder | 80-85 | 78-82 | 60-68 |
| Produktaufnahmen (Details sind wichtig) | 85-90 | 82-88 | 68-75 |
| Miniaturansichten, Vorschauen | 70-75 | 70-75 | 55-60 |
| Screenshots, textlastige Bilder | PNG verwenden | Verlustfreies WebP | Verlustfreies AVIF |
Für Core Web Vitals zielen Sie auf diese Höchstwerte ab:
Komprimieren Sie Ihre Bilder jetzt mit Bildkompressor. Für die vollständige SEO-Checkliste siehe Bild-SEO-Checkliste für Core Web Vitals.
Dieser Artikel wird von der Tools Hub Redaktion auf fachliche Genauigkeit, praktische Relevanz und Konsistenz mit aktuellen Produkt-Workflows geprüft.
Zuletzt geprüft:
Praxisleitfaden zu „Bild-SEO-Checkliste für Core Web Vitals“: zentrale Schritte, typische Fehler und Umsetzung mit Bildkompressor.
SQL-Optimierer AI analysiert langsame Abfragen und liefert Optimierungsvorschläge, Ausführungsplan-Analyse und Index-Empfehlungen.
Blog-Gliederung AI erstellt SEO-optimierte Artikelstrukturen, Thought-Leadership-Rahmen und Schritt-für-Schritt-Anleitungen.
Verwenden Sie den PNG-zu-AVIF-Konverter, um die Bildnutzlast für UI-, Produkt- und Inhaltsressourcen zu reduzieren und gleichzeitig einen wiederholbaren Batch-Workflow in der Warteschlange beizubehalten.