Früher war die Wahl des Bildformats einfach: JPEG für Fotos, PNG für Grafiken, fertig. Heute ist das Bild differenzierter – und lohnender. Moderne Formate wie WebP und AVIF können das Gewicht eines Bildes um die Hälfte oder mehr reduzieren, ohne dass die Qualität sichtbar leidet. Das verbessert direkt die Seitengeschwindigkeit, die Suchleistung und das Erlebnis für alle, die über eine langsame Verbindung surfen.
Dieser Leitfaden erklärt, wie jedes wichtige Web-Bildformat tatsächlich funktioniert, wo es jeweils glänzt und wie Sie sicher die richtige Wahl treffen. Er richtet sich an alle, die Bilder im Web veröffentlichen – Entwickler, Designer, Marketer und Shop-Betreiber – und konzentriert sich auf praktische Entscheidungen statt auf Theorie.
Beginnen Sie mit zwei Fragen
Fast jede Formatentscheidung lässt sich auf zwei Eigenschaften Ihres Bildes zurückführen.
**Handelt es sich um ein Foto oder eine Grafik?** Fotos (kontinuierliche Farbtöne, Verläufe, weiche Kanten) lassen sich gut mit *verlustbehafteten* Formaten komprimieren, die Details verwerfen, die das Auge kaum bemerkt. Grafiken mit scharfen Kanten, flächigen Farben und Text – Logos, Symbole, Screenshots, Diagramme – benötigen *verlustfreie* Kompression oder ein Vektorformat, um gestochen scharf zu bleiben.
**Brauchen Sie Transparenz oder Animation?** Ein Logo, das vor unterschiedlichen Hintergründen platziert wird, benötigt einen Alphakanal. Ein kurzer Schleifen-Clip benötigt Animationsunterstützung. Solche Anforderungen schließen Formate aus oder ein, noch bevor die Dateigröße überhaupt ins Spiel kommt.
Behalten Sie diese beiden Antworten im Kopf, während wir die Formate durchgehen.
Die Web-Bildformate auf einen Blick
| Format | Kompression | Transparenz | Animation | Browser-Unterstützung | Am besten für |
|---|---|---|---|---|---|
| JPEG (JPG) | Verlustbehaftet | Nein | Nein | Universell | Fotos, bei denen Kompatibilität zählt |
| PNG | Verlustfrei | Ja (Alpha) | Nein | Universell | Logos, Symbole, Screenshots, flächige Grafiken |
| WebP | Verlustbehaftet + verlustfrei | Ja (Alpha) | Ja | Alle modernen Browser | Ein moderner Standard für Fotos und Grafiken |
| AVIF | Verlustbehaftet + verlustfrei | Ja (Alpha) | Ja | Die meisten modernen Browser | Maximale Effizienz für Fotos und Hero-Bilder |
| SVG | Vektor (verlustfrei) | Ja | Ja | Universell | Logos, Symbole, Illustrationen, die skalieren müssen |
| GIF | Verlustfrei, 256 Farben | 1 Bit | Ja | Universell | Einfache Animationen aus Altbeständen |
JPEG (JPG): Das universelle Fotoformat
JPEG ist seit drei Jahrzehnten das Standard-Fotoformat, und seine größte Stärke ist die universelle Kompatibilität. Jeder Browser, jedes Betriebssystem, jede Kamera und jedes Bearbeitungswerkzeug liest es ohne Wenn und Aber.
JPEG nutzt verlustbehaftete Kompression: Es verwirft hochfrequente Details, für die das menschliche Sehvermögen am wenigsten empfindlich ist, und speichert den Rest kompakt. Bei hohen Qualitätseinstellungen ist der Verlust unsichtbar; treibt man die Kompression zu weit, entstehen klötzchenartige Artefakte und Halos um Kanten.
Seine Grenzen sind ebenso wichtig wie seine Reichweite. JPEG kennt keine Transparenz, sodass jeder transparente Bereich zu einem deckenden Hintergrund wird, und es kämpft mit scharfen Kanten und Text. Verwenden Sie JPEG, wenn ein Foto überall ohne Kompatibilitätsrisiko geöffnet werden muss. Wenn Sie Grafiken haben oder Transparenz benötigen, konvertieren Sie JPG stattdessen zu PNG.
PNG: Wenn Sie Transparenz oder pixelgenaue Details brauchen
PNG ist verlustfrei: Es gibt jeden Pixel exakt so wieder, wie er gespeichert wurde, ohne Kompressionsartefakte. Damit ist es das richtige Werkzeug für Logos, Symbole, Screenshots, Diagramme und jede Grafik mit scharfen Kanten oder großen Flächen einheitlicher Farbe. Es unterstützt zudem volle Alpha-Transparenz, sodass Bilder sauber vor jedem Hintergrund sitzen.
Der Kompromiss ist die Dateigröße. Bei Fotos kann eine PNG-Datei mehrfach größer sein als ein gleichwertiges JPEG in hoher Qualität. Die Faustregel ist einfach: PNG für Grafiken und Transparenz, nicht für Fotos. Wenn ein PNG-Foto eine Seite ausbremst, konvertieren Sie PNG zu JPG oder, besser fürs Web, konvertieren Sie PNG zu WebP. Für einen tieferen Einblick siehe JPG vs. PNG.
WebP: Der praktische moderne Standard
WebP, von Google entwickelt, ist heute das Format, zu dem die meisten Websites zuerst greifen sollten. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, volle Alpha-Transparenz und Animation – und deckt damit nahezu jeden Anwendungsfall in einem einzigen Format ab. Google berichtet, dass verlustbehaftete WebP-Bilder typischerweise 25 bis 34 Prozent kleiner sind als vergleichbare JPEGs, und verlustfreies WebP meist rund 26 Prozent kleiner ist als PNG.
Die Unterstützung ist kein Hindernis mehr: WebP funktioniert in allen aktuellen großen Browsern, einschließlich Safari ab Version 14. Für die überwältigende Mehrheit Ihres Publikums können Sie WebP direkt ausliefern, weshalb es eine sinnvolle Standardwahl für Fotos wie für Grafiken ist. Um es einzusetzen, konvertieren Sie JPG zu WebP oder konvertieren Sie PNG zu WebP. Für eine ausführlichere Erklärung lesen Sie Was ist WebP.
AVIF: Am effizientesten, mit einigen Kompromissen
AVIF ist das neueste Mainstream-Format, aufgebaut auf dem Videocodec AV1 der Alliance for Open Media. Es ist der Effizienz-Champion: Bei vergleichbarer Bildqualität sind AVIF-Dateien oft etwa halb so groß wie JPEG und spürbar kleiner als WebP. Es beherrscht außerdem hohen Dynamikumfang (HDR), breite Farbräume, Transparenz und Animation.
Es gibt zwei praktische Kompromisse. Das Kodieren ist langsamer und anspruchsvoller als bei JPEG oder WebP, was bei großen Stapeln ins Gewicht fällt. Und obwohl die Unterstützung inzwischen breit ist – Chrome, Firefox, Edge sowie Safari ab 16.4 –, liegt sie weiterhin leicht hinter WebP, sodass eine Fallback-Lösung ratsam ist. AVIF brilliert bei großen Hero-Bildern und fotolastigen Seiten, wo jedes Kilobyte zählt. Probieren Sie es aus, indem Sie JPG zu AVIF konvertieren oder PNG zu AVIF, und sehen Sie sich Was ist AVIF für Details an.
SVG: Für alles, was skalieren muss
SVG ist grundlegend anders: Es ist ein Vektorformat, das Formen mit Mathematik beschreibt statt mit einem Raster aus Pixeln. Eine SVG-Datei bleibt in jeder Größe perfekt scharf, vom Favicon bis zur Plakatwand, und bleibt bei einfachen Grafiken dabei winzig. Sie ist die richtige Wahl für Logos, Symbole und Illustrationen, die aus geschlossenen Formen und Linien bestehen.
SVG eignet sich nicht für Fotos, da diese keine klare Geometrie zum Beschreiben besitzen. Aber für Oberflächensymbole und Markenelemente kommt nichts an ihre Skalierbarkeit und Schärfe heran. Mehr dazu in Was ist eine SVG-Datei.
Ein einfacher Entscheidungsrahmen
Wenn Sie unsicher sind, arbeiten Sie diese Punkte der Reihe nach durch:
- **Ist es ein Logo, ein Symbol oder eine flächige Illustration?** Verwenden Sie SVG.
- **Ist es eine Grafik oder ein Screenshot, oder braucht es Transparenz oder pixelgenaue Kanten?** Verwenden Sie PNG oder verlustfreies WebP für kleinere Dateien.
- **Ist es ein Foto für ein modernes Publikum?** Verwenden Sie AVIF für die kleinste Größe, WebP für das beste Gleichgewicht aus Größe und Reichweite.
- **Muss es buchstäblich überall geöffnet werden können, auch in alter Software?** Verwenden Sie JPEG.
- **Ist es animiert?** Verwenden Sie WebP oder, noch besser, ein echtes Videoformat wie MP4 – nicht GIF.
Moderne Formate sicher ausliefern
Sie müssen sich nicht für ein Format für alle entscheiden. Das HTML-Element picture lässt den Browser das beste Format wählen, das er unterstützt: Listen Sie AVIF zuerst auf, dann WebP, dann ein JPEG- oder PNG-Fallback – und jeder Besucher lädt nur eine einzige Datei herunter. Moderne Browser erhalten die effiziente Version und ältere ein garantiertes Fallback, ganz ohne JavaScript.
Das ist mehr als nur eine Frage der Ästhetik. Bilder sind in der Regel der größte Teil einer Seite, sodass die Formatwahl einen direkten Einfluss auf Largest Contentful Paint hat, einen von Googles Core Web Vitals, und damit sowohl auf das Nutzererlebnis als auch auf die Suchleistung. Kleinere, gut gewählte Bilder gehören zu den wirkungsvollsten Geschwindigkeitsverbesserungen, die es gibt.
So konvertieren Sie Ihre vorhandenen Bilder
Sie müssen nur selten alles von Grund auf neu exportieren. Um eine bestehende Bibliothek zu modernisieren, konvertieren Sie direkt vor Ort: JPG zu WebP, PNG zu WebP, JPG zu AVIF oder PNG zu JPG für maximale Kompatibilität. Bewahren Sie Ihre originalen, hochwertigen Master auf und erzeugen Sie moderne Formate nach Bedarf daraus.