Nachschlagewerk
Format-Guide
Ein knapper Überblick: wofür sich welches Format eignet — und wo die Stolperfallen liegen. Wer es lieber spielerisch mag, testet sein Wissen stattdessen in der Format Arena.
PNG
Verlustfrei und transparent — ideal für Screenshots, Icons und Logos mit wenigen Farben.
Gut für
- Screenshots & UI-Grafiken mit scharfem Text
- Logos und Icons mit transparentem Hintergrund
- Bilder, die später verlustfrei weiterbearbeitet werden sollen
Vorsicht bei
- Fotos: PNG ist verlustfrei und bei feinen Farbverläufen deutlich größer als JPEG, WebP oder AVIF
Quelle & mehr Details →
JPEG
Der Foto-Standard: gute Kompression, von praktisch jedem Gerät und Programm unterstützt.
Gut für
- Fotos und Bilder mit weichen Farbverläufen
- Social-Media- und E-Mail-Vorschaubilder, wo Kompatibilität zählt
Vorsicht bei
- Text und Screenshots: sichtbare Blockartefakte und Unschärfe an scharfen Kanten
- Wiederholtes Bearbeiten und erneutes Speichern verschlechtert die Qualität weiter (Generationsverlust)
- Keine Transparenz möglich
Quelle & mehr Details →
SVG
Vektorformat — bleibt bei jeder Größe gestochen scharf, vom Favicon bis zum Messeplakat.
Gut für
- Logos, Icons und Diagramme mit klaren Formen
- Alles, was bei jeder Bildschirmgröße gleich scharf bleiben muss
Vorsicht bei
- Fotorealistische Inhalte — dafür ist ein Rasterformat geeigneter
- Nutzer-hochgeladene SVGs direkt einzubetten: können eingebettetes JavaScript enthalten (XSS-Risiko) — serverseitig sanitisieren oder nur als <img> einbinden
Quelle & mehr Details →
WebP
Moderner Allrounder: ersetzt JPEG und PNG gleichermaßen, plus Transparenz und Animation.
Gut für
- Fotos und Grafiken, wenn kleinere Dateien als JPEG/PNG bei breiter Browserunterstützung gewünscht sind
- Transparente oder kurz animierte UI-Elemente
Vorsicht bei
- Vereinzelt ältere Tools/Systeme ohne WebP-Unterstützung — im Zweifel mit einem JPEG/PNG-Fallback über das <picture>-Element ausliefern
Quelle & mehr Details →
AVIF
Aktuell meist die kleinsten Dateien bei vergleichbarer Qualität — mit langsamer Kodierung als Kompromiss.
Gut für
- Statische, einmal gebaute Assets (Build-Zeit-Kompression), wo maximale Kompression zählt
Vorsicht bei
- Echtzeit-Verarbeitung vieler gleichzeitiger Uploads: Kodierung ist ca. 3× langsamer als WebP
- Etwas geringere Browser-Unterstützung als WebP — Fallback einplanen
GIF
Für Bewegtbild heute meist die falsche Wahl — dafür gibt es deutlich effizientere Alternativen.
Gut für
- Nur noch selten: sehr einfache Standbilder mit wenigen Farben, wo Kompatibilität mit uraltem Tooling zählt
Vorsicht bei
- Animation: auf 256 Farben pro Frame limitiert, dadurch für Bewegtbild extrem ineffizient komprimiert
- Ersetze animierte GIFs durch <video autoplay loop muted playsinline> (MP4/WebM) — ein web.dev-Benchmark zeigt, wie ein 3,7-MB-GIF so auf rund 341 KB schrumpft
- Für kurze, transparente UI-Loops ohne Video-Bedienelemente: animiertes WebP oder APNG statt GIF
Quelle & mehr Details →
Randnotizen
HEIC/HEIF ist das Standardformat vieler Smartphone-Kameras (z. B. iPhone), wird aber außerhalb des Apple-Ökosystems im Web kaum direkt unterstützt — für den Web-Einsatz meist zu JPEG/WebP/AVIF konvertieren.
ICO ist das klassische Favicon-Format; moderne Browser akzeptieren dafür inzwischen auch SVG und PNG.
