Bestes Bildformat für Websites 2026: JPG, WebP, AVIF oder PNG?

Kurze Antwort: das beste Bildformat für Websites 2026

Das beste Bildformat für die meisten Websites ist 2026 WebP. Es ist der praktische Standard für Fotos, Produktbilder, Thumbnails, Blogbilder und viele transparente Grafiken, denn es liefert in der Regel kleinere Dateien als JPEG oder PNG und funktioniert dabei in allen modernen Browsern.

„Einfach alles in WebP umwandeln" ist damit aber noch kein guter Migrationsplan. AVIF kann bei großen Visuals in Sachen Dateigröße vorne liegen. JPEG bleibt der sicherste Fallback für alte Browser, E-Mail, CMS-Importe und externe Upload-Formulare. PNG bleibt richtig für Screenshots, Diagramme und Bitmap-Assets, bei denen scharfe Kanten oder Transparenz zählen. Für Logos und Icons ist SVG jedem der genannten Formate überlegen, sofern das Artwork vektor­basiert ist.

Die echte Antwort für 2026 lautet:

Warum diese Entscheidung überhaupt zählt

Das Bildformat bestimmt mit, wie viele Bytes ein Besucher lädt. Das beeinflusst Ladezeit, mobiles Datenvolumen und den Largest Contentful Paint, vor allem wenn das Bild oberhalb des Falzes liegt. Chromes Lighthouse-Hinweise behandeln AVIF und WebP nach wie vor als moderne Formate mit besserer Kompression und Qualität als die klassischen JPEG und PNG für viele Webbilder.

Format ist aber nur ein Teil der Bild-SEO. Ein perfekt encodetes AVIF kann trotzdem die Performance ruinieren, wenn es 4000 px breit ist und in einem 700 px breiten Slot dargestellt wird. Ein winziges WebP verbessert kein Ranking, wenn der Alt-Text fehlt und die Seite dünn ist. Zuerst das Format wählen, dann aber auch verkleinern, komprimieren, width und height setzen, sinnvollen Alt-Text schreiben und responsive Quellen ausliefern.

Ein einfaches Denkmodell hilft: zuerst die richtigen Pixel, dann das richtige Format.

Nutzen Sie WebP als Alltagsstandard

WebP ist 2026 der beste Standard für die meiste Bildarbeit im Web. Es unterstützt verlustbehaftete Kompression für Fotos, verlustfreie Kompression für Grafiken, Transparenz und Animation. Google gibt an, dass verlustfreie WebP-Bilder 26 % kleiner sind als PNG und verlustbehaftete WebP-Bilder bei vergleichbarer Qualität 25–34 % kleiner als vergleichbare JPEGs.

Verwenden Sie WebP für:

• Blog- und Help-Center-Fotos.
• Produktlisten-Bilder und Thumbnails.
• Kategorieseiten-Bilder.
• Team- und Autorenporträts.
• Hintergrundbilder, die keine AVIF-Ersparnis brauchen.
• Transparente Grafiken, wenn CMS und Ziel-Browser WebP zuverlässig verarbeiten.

Auch operativ ist WebP eine gute Wahl. Die meisten Bildeditoren, Build-Tools, CMS-Plugins, CDNs und browserbasierten Konverter können es erzeugen. Wer als kleines Team ein modernes Format möchte, ohne für jedes Bild mehrere Fallbacks zu pflegen, fährt mit WebP am reibungsärmsten.

Setzen Sie AVIF ein, wenn die Ersparnis den Pipeline-Aufwand rechtfertigt

AVIF lohnt sich zu testen, wenn Bildgewicht ein echtes Geschäftsproblem ist: ein großes Hero, eine traffic­starke Landingpage, ein Portfolio mit vollformatiger Fotografie oder eine Produktgalerie, in der auf Mobilgeräten jedes Bild geladen wird. MDN beschreibt AVIF als hochperformantes, lizenzfreies Format mit Transparenz, Animation, größerer Farbtiefe, HDR und breitem Farbraum. In der Praxis ist der größte Alltagsvorteil kleinere Dateien bei vielen fotografischen Motiven.

Der Haken liegt im Workflow. AVIF kann beim Encoden langsamer sein, und manche älteren Browser, App-Webviews, CMS-Tools oder Upload-Portale kommen damit weniger reibungslos zurecht als mit JPEG oder WebP. Deshalb ist AVIF meist die erste Quelle in einer Fallback-Kette und nicht die einzige Datei, die Sie behalten.

Setzen Sie AVIF ein, wenn:

• das Bild groß genug ist, damit Bytes wirklich zählen;
• das Asset zur Build-Zeit oder über ein CDN erzeugt wird;
• Sie die visuelle Qualität vor dem Veröffentlichen prüfen können;
• Sie einen WebP- oder JPEG-Fallback ausliefern können;
• Ihre Analytik moderne Browsernutzung zeigt.

