Drei Formate decken heute fast jedes Foto im Web ab JPG ist seit drei Jahrzehnten der Standard WebP kam 2010 an und wird jetzt von jedem aktuellen Browser angezeigt AVIF ist das neueste der drei, auf einem Video-Codec aufbauend, und es macht in der Regel die kleinsten Dateien Ein Performance-Audit wird Ihnen sagen, dass Sie " Bilder in modernen Formaten servieren", und dann wird ein Upload-Formular oder ein E-Mail-Client die moderne Datei, die Sie erstellt haben, ablehnen.
Die Auswahl zwischen ihnen ist weniger darüber, welches Format das beste ist, als vielmehr darüber, wohin das Bild geht Ein Heldenbild auf einer Landingpage, ein Produktfoto in einem Marktplatz-Listing und ein Bild, das einer E-Mail beigefügt ist, haben unterschiedliche Antworten Dieser Leitfaden vergleicht die drei Attribute, die es entscheiden: Dateigröße, Qualität, Transparenz, Farbtiefe, Animation, Kodierungskosten und Support außerhalb des Browsers. Dann gibt es eine Entscheidungstabelle und zeigt, wie man zwischen ihnen konvertiert.
tl; dr: Für Bilder auf einer Website dienen Sie AVIF zunächst mit WebP als Rückfall und JPG als letztem Ausweg, indem Sie die
<picture>Element - oder Serververhandlung; AVIF ist normalerweise am kleinsten, WebP ist dicht dahinter und schneller zu kodieren, und JPG öffnet sich überall Für Bilder, die den Browser verlassen (E-Mail, Uploads, Print, Office-Software), verwenden Sie JPG, oder PNG, wenn es auf Transparenz ankommt, um Dateien zu anderen Programmen zu akzeptieren, wird die AVIF-zu-JPG-Konverter und WebP zu JPG führen clientseitig aus, nichts hochgeladen, kostenlos, keine Anmeldung; JPG zu WebP und PNG zu WebP gehen in die andere Richtung.
Was sind AVIF, WebP und JPG?
Alle drei sind Rasterbildformate für Fotografien und unterscheiden sich hauptsächlich im Alter und Design ihrer Komprimierung.
JPG (JPEG) ist die Standbildmethode, die in standardisiert ist ITU-T-Empfehlung T.81 1992. teilt es das Bild in 8x8 Pixelblöcke, transformiert jeden mit einer diskreten Kosinustransformation und verwirft das hochfrequente Detail, das das Auge am wenigsten bemerkt Dateien werden normalerweise in den JFIF-Container eingewickelt von ITU-T T.871drohen
WebP ist das Google's-Format, jetzt angegeben in RFC 9649. Sein verlustbehafteter Modus verwendet die Keyframe-Codierung des VP8-Videocodecs und verfügt über einen separaten verlustfreien Modus sowie Transparenz und Animation. Die Anleitung auf Was WebP ist und warum gespeicherte Bilder als.webp herauskommen Vertieft es.
Avif ist das AV1 Image File Format, das von der Alliance for Open Media als veröffentlicht wird AVIF-Spezifikation. Es speichert Bilder, die mit dem codiert sind AV1 Video Codec In einem HEIF-Container wird die gleiche Boxstruktur verwendet, die iPhone HEIC-Fotos verwenden. AV1 wird unter einer lizenzfreien Patentlizenz der Alliance for Open Media angeboten, was einer der Gründe dafür ist, dass Browser AVIF schneller als HEIC übernommen haben.
AVIF vs. WebP vs. JPG: die Vergleichstabelle
AVIF führt bei Komprimierung und Fähigkeit, JPG bei Kompatibilität und Kodierungsgeschwindigkeit und WebP sitzt in fast jeder Zeile dazwischen.
| Attribut | Avif | WebP | JPG |
|---|---|---|---|
| Spezifikation | AOMedia AVIF, AV1-Codec | IETF RFC 9649 | ITU-T T.81 und T.871 |
| Eingeführt | 2019 | 2010 | 1992 |
| Kompression | Verlustbehaftet oder verlustfrei | Verlustbehaftet oder verlustfrei | schlaff |
| Typische Fotogröße | Kleinste | Klein | Größte der drei |
| Bit-tiefe | 8, 10 oder 12 Bit pro Kanal | 8 Bit pro Kanal | 8 Bit pro Kanal in der Praxis |
| HDR und breite Farbe | ja | kein | kein |
| Transparenz | Volles Alpha | Volles Alpha | keine |
| Animation | Bildsequenzen | ja | kein |
| Kodiergeschwindigkeit | Langsam, CPU-lastig bei hohem Aufwand | Mäßig | echt |
| Browseranzeige | Chrome 85, Firefox 93, Safari 16, Edge 121 und höher | Alle aktuellen Browser | Universell |
| Desktop-Apps, E-Mail, Upload-Formulare | Schwächste | Patchy | Universell |
| Beste Verwendung | Größte Webbilder, bei denen Bytes am wichtigsten sind | Allgemeine Webbilder, breiter Rückfall | Alles, was den Browser verlässt |
Die Reihe, die die Leute überrascht, ist die Kodierungsgeschwindigkeit AVIF' s kleine Dateien stammen von einem Kodierer, der hart nach der besten Möglichkeit sucht, jeden Block zu kodieren, und diese Suche braucht Zeit Ein Build-Schritt, der Tausende von Produktbildern in Minuten in WebP umwandelt, kann bei AVIF mit hoher Aufwandseinstellung viel länger dauern Bei einer Seite, die einmal kodiert und millionenfach bedient, lohnt sich der Handel normalerweise Bei Bildern, die pro Anfrage im Handumdrehen generiert werden, ist dies möglicherweise nicht der Fall.
Welches Format macht die kleinsten Dateien?
AVIF stellt in der Regel die kleinsten Dateien in ähnlicher visueller Qualität her, WebP ist der nächste, und JPG ist der größte Die Größe der Lücke hängt stark vom Bild und den Einstellungen des Encoders ab.
Für WebP gibt es einen veröffentlichten Referenzpunkt: Google's WebP-Übersicht Meldet verlustbehaftete WebP-Dateien, die 25 bis 34% kleiner als vergleichbares JPEG bei gleichwertiger SSIM-Qualität und verlustfreies WebP 26% kleiner als PNG sind. AVIF verbessert WebP bei Fotos häufig erneut, mit den größten Zuwächsen bei glatten Farbverläufen, Himmel und Haut, wobei JPEG's 8x8 Blöcke zuerst angezeigt werden.
Drei Warnungen halten diese Zahlen ehrlich.
- Qualitätszahlen stimmen nicht formateübergreifend überein. Ein JPG in Qualität 80, ein WebP bei 80 und ein AVIF bei 80 sind nicht die gleiche visuelle Qualität, und verschiedene Encoder für das gleiche Format sind auch anderer Meinung Vergleichen Sie Dateien, indem Sie sie betrachten, oder durch eine Metrik wie SSIM, niemals durch den Schieberwert.
- Bilder mit geringer Detailgenauigkeit sparen weniger. Eine flache Abbildung oder ein bereits stark komprimiertes JPEG hat wenig zu quetschen.
- Neukodierung eines verlustbehafteten Dateistapels Verluste. Die Konvertierung eines JPGs in AVIF oder WebP geht von einem Bild aus, das bereits an Details verloren hat Kodieren Sie aus der ursprünglichen Kameradatei, PNG oder hochwertigem Master, wann immer Sie können.
Wie wichtig ist die Formatwahl für das Seitengewicht?
Auf bildlastigen Seiten ist es am wichtigsten, denn Bilder haben meist den größten Anteil an dem, was ein Besucher herunterlädt Die Arithmetik ist unkompliziert Eine Katalogseite mit 40 Produktfotos bei etwa 400 KB trägt jeweils 16 MB Bilder als JPG, bei den 25 bis 34%, die Google-Berichte für WebP speichern, landet derselbe Satz irgendwo zwischen etwa 10,5 und 12 MB. AVIF schneidet typischerweise noch weiter obendrauf.
Bei einer schnellen Desktop-Verbindung ist der Unterschied bescheiden Bei einem Telefon über ein langsames Mobilfunknetz ist mehrere Megabyte die Lücke zwischen einer Seite, die sich schnell einstellt und einer, die Besucher verlassen, und Bildern am oberen Seitenrand werden direkt angezeigt, wie schnell das größte sichtbare Element rendert.
Format ist nicht der einzige Hebel, und oft auch nicht der größte, Ein 4000 px breites Foto an einen 400 px Slot zu senden verschwendet weit mehr Bytes als WebP gegenüber AVIF zu wählen Größe zuerst auf die angezeigte Größe ändern, bereitstellen srcset Varianten für verschiedene Bildschirme, lazy-load Bilder unterhalb der Falte, und dann das Format auswählen, es in der anderen Reihenfolge zu machen optimiert das Falsche.
Wie unterscheiden sie sich in Qualität und Artefakten?
Jedes Format versagt auf seine eigene Weise, wenn es auf kleine Größen verschoben wird, und wenn Sie den Fehler kennen, können Sie ihn auswählen.
JPG zerbricht in sichtbare 8x8-Blöcke und & quot; ringing" schwache Wellen um scharfe Kanten wie Text auf einem Foto WebP' s verlustbehafteter Modus mildert Details und kann, da er Farbe in halber Auflösung speichert, farbige Fransen um dünne rote oder blaue Linien hinterlassen AVIF neigt dazu, feine Textur zu verwischen, anstatt zu blockieren, so dass ein stark komprimiertes AVIF glatt und leicht wachsartig aussieht, was auf Fotos weniger anstößig und bei Stoff, Haaren und Blattwerk deutlicher ist.
Für Grafiken mit harten Kanten, flacher Farbe und Text ist keiner der verlustbehafteten Modi ideal PNG oder verlustfreies WebP hält Kanten exakt.
Auch das Ladeverhalten unterscheidet sich T.81 definiert einen progressiven Modus für JPEG, bei dem zuerst eine unscharfe Version des ganzen Bildes erscheint und sich mit dem Eintreffen weiterer Daten schärft, so dass sich ein großes progressives JPG bei einer langsamen Verbindung schnell anfühlt, noch bevor es fertig ist WebP und AVIF als üblicherweise serviertes Zeichnen nur, wenn genug von der Datei angekommen ist, was ihre kleinere Größe normalerweise ausgleicht Bei sehr großen Heldenbildern über schlechten Verbindungen kann dieser Unterschied sichtbar sein, und es ist ein Grund mehr, die Größe zu ändern, bevor man ein Format wählt.
Wo passen PNG und GIF?
Keines von beiden ist ein Fotoformat, und keines konkurriert direkt mit den drei oben genannten. PNG, definiert in der W3 C PNG Spezifikation, ist verlustfrei: die richtige Wahl für Screenshots, Diagramme, Logos und Bearbeitungsmaster, und die falsche für Fotografien, die es in mehrfacher Größe eines JPG speichert GIF ist auf 256 Farben pro Frame beschränkt und überlebt hauptsächlich für kurze Animationen an Orten, die nichts Neueres abspielen werden.
Auf einer Website sind beide meist besser als WebP oder AVIF bedient: verlustfrei oder hochwertig verlustbehaftet für Grafiken im PNG-Stil, animiertes WebP für Clips im GIF-Stil Außerhalb des Browsers bleibt PNG das sichere Format für alles mit Transparenz, da JPG es nicht halten kann.
Welches Format unterstützt Transparenz, HDR und Animation?
AVIF unterstützt alle drei, WebP unterstützt Transparenz und Animation, aber kein HDR, und JPG unterstützt keines davon.
Transparenz. AVIF speichert Alpha als Hilfsbild, und WebP verfügt über einen Alphakanal sowohl im verlustbehafteten als auch im verlustfreien Modus, kann entweder einen Produktausschnitt mit weicher Kante in einem Bruchteil einer PNG' s-Größe halten JPG hat keine Transparenz, daher muss jede transparente Fläche bei der Konvertierung mit einer einfarbigen Farbe gefüllt werden.
HDR und breite Farbe. AVIF kann 10 oder 12 Bit pro Kanal verwenden, was HDR-Fotos von aktuellen Telefonen und Kameras benötigen, um bei hellem Himmel keine Streifenbildung zu vermeiden. WebP und JPG sind 8-Bit.
Animation. WebP-Animationen werden häufig als kleinerer Ersatz für GIF verwendet. AVIF definiert Bildsequenzen, obwohl die Unterstützung für animiertes AVIF in Software außerhalb von Browsern dünner ist.
Wo schlägt jedes Format noch fehl?
Unterstützung im Inneren aktueller Browser ist für alle drei gelöst Unterstützung überall sonst ist, wo die Wahl beißt.
AVIF-Displays in Chrome ab Version 85, Firefox ab 93, Safari ab 16, und Edge ab 121. Ältere Browser, ältere Betriebssystem-Fotobetrachter, viele Office-Suiten, und eine lange Liste von Upload-Formularen akzeptieren es nicht, ein AVIF von einer Webseite zu speichern und in eine Präsentation zu legen, ist der klassische Misserfolg.
WebP ist weiter Jeder aktuelle Browser zeigt es an und die meisten modernen Betriebssysteme öffnen es, aber einige E-Mail-Clients, Printdienste und ältere Desktop-Software lehnen es immer noch ab.
JPG öffnet sich auf im Wesentlichen jedem Gerät, jeder Anwendung und jedem Formular Deshalb bleibt es das richtige Format für jedes Bild, dessen Ziel Sie nicht kontrollieren.
Welches Format soll man verwenden? eine Entscheidungstabelle
Entscheiden Sie zuerst nach Ziel, dann nach Inhalt.
| Situation | einsetzen | wieso |
|---|---|---|
| Helden - und Produktbilder auf der eigenen Seite | AVIF, mit WebP- und JPG-Fallbacks | Kleinste Bytes auf den schwersten Bildern |
| Allgemeine Site-Bilder, einfache Pipeline | WebP, mit JPG-Fallback | Nahezu universelle Browserunterstützung, schnell zu kodieren |
| Pro Anfrage generierte Bilder | WebP oder JPG | Die AVIF-Kodierungskosten erhöhen die Latenz |
| Fotos mit HDR oder breiter Farbe | Avif | Nur einer der drei mit 10 und 12 Bit |
| Transparente Grafiken im Web | AVIF oder WebP | Alpha bei einem Bruchteil von PNG's Größe |
| E-mail-anhänge | JPG | Jeder Kunde öffnet es |
| Formulare, Marktplätze, ID-Portale hochladen | JPG | Zulasslisten enthalten selten AVIF oder WebP |
| Druck - und Bürodokumente | JPG oder PNG für Grafiken | Software-unterstützung |
| Bearbeitung von Mastern und Archiven | Originalformat, PNG oder TIFF | Vermeiden Sie wiederholte verlustbehaftete Kodierung |
Das Muster ist einfach: moderne Formate für die Lieferung, JPG für den Austausch, verlustfrei für Master.
Wie bedient man AVIF und WebP mit einem JPG-Fallback?
Verwenden Sie die <picture> Element. Der Browser geht über den <source> Liste in der Reihenfolge und nimmt den ersten Typ, den es unterstützt, und fällt auf den zurück <img>(wie durch die definiert WHATWG HTML picture Element:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
Ein Browser mit AVIF-Unterstützung lädt nur das AVIF herunter, einer ohne AVIF, aber mit WebP lädt das WebP herunter, und alles andere bekommt das JPG. Es wird kein Format zweimal heruntergeladen.
Die Alternative ist die serverseitige Verhandlung: Der Browser sendet eine Accept Kopfzeile wie image/avif,image/webp,*/*und der Server oder CDN gibt das beste Format zurück, das er hat, von einer einzelnen URL. Dies hält die Markierung einfach, erfordert jedoch, dass der Cache in diesem Header variiert, wie in HTTP's Inhaltsverhandlungsregeln in beschrieben RFC 9110drohen
Um die drei Versionen in einem Build-Schritt zu generieren, schreibt die Node.js-Bibliothek alle scharf:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
Die Qualitätswerte unterscheiden sich absichtlich, da die Skalen nicht formateübergreifend übereinstimmen Überprüfen Sie die Ausgabe visuell, bevor Sie sich für Zahlen entscheiden.
Wie konvertiert man zwischen AVIF, WebP und JPG ohne Upload?
Verwenden Sie einen clientseitigen Konverter, der das Bild innerhalb der Browser-Registerkarte dekodiert und neu kodiert, damit die Datei Ihr Gerät nie verlässt. Die Toolz-Konverter werden nach Richtung aufgeteilt.
Von AVIF zu etwas, das andere Programme akzeptieren. der AVIF-zu-JPG-Konverter Ist der Fix für ein AVIF von einer Webseite gespeichert, den ein Dokument oder Formular ablehnt Transparente Bereiche werden weiß gefüllt, und eine Notiz unter dem Ergebnis sagt es Der Quality-Slider läuft von 10 bis 100 und beginnt bei 90. Wenn das Bild einen transparenten Hintergrund hat, der überleben muss, Konvertieren Sie den AVIF in PNG Stattdessen behält der Alphakanal den dekodierten Pixel verlustfrei.
Die Dekodierung von AVIF verwendet den Browser' eigenen AVIF-Decoder, der Konverter benötigt also einen Browser, der AVIF: Chrome, Edge, Firefox, oder Safari 16 und höher anzeigt, kann der Browser die Datei nicht öffnen, so heißt es in der ZeileEin animiertes AVIF wird als Standbild gelesen.
Von WebP zu JPG. Aus den gleichen Gründen, die WebP zu JPG Verwandeln Sie ein heruntergeladenes .webp in eine Datei, die sich überall öffnet, mit der gleichen weißen Füllung für Transparenz.
Von JPG und PNG zu WebP. In die andere Richtung gehen JPG zu WebP Verkleinert Fotos für die Veröffentlichung und PNG zu WebP Tut dasselbe für Screenshots und transparente Grafiken, während der Alphakanal beibehalten wird Kodierung verwendet den canvas-Encoder von browser' s. Aktueller Chrome, Edge und Firefox können WebP schreiben; ein Browser, der keinen eindeutigen Fehler bekommen kann, anstatt ein PNG, das in .webp umbenannt wurde.
Was die Konverter nicht tun. Toolz liest AVIF, schreibt es aber nicht, da Browser einen AVIF-Encoder nicht zuverlässig Webseiten aussetzen Um AVIF-Dateien zu erstellen, verwenden Sie ein Build-Tool wie das scharfe Beispiel oben Die Bildkonverter Akzeptiert JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG und PDF und schreibt JPG, PNG, WebP, GIF, ICO, PDF und SVG, das gemischte Chargen abdeckt.
Jede Konvertierung wird durch eine Leinwand gezeichnet, daher werden EXIF-Daten, GPS-Koordinaten und Farbprofile nicht in die Ausgabe kopiert Bilder über 100 Megapixel werden mit einer Nachricht abgelehnt, anstatt die Registerkarte abzustürzenDie Tools sind kostenlos, kein Signup, mit einem täglichen Konvertierungslimit.
Verliert die Konvertierung zwischen AVIF, WebP und JPG an Qualität?
Die Umwandlung in ein verlustbehaftetes Format verliert jedes Mal etwas Detail, die Umwandlung in ein verlustfreies Format nichts weiter Die Richtung entscheidet, was zutrifft.
| Umwandlung | Verlustbehafteter Schritt? | Was ändert sich |
|---|---|---|
| AVIF zu JPG | ja | Zweiter verlustbehafteter Code; Transparenz gefüllt mit Weiß; Datei normalerweise größer |
| AVIF nach PNG | kein | Dekodierte Pixel werden genau gehalten; Transparenz beibehalten; Datei viel größer |
| WebP zu JPG | ja | Zweiter verlustbehafteter Code; Transparenz gefüllt mit Weiß |
| JPG zu WebP | ja | Zweite verlustbehaftete Kodierung zusätzlich zu JPEG's; Datei normalerweise kleiner |
| PNG zu WebP | Normalerweise mit verlustbehaftetem WebP | Transparenz gewahrt; Datei normalerweise viel kleiner |
| Jeder von ihnen an AVIF | Ja, im typischen Gebrauch | Kleinste Datei; langsamste Kodierung |
Es folgen zwei praktische Konsequenzen. Eine Datei, die mehrere verlustbehaftete Konvertierungen durchlaufen hat, verschlechtert sich bei jedem Schritt ein wenig. Vermeiden Sie also Rundreisen wie JPG zu WebP zu JPG. Und die Größe einer konvertierten Datei sagt Ihnen wenig über ihre Qualität aus: Ein in JPG konvertiertes AVIF wird größer, ohne besser zu werden, da der JPG-Encoder mehr Bytes aufwendet, um dasselbe bereits komprimierte Bild zu beschreiben.
Bei einer Qualitätseinstellung um 90 ist ein einzelner extra verlustbehafteter Schritt auf gewöhnlichen Fotos sehr schwer zu erkennen, die Verluste werden bei wiederholten Konvertierungen, Einstellungen geringer Qualität oder Bildern mit feinem Text und scharfen Kanten sichtbar.
Warum won't ein gespeichertes AVIF oder WebP geöffnet?
Das Programm, das es öffnet, hat keinen Decoder für das Format Ein aktueller Browser zeigt das Bild an, weil er dieses Format mit dem Server ausgehandelt hat, aber die Datei auf der Festplatte wird dann an eine Software mit einer älteren oder engeren Liste von Formaten übergeben: eine Office-Suite, ein älterer Foto-Viewer, ein E-Mail-Client oder ein Upload-Formular' s-Zulassungsliste.
Umbenennen der Datei in .jpg Hilft nicht Die Bytes beginnen immer noch mit einem AVIF ftyp Box oder einem WebP RIFF Header, und ein Programm, das JPEG erwartet, findet keine JPEG-Daten Konvertieren der Datei ist der Fix, und es lohnt sich auch zu prüfen, ob die Seite einen direkten Download-Link bietet, der manchmal eher dem ursprünglichen JPG oder PNG als der ausgehandelten Version dient.
Ist JPG obsolet?
Nr. JPG ist nur veraltet, da das Format, das eine Website an einen aktuellen Browser senden sollte, und selbst dort bleibt es der Fallback in jedem <picture> Element. als Austauschformat, für E-Mail, Formulare, Druck, Bürodokumente und alles, was zu Software geleitet wird, die Sie nicht kontrollieren, ist es immer noch die richtige Voreinstellung, und weder AVIF noch WebP haben es ersetzt.
Die gleiche Logik gilt für das andere Format, das Menschen außerhalb des Browsers verwirrt iPhone-Fotos sind HEIC, ein Geschwister von AVIF im selben HEIF-Container, und der Vergleich von HEIC gegen JPG Erklärt, warum sich diese Dateien unter Windows nicht öffnen Jeder Bildkonverter ist auf der Bildwerkzeuge Hubdrohen
