Vollständiger Leitfaden zu Bildformaten — Wann PNG, WebP, AVIF oder JPEG sinnvoll ist

Warum die Wahl des Bildformats wichtig ist

Eine der einfachsten Möglichkeiten, die Website-Performance zu verbessern, ist die Bildoptimierung. Google PageSpeed Insights weist häufig mit der Empfehlung "Bilder in modernen Formaten bereitstellen" darauf hin — und das aus gutem Grund. Die Wahl des Bildformats wirkt sich direkt auf Ladezeiten, Core Web Vitals und letztlich auf Suchrankings aus.

Grundlegender Vergleich: Die vier wichtigsten Formate

JPEG (Joint Photographic Experts Group)

Veröffentlicht: 1992 | Komprimierung: Verlustbehaftet | Transparenz: Nein

Das älteste und universellste Format. JPEG eignet sich besonders für Fotos und komplexe Farbbilder. Kleine Dateigrößen erreicht es durch verlustbehaftete Komprimierung, bei der feine Details verworfen werden, die das Auge wahrscheinlich nicht bemerkt. Der Nachteil: Bei sinkender Qualität treten Komprimierungsartefakte auf, und JPEG unterstützt keine Transparenz.

JPEG verwenden für: Standardfotos, Social-Media-Bilder, Situationen, in denen universelle Kompatibilität erforderlich ist

PNG (Portable Network Graphics)

Veröffentlicht: 1996 | Komprimierung: Verlustfrei | Transparenz: Ja

Die verlustfreie Komprimierung von PNG bewahrt jeden Pixel — ideal für Bilder, die scharfe Kanten, Text oder Transparenz benötigen. Der Preis dafür sind größere Dateien. Ein als PNG gespeichertes JPEG-Foto ist typischerweise 2–3× größer.

PNG verwenden für: Logos, UI-Screenshots, Bilder mit Text, Grafiken mit transparentem Hintergrund

WebP

Veröffentlicht: 2010 (Google) | Komprimierung: Verlustbehaftet + verlustfrei | Transparenz: Ja

WebP wurde entwickelt, um sowohl JPEG als auch PNG zu ersetzen. Bei vergleichbarer visueller Qualität erreicht es 25–35% kleinere Dateien als JPEG und unterstützt Transparenz — damit verbindet es die Stärken beider Formate. Animationsunterstützung ist ebenfalls enthalten.

Browserunterstützung: Weltweit 96%+ im Jahr 2025.

WebP verwenden für: Fast alles auf modernen Websites — Fotos, Grafiken, Bilder mit Transparenz

AVIF (AV1 Image File Format)

Veröffentlicht: 2019 | Komprimierung: Verlustbehaftet + verlustfrei | Transparenz: Ja

AVIF treibt die Komprimierung weiter als WebP und erreicht typischerweise 50% kleinere Dateien als JPEG bei vergleichbarer Qualität. Außerdem verarbeitet es HDR-Inhalte (High Dynamic Range) besser als jedes andere Format. Der Nachteil sind langsamere Kodierung und etwas geringere Browserkompatibilität.

Browserunterstützung: Weltweit ~92% im Jahr 2025.

AVIF verwenden für: Hero-Bilder, stark frequentierte Seiten, bei denen maximale Komprimierung zählt, Projekte mit Bild-Pipelines zur Build-Zeit

Entscheidungsrahmen: Welches Format solltest du verwenden?

Kostenlose Konvertierungsmethoden

Online (keine Installation)

• Squoosh (squoosh.app) — Googles eigenes Tool; Formate nebeneinander vergleichen
• Convertio — Stapelkonvertierung für mehrere Formate
• remove.bg + download as WebP — Kombinierte Hintergrundentfernung + WebP-Export

Kommandozeile

# WebP conversion (requires libwebp / cwebp)
cwebp -q 80 photo.jpg -o photo.webp

# AVIF conversion (requires ImageMagick 7+)
magick photo.jpg -quality 60 photo.avif

Next.js (automatisch)

Die Komponente next/image handelt automatisch das optimale Format anhand der Browserunterstützung aus:

import Image from 'next/image'
<Image src="/photo.jpg" alt="Auto-optimized" width={800} height={600} />

Browser mit AVIF-Unterstützung erhalten AVIF; WebP-fähige Browser erhalten WebP; alle anderen erhalten JPEG — alles automatisch.

Auswirkungen in der Praxis: Vorher und nachher

Ein typischer Blogbeitrag mit 5 eingebetteten Bildern, ursprünglich als JPEG gespeichert:

• Gesamtgewicht der Bilder: 2.1 MB
• Nach WebP-Konvertierung (Qualität 80%): 1.25 MB (−40%)
• Nach AVIF-Konvertierung (Qualität 70%): 0.85 MB (−60%)
• LCP-Verbesserung (gemessen): 0.8s → 0.4s

Fazit

Hör auf, standardmäßig für alles JPEG und PNG zu verwenden. Im Jahr 2026 ist WebP der sichere Standard für 95%+ der Web-Anwendungsfälle. AVIF lohnt sich für stark frequentierte Seiten als zusätzlicher Schritt. Beginne heute mit der Konvertierung — die Performance- und SEO-Gewinne sind sofort spürbar.