Du kennst das: Du willst „mal eben“ ein Bild in deinen Beitrag packen – und plötzlich fühlst du dich, als würdest du auf unserem Plesk-Server in Essen eine Rakete starten. Welches Format? Welche Endung? Und warum sieht das Logo im Header aus wie ein Pixel-Puzzle? Genau darum geht’s heute: Welche Bildformate Web-Standards sind, welche praktisch im Museum stehen – und wie du blitzschnell zur richtigen Dateiendung kommst. (Mit einem kleinen Wortwitz hier und da. Versprochen.)

Die Platzhirsche 2025

JPEG / JPG (.jpg/.jpeg)

Der Oldie für Fotos. Verlustbehaftet, klein genug für schnelle Ladezeiten, gut für große Hintergründe, Hero-Bilder, Teamfotos und Co. Wenn’s präzise Kanten, Transparenzen oder Text ist, lieber nicht. Für bessere Kompression gibt’s inzwischen modernere Alternativen.

PNG (.png)

Der präzise Pixel-Perfektionist. Verlustfrei, mit Alpha-Transparenz. Ideal für Screenshots, UI-Elemente, Overlays, Grafiken mit Text und alles, was 1:1 knackscharf bleiben muss. Nachteil: Größer als JPEG/WebP/AVIF. Empfehlung: Nur dort nutzen, wo die verlustfreie Qualität wirklich zählt.

GIF (.gif)

8-Bit, 256 Farben – Nostalgie pur. Für Mini-Animationen geht’s, aber bitte sparsam. Für Animationen lieber APNG, animiertes WebP oder gleich Video (MP4/WebM) nutzen.

WebP (.webp)

Der Allrounder mit Transparenz und Animation. Sehr breite Browser-Unterstützung und meist deutlich kleiner als PNG/JPEG. Gute Wahl für Fotos, Produktbilder, Grafiken. WebP ist 2025 Standard-Material für schnelle Seiten.

AVIF (.avif)

Der Effizienz-Champion: Noch bessere Kompression als WebP/JPEG, unterstützt Transparenz, Animation, hohe Farbtiefen. Unterstützung ist inzwischen sehr breit. Wenn’s um Performance geht: erst AVIF, dann Fallback.

SVG (.svg)

Vektor, nicht Raster. Perfekt für Logos, Icons, Illustrationen – skaliert immer scharf, winzige Dateigrößen, Style-/Farbänderungen per CSS. Für Fotos ungeeignet. Achtung: SVGs in WordPress sauber sanitisieren (Sicherheit).

APNG (.apng)

Quasi „GIF in modern“. 24-Bit Farben + Alpha, heute breit unterstützt. Für kleine, hochwertige UI-Animationen super – für längere Clips trotzdem lieber Video.

Favicons: .ico, .png, .svg

Klassisch funktioniert .ico überall. .svg als Favicon ist in vielen Browsern super – aber Safari unterstützt es noch nicht stabil. Für maximale Kompatibilität: ICO oder PNG einsetzen; SVG als Bonus.

Noch mehr Bildformate

Formate, die raus sind

• JPEG 2000 (.jp2): Einst Safari-Spezialität – inzwischen entfernt.
• JPEG XR (.jxr): Microsoft-Welt, heute irrelevant.
• TIFF (.tif/.tiff): Archiv/Druck ja, Web nein.
• BMP (.bmp): Unkomprimierter Pixel-Backstein.
• BPG / FLIF / PIK: Technisch spannend, praktisch keine Browser-Unterstützung.

Formate, die kommen

Noch nicht durch:

• JPEG XL (.jxl): Kompressions-Top, nette Features. Safari unterstützt es, Chrome nicht. Noch kein Standard.
• HEIF/HEIC (.heic): iPhone-Fotos lieben es, das Web eher nicht. Besser in AVIF/WebP/JPEG konvertieren.

WordPress-Realität (Stand 2025)

WebP ist nativ seit WordPress 5.8 drin – hochladen, fertig. AVIF ist seit WordPress 6.5 in Core unterstützt – super für neue Projekte. Tipp: Nutze das <picture>-Element: erst AVIF, dann WebP, dann JPEG/PNG. So bekommen moderne Browser die kleinsten Dateien, Altbrowser eine kompatible Version.

Auswahlhilfe • Welche Dateiendung nehme ich jetzt?

1. Motiv? Logo/Icon → SVG. Foto → weiter
   Screenshot/Textgrafik → PNG.
2. Transparenz? Ja → AVIF, WebP, PNG.
   Nein → weiter.
3. Performance? Ja → AVIF + WebP/JPEG als Fallback.
   Mindestens WebP statt JPEG nutzen.
4. Animation? Klein → APNG/animiertes WebP.
   Groß → Video.
5. Favicon? ICO/PNG
   zusätzlich SVG, wenn möglich.

Welches Format wofür?

• Logo/Icon/Piktogramm → SVG
  Falls nicht möglich: PNG
• Foto (Blog, Team, Produkt, Hero-Bild) → AVIF + WebP
  optional JPEG als Fallback
