Bilder und Grafik
Bildformate im Vergleich
WebP, AVIF, JPEG, PNG, GIF und SVG im direkten Vergleich: Was jedes Format kann, wo es scheitert und welches Sie für welchen Zweck nehmen sollten.
· Redaktion websitefun.de
Die Formatfrage wirkt komplizierter, als sie ist. In der Praxis entscheidet fast immer eine einzige Eigenschaft des Bildes: Hat es weiche Farbverläufe oder harte Kanten?
Fotos bestehen aus Verläufen – Himmel, Haut, Stoff, Schatten. Logos, Symbole, Diagramme und Screenshots von Benutzeroberflächen bestehen aus Kanten und Flächen. Verlustbehaftete Formate rechnen Verläufe hervorragend klein und erzeugen an Kanten sichtbare Schlieren. Verlustfreie Formate machen es genau umgekehrt.
Der kurze Entscheidungsweg
- Liegt das Bild als Vektor vor (Logo aus einem Grafikprogramm)? → SVG
- Ist es ein Foto oder hat es weiche Verläufe? → WebP, bei sehr großen Titelbildern AVIF
- Hat es harte Kanten, Text oder braucht es exakte Transparenz? → PNG oder verlustfreies WebP
- Muss es sich bewegen? → animiertes WebP oder ein stummes MP4, nicht GIF
- Muss es in einem sehr alten System funktionieren? → JPEG
Die Formate im Einzelnen
WebP
Der vernünftige Standard für fast alles. WebP beherrscht beides – verlustbehaftete und verlustfreie Kompression – und kann Transparenz. Gegenüber JPEG spart es bei gleicher sichtbarer Qualität ungefähr ein Drittel, gegenüber PNG bei Grafiken oft mehr.
Der einzige nennenswerte Nachteil: Manche älteren Bildbearbeitungsprogramme und einige Content-Management-Systeme nehmen WebP beim Hochladen nicht an. Das ist ein Problem des Werkzeugs, nicht des Formats.
AVIF
Komprimiert noch stärker als WebP, besonders bei großen Fotos. Der Preis ist Rechenzeit: Eine AVIF-Datei zu erzeugen dauert ein Vielfaches. Für ein Bild, das millionenfach ausgeliefert wird, lohnt sich das. Für dreißig Produktbilder, die selten aufgerufen werden, selten.
Achten Sie darauf, dass Ihr Werkzeug AVIF wirklich schreiben kann. Manche Programme legen bei fehlender Unterstützung stillschweigend ein PNG mit der Endung .avif an. Der Bildkonverter hier prüft das vorher und sperrt Formate, die der Browser nicht exportieren kann.
JPEG
Das älteste der verbreiteten Formate und immer noch überall lesbar. Kennt keine Transparenz. Wer heute eine neue Website baut, braucht JPEG eigentlich nur noch für E-Mail-Anhänge und für Systeme, die nichts anderes annehmen.
Eine Eigenheit, die selten bedacht wird: JPEG speichert Metadaten mit – Aufnahmeort, Kameramodell, Seriennummer, manchmal den Namen des Fotografen. Auf einer Website hat das nichts verloren. Der Weg über ein Canvas-Element, wie ihn die Werkzeuge hier gehen, verwirft diese Daten automatisch.
PNG
Verlustfrei und mit echtem Alphakanal, also mit weichen Transparenzverläufen statt nur „durchsichtig oder nicht“. Damit ist PNG das richtige Format für Logos, Symbole und Screenshots, in denen Text lesbar bleiben muss.
Für Fotos ist es die falsche Wahl. Ein Foto als PNG ist typischerweise fünf- bis zehnmal so groß wie dasselbe Foto als WebP – ohne sichtbaren Gewinn.
SVG
Kein Pixelformat, sondern eine Beschreibung von Formen. Dadurch in jeder Größe scharf, meist winzig, und per CSS einfärbbar. Für Logos, Symbole und einfache Illustrationen unschlagbar.
Zwei Punkte, die man wissen muss: SVG kann Skripte enthalten, deshalb sollten Dateien aus fremder Quelle vor dem Einbinden geprüft werden. Und SVG lässt sich nicht aus einem Foto erzeugen – der Weg führt nur vom Vektor zum Pixel, nicht zurück.
GIF
Historisch bedeutsam, technisch überholt. Maximal 256 Farben, harte Transparenz ohne Zwischenstufen und eine Kompression aus den Achtzigerjahren. Eine dreisekündige Animation als GIF ist regelmäßig zwanzigmal so groß wie dasselbe als kurzes Video.
Wer den Look animierter Grafiken sucht, findet in der GIF-Sammlung eine Einordnung, wo das heute noch Sinn ergibt.
Zahlen aus der Praxis
Dasselbe Foto, 1600 Pixel breit, in verschiedenen Formaten bei jeweils vergleichbarer sichtbarer Qualität:
| Format | Typische Größe | Verhältnis |
|---|---|---|
| PNG (verlustfrei) | 2.400 kB | 100 % |
| JPEG (Qualität 80) | 310 kB | 13 % |
| WebP (Qualität 80) | 210 kB | 9 % |
| AVIF (Qualität 55) | 140 kB | 6 % |
Die genauen Werte hängen stark vom Motiv ab – ein wolkenloser Himmel komprimiert anders als ein Laubwald. Die Größenordnung stimmt aber verlässlich. Prüfen Sie es an Ihrem eigenen Bild mit Bilder komprimieren.
Und was ist mit der Dateiendung?
Die Endung ist nur ein Name. Ein PNG in .jpg umzubenennen macht daraus kein JPEG – der Browser erkennt das Format an den ersten Bytes der Datei und liefert es trotzdem korrekt aus, aber jedes Programm, das der Endung vertraut, stolpert. Benennen Sie Bilddateien nie um, wandeln Sie sie um.
Wie die fertigen Dateien danach in die Seite kommen, steht unter Bilder für die Website optimieren.