Die 5 Bildformate im Überblick
Zwei Kategorien, fünf Formate
Bevor es ans Format geht, eine Grundunterscheidung: Pixelgrafik oder Vektorgrafik? Pixelgrafiken (Raster) bestehen aus festen Bildpunkten – jedes Foto ist eine Pixelgrafik. Vektorgrafiken beschreiben Formen mit Linien und Kurven – jedes Logo, jedes Icon, jede klare Illustration ist als Vektor sinnvoll.
Diese Unterscheidung entscheidet schon die Hälfte der Formatfrage: Vektor → SVG. Pixel → WebP / AVIF / JPG.
Die Formate im direkten Vergleich
Vier Vergleichspaare, die in der Praxis am häufigsten anstehen:
WebP ist heute der bessere JPG-Ersatz
Bei vergleichbarer Bildqualität wiegt WebP 25–35 % weniger als JPG. Ein 1920×1080-Hero-Bild in JPG kommt schnell auf 350 KB, dasselbe in WebP auf 220 KB – ohne sichtbaren Qualitätsverlust. Bei 30 Bildern auf einer Seite sind das fast 4 MB Ersparnis.
WebP unterstützt zusätzlich Transparenz wie PNG und Animationen wie GIF – beides bei kleinerer Dateigröße. Browserunterstützung: Chrome, Firefox, Safari, Edge, alle mobilen Browser. JPG braucht es nur noch als Fallback für sehr alte Systeme oder Drittplattformen.
AVIF ist nochmal effizienter – aber mit Hürden
AVIF (auf Basis des AV1-Video-Codecs) liefert nochmal 20–30 % kleinere Dateien als WebP. Das macht im Vergleich zu JPG insgesamt rund 50 % Ersparnis. Für Hero-Bilder, große Galerien oder E-Commerce-Produktfotos kann das den Unterschied bei Core Web Vitals ausmachen.
Hürden: AVIF-Encoding ist deutlich langsamer als WebP, Photoshop braucht Plugins, viele CMS-Systeme können noch nicht damit umgehen. Bei Next.js übernimmt next/image die Konvertierung automatisch. Für kleine bis mittlere Websites reicht WebP – der Mehraufwand für AVIF rechnet sich oft nicht.
SVG schlägt PNG bei allem, was Vektor sein kann
Ein Icon als PNG: 5–10 KB, fest in Größe, Farbwechsel nur durch neue Datei. Dasselbe Icon als SVG: 1–2 KB, beliebig skalierbar, per CSS einfärbbar und animierbar. Bei Retina-Displays werden PNGs zusätzlich in doppelter Größe gebraucht – SVG bleibt scharf, immer.
PNG hat heute nur noch dann eine Berechtigung, wenn das System es zwingend braucht (manche älteren CMS, ältere E-Mail-Clients, bestimmte Druck-Workflows). Für die Website ist SVG bei jeder Vektorgrafik die richtige Wahl.
Was Browser heute unterstützen
WebP: 100 % aller modernen Browser inklusive Safari ab 2020. Kann ohne Fallback eingesetzt werden. AVIF: Chrome, Firefox, Safari (ab 16) – Stand 2026 etwa 95 % Abdeckung. SVG: seit Jahren überall.
Wer sicher gehen will, nutzt das picture-Element mit Fallback: AVIF zuerst, WebP als Mittelweg, JPG als Notnagel. Bei Next.js erledigt next/image diese Cascade automatisch beim Build.
Entscheidungshilfe für die Praxis
Schneller Spickzettel: Welches Format für welchen Anwendungsfall – und warum.
- Logo, Icon, IllustrationSVGVektor, verlustfrei skalierbar, winzig
- Foto, Hero-Bild, ProduktbildWebPBeste Mischung aus Qualität, Größe und Browser-Support
- Großes Foto, Galerie, hohe PerformanceAVIFMaximal komprimiert – wenn Setup es unterstützt
- Bild mit TransparenzWebP / SVGWebP für Fotos mit Alpha, SVG für Vektorgrafiken
- Animation (Vektor)SVG + CSSKlein, scharf, per Code steuerbar
- Animation (Pixel)WebP / MP4Statt GIF: kleiner, schärfer
- FaviconSVG + ICOSVG modern, ICO als Fallback für alte Browser
- Open-Graph-Bild (Social)JPG / PNGPlattformen unterstützen WebP oft noch nicht
Worauf du sonst noch achten solltest
Bildgröße: nie größer als nötig
Das beste Format hilft nichts, wenn das Bild 5000 px breit hochgeladen wird, aber nur 800 px angezeigt. Bilder vor dem Hochladen auf die maximale Anzeigegröße verkleinern. Für Retina-Displays optional die doppelte Größe als zweite Variante über srcset mitgeben.
Lazy Loading
Bilder unterhalb des Faltbereichs sollten erst geladen werden, wenn sie in den sichtbaren Bereich kommen. Modernes HTML kann das nativ über das loading-Attribut. In Next.js übernimmt die Image-Komponente das automatisch.
Alt-Texte nicht vergessen
Für SEO und Barrierefreiheit braucht jedes inhaltlich relevante Bild einen aussagekräftigen Alt-Text – auf Deutsch, beschreibend, nicht keyword-überladen. Dekorative Bilder bekommen einen leeren Alt-Text. Mehr dazu im Beitrag Bilder für Websites.
Caching und CDN
Bilder sollten lange im Browser-Cache bleiben (1 Jahr ist typisch). Wer viele Besucher aus verschiedenen Regionen hat, profitiert von einem CDN, das Bilder geografisch näher ausliefert – Cloudflare, Bunny oder Vercel übernehmen das automatisch.
Was du dadurch gewinnst
Ein konsequent durchdachter Bilder-Workflow bringt schnelle, messbare Ergebnisse: 30–50 % kleinere Bilddaten, deutlich bessere Largest Contentful Paint (LCP), weniger Cumulative Layout Shift (CLS) und ein professioneller, scharfer Eindruck auf allen Geräten. Mehr zu den technischen Hintergründen findest du im Beitrag Pagespeed & Core Web Vitals verständlich erklärt.