• Screenshot/UI mit feinem Text → PNG
• Transparenzen → AVIF/WebP, PNG
  wenn absolut verlustfrei nötig.
• Kurze Mini-Animation → APNG oder animiertes WebP
  Längere Animationen → Video
• Favicon → ICO oder PNG
  optional zusätzlich SVG
• Druck/Archiv → TIFF/RAW
  aber nicht im Web ausspielen.

Best Practices

• Responsive Images nutzen (srcset, <picture>).
• AVIF/WebP priorisieren, PNG/JPEG nur als Fallback.
• Animationen so oft wie möglich als Video.
• Bilder konvertieren & komprimieren.
• SVGs sanitizen (Sicherheit).

Mini-Cheat-Sheet

• Logo/Icon → .svg (oder .png)
• Foto → .avif, Fallback .webp, Fallback .jpg
• Screenshot/UI → .png
• Kurze Animation → .apng/.webp; längere → .mp4/.webm
• Favicon → .ico/.png (+ .svg)
• Nicht mehr nehmen → .jp2, .jxr, .bmp
• Noch beobachten → .jxl, .heic

Geschichte der modernen Bildformate

Die Geschichte digitaler Bilder und Bildformate beginnt nicht im Browser, sondern im Labor: 1957 scannte Russell Kirsch mit einem Trommelscanner das berühmte Foto seines Sohns – 176 × 176 Pixel, der Urknall der Bildverarbeitung.

In den 1980ern folgten pragmatische Pioniere für Unix & Mail: XBM (als C-Quelltext!) und die Netpbm-Familie PBM/PGM/PPM, bewusst simpel und teils als ASCII entworfen, damit Bilder die Tücken früher E-Mail-Systeme überlebten. XBM war sogar das erste im Web unterstützte Format – heute aber längst Geschichte.

Auf dem PC wurden PCX (1985) und BMP/DIB populär: PCX nutzte RLE (Run-Length-Encoding), BMP konnte unkomprimiert sein oder RLE-Varianten (RLE4/RLE8) einsetzen – ideal, wenn viele gleiche Pixel hintereinander stehen (klassische „Teppich-Muster“-Kompression).

Für Scanner, Satz & Druck formte Aldus 1986 TIFF – ein flexibler Container, der wahlweise PackBits (RLE), LZW oder CCITT G3/G4 (Fax) kann; perfekt für Dokumente und Archivierung.

1987 landete GIF im Netz: 8-Bit-Palette (max. 256 Farben), verlustfreie LZW-Kompression und später auch Animation – ein Hit der Modem-Ära, samt LZW-Patentdebatte, die Jahre später das Bedürfnis nach einem patentfreien Ersatz befeuerte.

Genau der kam Mitte der 1990er: PNG – verlustfrei dank DEFLATE (LZ77 + Huffman) plus clevere Filter je Scanline und optionaler Adam7-Interlacing, sodass Bilder bei schlechtem Netz schrittweise „scharfziehen“. PNG war explizit als patentfreier GIF-Ersatz gedacht.

Für Fotos setzte sich parallel JPEG (1992) durch: Das Verfahren teilt das Bild in 8×8-Blöcke, verwandelt Pixel mit der DCT in Frequenzen, quantisiert (wirft kaum sichtbare Feinheiten weg), kodiert dann effizient – oft mit Chroma-Subsampling. Variante: Progressive JPEG rendert erst grob, dann fein. Ergebnis: kleine Dateien bei akzeptablem Qualitätsverlust – und damit das Fotogrundrauschen des Webs.

Später kamen Formate, die besser komprimieren sollten: JPEG 2000 mit Wavelets (technisch stark, im Browser aber Nische), sowie die heutigen Web-Stars WebP und AVIF. WebP (Google, 2010) basiert auf VP8-Intra, kann lossy, lossless, Transparenz und Animation – ein echter Allrounder. AVIF nutzt AV1-Intra und liefert meist noch kleinere Dateien bei gleicher Qualität, inklusive HDR/Alpha/Animation.

Komprimierung „in etwa“? Verlustfrei (RLE, LZW, DEFLATE) sucht und beschreibt Wiederholungen bzw. Muster in Bytes, ohne Bildinformation zu opfern – großartig für Logos, UI-Grafiken, Text. Verlustbehaftet (JPEG/WebP/AVIF) verwandelt Pixel erst in eine „bessere Sprache“ (Frequenzen/Prädiktion), quantisiert dann und schmeißt Details weg, die unser Auge kaum bemerkt; Subsampling reduziert zusätzlich Farbauflösung. Beim Dekomprimieren wird das Bild aus diesen kompakten Beschreibungen rekonstruiert – voilà, schnelle Seiten und zufriedene Core Web Vitals.

Fazit

Wenn du schnell und sauber willst, ist die Devise heute: SVG für alles, was Vektor sein kann, AVIF für Bilder (mit WebP/JPEG als Fallback), APNG/Video für Bewegtbild – und die Pixel-Dinos dürfen in Ruhe in den Ruhestand. So bleiben Blog & Website knackig, und unser Server in Essen hat genug Luft, um noch die nächste Überraschungskampagne souverän zu tragen.