Was ist das beste Bildformat für Websites in 2026?

Deine Bilder sind wahrscheinlich zu groß. Die durchschnittliche Webseite wiegt über 2 MB. Bilder machen fast die Hälfte davon aus. Das richtige Format für jedes Bild zu wählen ist der einfachste Weg, deine Website schneller zu machen.

Aber JPG, PNG, WebP, AVIF und SVG stehen alle zur Verfügung. Wie wählst du das richtige aus? Jedes Format hat seinen Zweck. Das falsche zu nutzen verschwendet Bandbreite. Das richtige macht deine Seiten schnell, ohne die Qualität zu opfern.

Hier erfährst du genau, welches Format du wann verwenden solltest.

Welches Format solltest du für Fotos verwenden?

Fotos sind die schwersten Bilder auf den meisten Websites. Landschaften, Porträts, Produktfotos, Food-Fotos, Reisebilder. Das richtige Format hat hier den größten Einfluss.

Beste Wahl: AVIF. Es erzeugt die kleinsten Dateien. Ein Foto mit 1 MB als JPG wird als AVIF nur 500-600 KB groß. Bei gleicher visueller Qualität. Das ist eine Reduktion von 40-50%. Die Browser-Unterstützung liegt bei 93% und wächst weiter.

Zweite Wahl: WebP. Dateien sind 25-35% kleiner als JPG. Die Browser-Unterstützung liegt bei über 97%. Wenn du die sicherste moderne Option willst, ist WebP die richtige Wahl. Schau dir an, wie WebP JPG übertrifft in unserem ausführlichen Vergleich.

Fallback: JPG. Funktioniert immer noch überall. Nutze es als letzten Ausweg für die wenigen Nutzer mit sehr alten Browsern.

Niemals: PNG für Fotos. Ein Foto als PNG gespeichert ist 5-10 mal größer als nötig. PNG wurde nicht für fotografische Inhalte entwickelt. Wenn du PNG-Fotos auf deiner Website siehst, konvertiere sie sofort.

Das ideale Setup nutzt das HTML <picture> Element:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description">
</picture>

Der Browser wählt das beste Format, das er unterstützt. Moderne Browser bekommen AVIF. Ältere bekommen WebP. Sehr alte bekommen JPG.

Was ist mit Bildern, die Transparenz brauchen?

Transparente Bilder (Logos auf farbigen Hintergründen, Produkt-Freisteller, Icons auf beliebigen Flächen) brauchen ein Format mit Alpha-Kanal.

Beste Wahl: WebP. Volle Transparenz-Unterstützung. Dateien sind 30-70% kleiner als PNG mit Transparenz. Unterstützt von über 97% der Browser. Lies mehr über die Unterschiede zwischen WebP und PNG in unserem Vergleich.

Alternative: AVIF. Noch kleiner als WebP mit Transparenz. Aber 93% Browser-Unterstützung bedeutet, dass du einen Fallback brauchst. Unser AVIF vs WebP Vergleich zeigt das komplette Bild.

Fallback: PNG. Perfekte Transparenz-Unterstützung. Größere Dateien. Nutze es als Fallback im <picture> Element.

Niemals: JPG für transparente Bilder. JPG unterstützt keine Transparenz. Transparente Bereiche werden weiß (oder schwarz). Es gibt keine Lösung dafür.

Ein häufiger Fehler: Produktfotos mit transparentem Hintergrund als PNG speichern. Ein einzelner Produkt-Freisteller als PNG kann 2-3 MB groß sein. Das gleiche Bild als WebP ist 200-400 KB. Multipliziere das mit 50 Produkten auf einer Kategorieseite und du sparst 100 MB an Daten.

Solltest du SVG für Logos und Icons verwenden?

Ja. SVG ist das beste Format für Vektorgrafiken im Web. Logos, Icons, einfache Illustrationen und Diagramme sollten fast immer SVG sein.

Warum SVG bei Vektoren gewinnt:

• Skaliert auf jede Größe ohne Qualitätsverlust
• Dateigrößen sind winzig (oft 2-10 KB)
• Kann mit CSS gestaltet werden
• Kann animiert werden
• Barrierefrei (Screenreader können SVG-Text vorlesen)

Wann du SVG nicht verwenden solltest:

• Fotos (SVG kann Fotos nicht effizient darstellen)
• Komplexe Illustrationen mit vielen Farben und Verläufen (Dateigröße wird riesig)
• Wenn die Plattform kein SVG akzeptiert (einige Social-Media-Kanäle, E-Mail-Clients)

Wenn du ein Logo als PNG mit 80 KB hast, spart der Wechsel zu einer SVG-Version mit 5 KB ganze 94%. Die SVG-Version sieht außerdem auf jeder Bildschirmgröße schärfer aus.

Für Situationen, in denen du kein SVG verwenden kannst (E-Mail, Social Media), konvertiere es zu WebP oder PNG in den benötigten Abmessungen.

Wie stark beeinflusst das Bildformat die Ladegeschwindigkeit?

Der Einfluss ist enorm. Die Wahl des Bildformats wirkt sich direkt auf drei wichtige Metriken aus.

