Das beste Bildformat für Websites 2026: JPG, PNG, WebP oder AVIF?
·
Bilder sind meist der schwerste Teil einer Webseite, und das gewählte Format kann ihre Größe um die Hälfte oder mehr verändern. Einen alleinigen Sieger gibt es nicht, denn jedes Format eignet sich für eine andere Aufgabe. Dieser Ratgeber vergleicht die wichtigsten Formate, zeigt, was jeweils dafür und dagegen spricht, und gibt Ihnen eine klare Entscheidungshilfe.
Warum das Format wichtig ist
Das Format bestimmt, wie ein Bild komprimiert wird, ob es transparent oder animiert sein kann und welche Programme es anzeigen können. Für eine Website zählen vor allem drei Dinge: Dateigröße, Qualität und Unterstützung. Kleinere Dateien laden schneller, was Besuchern und dem Suchranking hilft. Die Qualität entscheidet, wie gut das Bild aussieht. Die Unterstützung entscheidet, wer es überhaupt sehen kann.
Das richtige Format zu wählen ist oft der schnellste Weg, eine Seite schlanker zu machen, ohne ihr Aussehen zu verändern. Auch Größe und Qualität spielen eine Rolle, wie die Checkliste zur Bildoptimierung für Websites zeigt.
Die wichtigsten Formate im Vergleich
| Format | Am besten für | Stärken | Schwächen |
|---|---|---|---|
| JPG | Fotos | Überall unterstützt, kleine Fotos | Keine Transparenz, verlustbehaftet |
| PNG | Grafiken, Screenshots | Verlustfrei, Transparenz | Bei Fotos sehr groß |
| WebP | Fotos und Grafiken | Kleiner als JPG und PNG, Transparenz, Animation | Einige ältere Programme lehnen es ab |
| AVIF | Fotos | Oft am kleinsten, HDR | Langsam zu erzeugen, weniger verbreitet |
| SVG | Logos, Icons, Illustrationen | Scharf in jeder Größe, winzig | Nicht für Fotos |
| GIF | Winzige Animationen | Funktioniert überall | 256 Farben, große Dateien |
Vor- und Nachteile der einzelnen Formate
JPG
- Vorteile: funktioniert überall, kleine Fotos.
- Nachteile: keine Transparenz und bei niedriger Qualität sichtbare Verluste.
PNG
- Vorteile: perfekte Schärfe und Transparenz.
- Nachteile: Fotos können zehnmal größer sein als im JPG-Format.
WebP
- Vorteile: bei ähnlicher Qualität meist 25 bis 35 Prozent kleiner als JPG, mit Transparenz und Animation, von allen aktuellen Browsern unterstützt.
- Nachteile: manche ältere Software und E-Mail-Programme können es nicht verwenden.
AVIF
- Vorteile: oft noch kleiner, mit HDR und großem Farbraum.
- Nachteile: langsam zu erzeugen, und außerhalb von Browsern ist die Unterstützung begrenzter. Siehe Was ist AVIF?
SVG
- Vorteile: winzig bei einfachen Grafiken, auf jedem Bildschirm scharf und per CSS gestaltbar.
- Nachteile: ungeeignet für Fotografien.
Schritt für Schritt: das passende Format für jedes Bild
- 1Ist es eine Vektorgrafik, etwa ein Logo oder Icon? Dann SVG.
- 2Ist es ein Foto? Nehmen Sie WebP, oder JPG, wenn maximale Kompatibilität gefragt ist. Für große Titelbilder, bei denen jedes Kilobyte zählt, lohnt sich AVIF.
- 3Ist es eine Grafik oder ein Screenshot mit scharfem Text? Dann PNG, oder verlustfreies WebP für eine kleinere Datei.
- 4Braucht es Transparenz? Dann PNG, WebP oder AVIF. JPG kann nicht transparent sein.
- 5Ist es eine Animation? Besser ein animiertes WebP oder ein kurzes Video ohne Ton als ein GIF.
- 6Dateien konvertieren. JPG in WebP und PNG in WebP erledigen die häufigsten Fälle direkt im Browser, und PNG in JPG verkleinert Fotos, die als PNG gespeichert wurden.
So liefern Sie moderne Formate sicher aus
Verpacken Sie das Bild in ein picture-Element mit einer AVIF-Quelle, dann einer WebP-Quelle und zuletzt einem normalen JPG-img als Fallback: <picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."></picture>. Der Browser nimmt die erste Quelle, die er versteht, sodass niemand ein kaputtes Bild sieht. Viele Bild-CDNs und Frameworks erledigen das automatisch. Der Ratgeber zu responsiven Bildern erklärt die Details, und der Ratgeber zur Umstellung auf WebP zeigt, wie Sie das gefahrlos einführen.
Häufige Fehler
- PNG für Fotografien verwenden, wodurch Seiten zehnmal schwerer werden können als nötig.
- GIF für Animationen verwenden, obwohl ein animiertes WebP oder ein Video viel kleiner ist.
- Fallbacks weglassen und damit Bilder in älteren Browsern und Programmen kaputt machen.
- Ein Format wählen, aber die Größe ignorieren: Ein passend dimensioniertes WebP schlägt ein überdimensioniertes JPG immer.
- WebP für Vorschaubilder in sozialen Netzwerken verwenden, die manche Plattformen nicht anzeigen.
Häufig gestellte Fragen
Welches ist das beste Bildformat für eine Website?
Für Fotos ist WebP ein guter Standard, mit JPG als Fallback und AVIF als optionalem Upgrade. Für Vektorlogos und Icons nehmen Sie SVG, für Grafiken mit exakten Kanten PNG oder verlustfreies WebP.
Ist WebP besser für SEO als JPG?
WebP allein führt nicht zu einem besseren Ranking, aber kleinere Dateien machen die Seite schneller, was die Signale zur Seitenerfahrung unterstützt. Google kann WebP-Bilder indexieren.
Sollte ich AVIF statt WebP verwenden?
AVIF kann kleiner sein, ist aber langsamer zu erzeugen und etwas weniger verbreitet. WebP ist für die meisten Websites einfacher, und AVIF können Sie später für wichtige Bilder ergänzen.
Wann sollte ich noch PNG verwenden?
Für Screenshots, Diagramme und Grafiken mit scharfem Text, bei denen es auf Genauigkeit ankommt, sowie wenn eine Plattform PNG verlangt. Für Fotos wählen Sie WebP oder JPG.
Brauche ich ein Fallback-Format?
Es ist eine günstige Absicherung. Mit einem picture-Element nimmt der Browser das erste Format, das er unterstützt, sodass auch ältere Browser und Programme ein funktionierendes Bild bekommen.