Verwenden Sie AVIF nicht blind für jedes Mini-Thumbnail. Wenn aus einem 14 KB WebP ein 10 KB AVIF wird, das Erzeugen aber deutlich länger dauert und Ihre Pipeline verkompliziert, ist die Ersparnis den Aufwand womöglich nicht wert.

Behalten Sie JPEG für Kompatibilität, Fallback und Nicht-Web-Workflows

JPEG ist nicht tot. Es ist nur nicht mehr der beste Standard, wenn Web-Performance im Vordergrund steht.

Behalten Sie JPEG, wenn Kompatibilität wichtiger ist als maximale Kompression:

• Newsletter und E-Mail-Anhänge.
• Alte CMS-Importe oder Mediatheken mit strikten Dateiprüfungen.
• Native Apps oder Upload-Portale, die nur JPEG akzeptieren.
• Soziale Werkzeuge, die ohnehin alles neu komprimieren.
• Legacy-Browser, In-App-Browser, Kiosk-Systeme oder eingebettete Geräte.
• Das Fallback-Bild im <picture>-Element.

JPEG ist auch dann in Ordnung, wenn die Seite wenig Bilder trägt und Performance nicht das Problem ist. Ein sauber skaliertes JPEG mit vernünftiger Qualität schlägt jedes gigantische WebP in falscher Größe. Die meiste schlechte Bild-Performance kommt von zu großen Pixelmaßen, nicht von JPEG.

Verwenden Sie PNG, wenn die Pixel exakt bleiben müssen

PNG ist kein modernes Format für die Fotoauslieferung, sondern ein Präzisionsformat. Setzen Sie es ein, wenn verlustfreie Kanten, Text oder Transparenz wichtiger sind als kleine Dateigröße.

Gute PNG-Anwendungsfälle:

• UI-Screenshots mit kleinem Text.
• Diagramme, Charts und Strichgrafik.
• Logos, wenn kein SVG vorliegt.
• Transparente Bitmap-Assets im Design-Workflow.
• Dateien, die noch mehrfach bearbeitet werden.

Schlechte PNG-Anwendungsfälle:

• Kamera­fotos.
• Hero-Hintergründe.
• Große Produktfotos ohne Transparenz.
• Dekorative Bilder, die auch WebP oder AVIF sein könnten.

Ein PNG-Foto kann ein Vielfaches eines vergleichbaren JPEGs, WebPs oder AVIFs wiegen. Ist das Bild fotografisch und braucht weder Transparenz noch exakte Pixelbewahrung, ist PNG meist der falsche Export.

SVG für Logos und Icons nicht vergessen

Die meisten „Bestes Format"-Artikel vergleichen JPG, PNG, WebP und AVIF, aber Logos und Icons einer Website sind oft besser als SVG aufgehoben. SVG ist Vektor, bleibt in jeder Größe scharf und ist häufig deutlich kleiner als ein gerastertes Logo.

Nutzen Sie SVG für:

• Site-Logos.
• Einfache Icons.
• UI-Symbole.
• Flache Illustrationen, die von Haus aus vektorbasiert sind.

Nehmen Sie PNG oder WebP, wenn das Asset ein komplexes Rasterbild ist, die Plattform SVG entfernt oder Sie der Quelle des SVGs nicht trauen. SVG kann codeähnliche Auszeichnung enthalten — verwenden Sie SVG-Assets nur aus vertrauenswürdigen Quellen.

Formatentscheidungen nach Seitentyp

Unterschiedliche Seiten verdienen unterschiedliche Formatentscheidungen. Ein Startseiten-Hero und ein Screenshot im Hilfeartikel sollten nicht gleich behandelt werden.

Wenn Sie diese Woche nur eine Sache ändern können, starten Sie mit den größten Bildern oberhalb des Falzes und den meistbesuchten bildlastigen Templates. Zuerst jedes winzige Icon umzuwandeln fühlt sich produktiv an, bewegt aber selten die Performance-Metriken.

Das richtige Fallback-Muster

Für produktive Seiten überlässt das <picture>-Element dem Browser die Wahl des ersten unterstützten Formats. web.dev empfiehlt das Muster AVIF zuerst, WebP zweitens, JPEG als Fallback. Das eingebettete img trägt weiterhin alt, width, height und die Fallback-src.

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-1200.avif 1200w, /images/hero-2400.avif 2400w"
    sizes="100vw"
  />
  <source
    type="image/webp"
    srcset="/images/hero-1200.webp 1200w, /images/hero-2400.webp 2400w"
    sizes="100vw"
  />
  <img
    src="/images/hero-1200.jpg"
    width="1200"
    height="800"
    alt="Fertig umgebaute Küche mit Nussbaum-Fronten und natürlichem Licht"
  />
</picture>