Largest Contentful Paint (LCP). Das misst, wann das größte sichtbare Element geladen wird. Auf den meisten Seiten ist das ein Bild. AVIF oder WebP statt JPG/PNG zu verwenden kann den LCP auf mobilen Verbindungen um 1-3 Sekunden verkürzen.

Gesamtgewicht der Seite. Der Wechsel von PNG zu WebP für alle Bilder reduziert das Gesamtgewicht typischerweise um 40-60%. Von JPG zu WebP kannst du 25-35% Reduktion erwarten.

Time to Interactive. Kleinere Bilder bedeuten weniger Daten zum Herunterladen. Der Browser wird schneller fertig. Die Seite wird schneller interaktiv.

Praxisbeispiel: eine E-Commerce-Kategorieseite mit 30 Produktfotos.

Format	Gesamtgewicht Bilder	Ladezeit (3G)
PNG	45 MB	30+ Sekunden
JPG (85%)	9 MB	8 Sekunden
WebP (85%)	6 MB	5 Sekunden
AVIF (80%)	4 MB	3,5 Sekunden

Der Unterschied zwischen PNG und AVIF ist über 10x. Selbst der Wechsel von JPG zu WebP spart 33% und kürzt die mobile Ladezeit um 3 Sekunden.

Google nutzt die Ladegeschwindigkeit als Ranking-Faktor. Schnellere Seiten ranken höher. Bessere Bildformate verbessern direkt die SEO. Du kannst auch deine Bilder komprimieren für noch mehr Einsparungen zusätzlich zum Formatwechsel.

Welche Qualitätseinstellungen solltest du verwenden?

Das Format allein reicht nicht. Die Qualitätseinstellungen bestimmen die Balance zwischen Dateigröße und visueller Schärfe.

Für Hero-Bilder und Inhalte über dem Fold: Verwende 85-90% Qualität. Diese Bilder sind groß und sichtbar. Qualität zählt hier. Der Größenunterschied zwischen 85% und 95% ist gering, also geh ruhig höher.

Für Content-Bilder (Fotos in Artikeln): Verwende 80-85%. Diese Bilder werden meist kleiner angezeigt. Der Qualitätsunterschied zu 90% ist bei normalen Betrachtungsabständen unsichtbar.

Für Thumbnails und Raster-Layouts: Verwende 70-80%. Kleine Bilder brauchen keine hohe Qualität. Bei Thumbnail-Größe sind Kompressionsartefakte unsichtbar. Spar die Bytes.

Für Hintergrundbilder hinter Text: Verwende 60-75%. Diese Bilder sind teilweise verdeckt. Niedrigere Qualität ist in Ordnung und kann über 50% Dateigröße sparen.

Eine wichtige Regel: Starte immer mit der höchsten verfügbaren Qualität. Ein JPG mit 60% Qualität zu WebP zu konvertieren verbessert es nicht magisch. Nutze die beste Quelldatei, die du hast. Wenn deine Quellbilder niedrig aufgelöst sind, kannst du Bilder mit KI hochskalieren bevor du sie konvertierst.

Musst du alte Browser unterstützen?

In 2026 geht es weniger um das "ob" als um das "wie viel Aufwand".

WebP: 97%+ Unterstützung. Die 3% ohne Unterstützung nutzen Internet Explorer oder Browser von vor 2020. Für die meisten Websites reicht ein einfacher <picture> Fallback.

AVIF: 93% Unterstützung. Die 7% Lücke betrifft hauptsächlich ältere Safari-Versionen und einige mobile Browser. Ein WebP-Fallback deckt diese Nutzer gut ab.

JPG und PNG: 100% Unterstützung. Jeder jemals gebaute Browser kann diese anzeigen.

Der praktische Ansatz: Liefere moderne Formate mit Fallbacks. Moderne Nutzer bekommen kleine, schnelle Bilder. Ältere Browser bekommen größere, aber funktionierende Bilder. Jeder sieht etwas.

Wenn deine Analysen null Traffic von alten Browsern zeigen, kannst du Fallbacks komplett weglassen. Liefere einfach WebP. Wenn du vorsichtig sein willst, füge das <picture> Element mit JPG-Fallback hinzu. Das sind nur ein paar zusätzliche Zeilen HTML.

Für eine detaillierte Gegenüberstellung aller gängigen Formate lesen Sie unseren umfassenden Bildformate-Vergleich.

Wie konvertierst du deine Bilder ins beste Format?

ConvertIMG konvertiert zwischen allen gängigen Formaten. JPG, PNG, WebP, AVIF, TIFF, GIF, SVG und HEIC. Alles läuft in deinem Browser. Kein Upload. Keine Registrierung.

Ziehe deine Bilder rein, wähle das Zielformat, stelle die Qualität ein und lade herunter. Die Stapelverarbeitung erledigt ganze Ordner auf einmal. Deine Bilder bleiben die ganze Zeit auf deinem Gerät. Bereit, deine PNGs umzuwandeln? Konvertiere deine Bilder zu WebP mit unserer Schritt-für-Schritt-Anleitung.