Bildformate erklärt
Sechs Formate, jedes mit einer Aufgabe, die es besser erledigt als die anderen. Wenn du weißt, welches wofür da ist, hört die Wahl auf, eine Entscheidung zu sein.
JPG — Fotos, und sonst nichts
JPEG ist ein verlustbehaftetes Format für Halbtonbilder, was eine präzise Umschreibung für Fotos ist. Weiche Verläufe, Hauttöne und natürliche Texturen kommen hervorragend damit zurecht.
Transparenz kann es nicht, und harte Kanten sowie Text verwischt es deutlich. Ein Screenshot als JPEG sieht bei ähnlicher Dateigröße sichtbar schlechter aus als derselbe Screenshot als PNG.
Nimm es für: Fotos, besonders alles, was deine Seite verlässt. Nicht für: Logos, Screenshots, Text, alles mit Transparenz.
PNG — Grafiken, Transparenz, Präzision
PNG ist verlustfrei mit vollem Alphakanal. Jedes Pixel überlebt exakt, und genau das brauchst du für ein Logo, das sauber auf jedem Hintergrund sitzen muss.
Der Preis ist die Größe. Ein Foto als PNG ist regelmäßig fünf- bis zehnmal größer als ein gutes JPEG desselben Bildes, ohne sichtbaren Vorteil — es speichert getreulich Sensorrauschen, das niemand wahrnehmen kann.
Nimm es für: Logos, Icons, Screenshots, Diagramme, alles mit Transparenz oder harten Kanten. Nicht für: Fotos.
WebP — der vernünftige moderne Standard
WebP kann verlustbehaftet und verlustfrei, beherrscht Transparenz und Animation. Für Fotos ist es 25–35 % kleiner als JPEG, für Grafiken oft 50 % kleiner als PNG.
Kurz: bei fast allem besser als beide — und überall unterstützt, wo es zählt.
Nimm es für: praktisch alles auf deiner eigenen Website. Nicht für: Dateien, die zu einem Ziel gehen, das du nicht prüfen kannst.
AVIF, GIF und SVG
AVIF komprimiert nochmals besser als WebP — etwa halb so groß wie JPEG. Langsamer beim Kodieren und Dekodieren, und die Unterstützung ist breit, aber nicht universell. Lohnt sich bei großen Hero-Bildern, selten bei Vorschaubildern.
GIF ist für fast jeden Zweck überholt. 256 Farben und riesige Dateien. Animierte GIFs sollten kurze Videos sein (MP4 oder WebM) — drastisch kleiner und besser aussehend. Der einzige echte Grund für GIF ist eine Plattform, die nichts anderes akzeptiert.
SVG ist gar kein Pixelformat, sondern eine Zeichenanweisung. Es skaliert verlustfrei auf jede Größe und ist meist winzig. Für Logos, Icons und einfache Illustrationen schlägt es alles andere klar. Ein Foto kann es nicht darstellen.
Die Entscheidung, komprimiert
- Logo oder Icon aus Formen? → SVG
- Braucht Transparenz oder enthält Text? → WebP, oder PNG wenn das Ziel es verlangt
- Foto für die eigene Seite? → WebP
- Foto, das woanders hingeht? → JPG
- Animiert? → MP4 oder WebM, nicht GIF