Welche Bildformate gibt es im Web?
Im Web begegnen uns täglich fünf Bildformate: JPG, PNG, WebP, GIF und SVG. Jedes hat seine eigene Geschichte, seine Stärken und klare Einsatzbereiche. Ein gutes Verständnis der Unterschiede hilft dir, schnellere Websites zu bauen und Speicherplatz zu sparen.
JPG — Der Allrounder für Fotos
JPG (JPEG) wurde 1992 standardisiert und ist nach über 30 Jahren noch immer das meistgenutzte Bildformat der Welt. Der Grund: Es komprimiert Fotos und natürliche Bilder extrem effizient durch verlustbehaftete Komprimierung.
- ✅ Kleine Dateigrößen bei Fotos
- ✅ Universal kompatibel (jedes Gerät, jede App)
- ✅ Breite Software-Unterstützung
- ❌ Keine Transparenz
- ❌ Qualitätsverlust bei jeder Neuspeicherung
- ❌ Artefakte bei zu starker Komprimierung
- Ideal für: Fotos, Produktbilder, Urlaubsbilder
PNG — Der Qualitätsspezialist
PNG (Portable Network Graphics) erschien 1996 als freier Nachfolger von GIF. Es verwendet verlustfreie Komprimierung und unterstützt volle Transparenz — ideal für Grafiken, Logos und Screenshots.
- ✅ Verlustfreie Qualität — kein Informationsverlust
- ✅ Volle Transparenz (Alpha-Kanal)
- ✅ Perfekt für Screenshots, Logos, Diagramme
- ❌ Große Dateien bei Fotos
- ❌ Keine Animation
- Ideal für: Logos, Icons, Screenshots, Grafiken
WebP — Der moderne Standard
WebP wurde 2010 von Google entwickelt und vereint die Vorteile von JPG und PNG: verlustbehaftete und verlustfreie Komprimierung, volle Transparenz, Animation — bei kleineren Dateien als beide Vorgänger.
- ✅ 25–35% kleiner als JPG bei gleicher Qualität
- ✅ Bis zu 50% kleiner als PNG
- ✅ Transparenz wie PNG
- ✅ Animation wie GIF (nur kleiner)
- ✅ Von allen modernen Browsern unterstützt
- ❌ Nicht von alten E-Mail-Clients unterstützt
- Ideal für: Alles auf modernen Webseiten
GIF — Die Animations-Legende
GIF (Graphics Interchange Format) stammt aus dem Jahr 1987 und ist damit das älteste noch aktiv genutzte Web-Bildformat. Bekannt geworden durch animierte Bilder im Internet, ist GIF technisch gesehen extrem ineffizient.
- ✅ Universelle Unterstützung (überall, auch E-Mail)
- ✅ Animation
- ❌ Nur 256 Farben — für Fotos ungeeignet
- ❌ Riesige Dateien im Vergleich zu WebP für Animationen
- ❌ Binäre Transparenz (kein Alpha-Kanal)
- Ideal für: Memes, Social-Media-Clips (wo WebP nicht möglich)
SVG — Vektorgrafiken im Web
SVG (Scalable Vector Graphics) ist seit 2001 ein W3C-Standard und das einzige gängige Vektorformat im Web. Statt Pixel beschreibt SVG geometrische Formen als XML — perfekt skalierbar ohne Qualitätsverlust.
- ✅ Verlustfrei skalierbar (retina-perfekt)
- ✅ Meist sehr kleine Dateien für Icons/Logos
- ✅ Animierbar via CSS und JavaScript
- ✅ Direkt im HTML einbettbar
- ❌ Ungeeignet für Fotos (wird riesig)
- ❌ Kann Sicherheitsrisiken bergen wenn aus externen Quellen
- Ideal für: Logos, Icons, Illustrationen, Diagramme
Der Große Überblick
| Format | Komprimierung | Transparenz | Animation | Beste Verwendung |
|---|---|---|---|---|
| JPG | Verlustbehaftet | ❌ | ❌ | Fotos |
| PNG | Verlustfrei | ✅ Alpha | ❌ | Grafiken, Logos |
| WebP | Beides | ✅ Alpha | ✅ | Alles im Web |
| GIF | Verlustfrei (LZW) | ✅ Binär | ✅ | Memes, Animationen |
| SVG | Text-Komprimierung | ✅ | ✅ via CSS/JS | Icons, Vektoren |
AVIF — Das Nächste?
AVIF (AV1 Image File Format) ist der neueste Standard und noch kleiner als WebP — typischerweise nochmals 20–30% Ersparnis. Die Browser-Unterstützung ist bereits gut (Chrome, Firefox, Safari), aber die Kodierung ist langsam. AVIF wird WebP mittelfristig ablösen, ist aber noch kein Standard.
Fazit: Welches Format soll ich verwenden?
Einfache Entscheidungshilfe für 2024:
- Foto für Website → WebP (JPG als Fallback)
- Logo / Icon → SVG (wenn Vektor verfügbar) oder WebP
- Screenshot mit Text → PNG oder WebP verlustfrei
- Animation → WebP animated oder kurzes MP4-Video
- E-Mail → JPG oder PNG (maximale Kompatibilität)