Das JPEG-Fallback gehört ins img-Element. Genauso wie sinnvoller Alt-Text — verstecken Sie die einzig aussagekräftige Beschreibung nicht in einem source-Tag; der Browser liest Alt-Text nicht aus source.

Denken Sie bei einem LCP-Hero auch an die Ladepriorität. Lazy-Load ist beim Haupt-Hero fehl am Platz. Unterhalb des Falzes kann Lazy Loading dagegen helfen.

Qualitätseinstellungen, die wirklich etwas taugen

Qualitätswerte sind nicht universell. Ein WebP-Qualitätswert 80, ein AVIF-Wert 50 und ein JPEG-Wert 85 bedeuten nicht dasselbe. Auch die Encoder verhalten sich unterschiedlich.

Nehmen Sie die folgenden Werte als Startpunkt, nicht als Gesetz:

Vergleichen Sie das Exportergebnis immer in der Größe, in der es auf der Seite erscheint. Wird ein Bild in 600 px Breite dargestellt, lässt eine Beurteilung im vollen 4000-px-Zoom harmlose Kompression schlimmer wirken, als Besucher sie je sehen. Testen Sie auch dunkle Verläufe, Hauttöne, Produkttexturen und Text-Overlays — dort zeigen sich Kompressions­probleme schneller als im flachen blauen Himmel.

Ein praxistauglicher Migrationsplan

Wenn Sie eine bestehende Website aufräumen, wandeln Sie nicht als Erstes die gesamte Mediathek um. Fangen Sie dort an, wo der Effekt messbar ist.

1. Erstellen Sie eine Liste der größten Bilder auf den meistbesuchten Seiten.
2. Markieren Sie, welche davon oberhalb des Falzes liegen oder LCP-Kandidaten sind.
3. Verkleinern Sie jedes Bild auf die größte Größe, in der es tatsächlich erscheint.
4. Wandeln Sie Fotos zuerst in WebP.
5. Testen Sie AVIF für die schwersten Hero- oder Galeriebilder.
6. Behalten Sie JPEG-Fallbacks für Templates, die alte Browser-, E-Mail- oder CMS-Kompatibilität brauchen.
7. Lassen Sie Screenshots, Diagramme und exakte Grafiken als PNG oder verlustfreies WebP.
8. Ergänzen Sie width, height, srcset, sizes und aussagekräftigen alt-Text.
9. Lassen Sie Lighthouse oder Ihren Performance-Monitor vor und nach der Änderung laufen.

Dieser Ablauf ist weniger glamourös als „AVIF ist am besten", aber auf einer echten Site funktioniert er zuverlässiger.

So konvertieren Sie Formate mit PhotoTools

PhotoTools konvertiert JPG-, PNG-, WebP-, AVIF- und HEIC-Dateien direkt im Browser. Bild einziehen, Zielformat wählen, bei verlustbehafteten Ausgaben die Qualität anpassen, konvertieren, Ergebnis herunterladen. Die Stapelverarbeitung ist nützlich, wenn Sie einen Ordner mit Produktbildern oder Blogfotos migrieren.

Ein einfacher Test vor einem großen Batch:

• Wählen Sie ein helles Foto, ein dunkles Foto, ein Motiv mit Gesicht und eines mit feinen Details.
• Exportieren Sie WebP- und AVIF-Varianten.
• Vergleichen Sie sie in der tatsächlichen Anzeige­größe.
• Prüfen Sie die Dateigrößenersparnis.
• Laden Sie eine Datei ins CMS, um zu prüfen, dass die Plattform sie akzeptiert.

HEIC-Dateien vom iPhone wandeln Sie vor der Veröffentlichung in JPEG oder WebP um. HEIC ist als Aufnahme- und Speicherformat sinnvoll, aber kein sicheres Format für die öffentliche Auslieferung im Web.

Quellen zur Empfehlung für 2026

Diese Empfehlung stützt sich auf aktuelle Browser- und Performance-Dokumentation sowie praktische Web-Publishing-Workflows:

• MDN-Leitfaden zu Bilddateitypen beschreibt AVIF, WebP, JPEG, PNG, SVG, Browser-Support und wann Fallbacks angebracht sind.
• Chrome-Lighthouse-Dokumentation erklärt, warum AVIF und WebP das Bildgewicht gegenüber älterem JPEG und PNG senken können.
• Google-WebP-Dokumentation nennt die Größenersparnis von verlustfreiem und verlustbehaftetem WebP gegenüber PNG und JPEG.
• web.dev zu Bild-Performance erklärt, wie moderne Formate und das <picture>-Element in Bildladen und LCP passen.

Kurzfassung: WebP als Alltags­format im Web nutzen, AVIF dort ergänzen, wo Bildgewicht echte Performance-Auswirkungen hat, JPEG für Kompatibilität behalten und PNG oder SVG für die Assets bewahren, die es wirklich brauchen.