Formate sinnvoll

Das richtige Format spart Gewicht und erhält Qualität.

Das Thema dieser Seite: Bildformate müssen zum Inhalt passen, damit Ladezeit und Schärfe stimmen.

Inhalt

Inhaltsverzeichnis

Klicke auf einen Abschnitt, um direkt dorthin zu springen.

Check
Kontext & Problemraum
Entscheidungslogik
Erklärende Details
Risiken, Grenzen & Einschränkungen

Check

Der Check prüft, ob moderne und passende Bildformate verwendet werden. Er bewertet das Verhältnis zwischen Legacy-Formaten (JPG/PNG) und modernen Formaten wie WebP oder AVIF.

Prüfpunkt	Bedeutung	Bewertung
Moderne Formate für Fotos	Weniger Gewicht bei gleicher Qualität	OK
Mix aus PNG/JPG ohne Alternativen	Potenzial für Optimierung	Warnung
Falsches Format für Inhalt	Unnötig große Dateien	Kritisch

Kontext & Problemraum

Die Auswahl des Formats entscheidet, ob Bilder schnell laden, trotzdem scharf bleiben und auf mobilen Geräten nicht zu viel Bandbreite verbrauchen.

Situation	Symptom	Risiko
Produktbilder nur als PNG	Große Dateigröße	Längere Ladezeiten und hohe Absprünge
Icons als JPG	Unscharfe Kanten	Schlechte UI-Qualität
Keine WebP/AVIF Varianten	Wenig Optimierungsspielraum	Schlechte Core Web Vitals

Entscheidungslogik

Welche Formate wann sinnvoll sind.

Wenn	Dann	Empfehlung
Foto oder Produktbild	Hohe Dateigröße	WebP/AVIF mit Fallback anbieten
Illustration mit Transparenz	PNG notwendig	PNG behalten, aber optimieren
Icons oder Logos	Skalierbarkeit wichtig	SVG verwenden
Browser-Kompatibilität wichtig	Legacy Support	Fallbacks im `<picture>` nutzen

Erklärende Details

Moderne Formate liefern bei gleicher visueller Qualität deutlich kleinere Dateien. Der richtige Mix ist entscheidend.

Beispiel: Modernes Format mit Fallback

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

Risiken, Grenzen & Einschränkungen

Risiko	Folge	Gegenmaßnahme
Nur AVIF ohne Fallback	Alte Browser zeigen keine Bilder	Fallback via `<picture>` bereitstellen
PNG für Fotos	Hoher Speicherbedarf	WebP/AVIF nutzen
JPG für Grafiken mit Transparenz	Artefakte oder falscher Hintergrund	PNG oder SVG verwenden