Drie formaten dekken bijna elke foto op het web vandaag JPG is de standaard voor drie decennia WebP arriveerde in 2010 en wordt nu weergegeven door elke huidige browser AVIF is de nieuwste van de drie, gebouwd op een videocodec, en het maakt meestal de kleinste bestanden Een prestatie-audit zal u vertellen om & quot; afbeeldingen te serveren in moderne formaten", en dan zal een uploadformulier of een e-mailclient het moderne bestand weigeren dat u hebt gemaakt.
Kiezen tussen hen is minder over welk formaat het beste is en meer over waar de afbeelding naartoe gaat Een heldenafbeelding op een landingspagina, een productfoto in een marktplaatsvermelding en een afbeelding die bij een e-mail is gevoegd, hebben verschillende antwoorden Deze gids vergelijkt de drie op de attributen die ervoor beslissen: bestandsgrootte, kwaliteit, transparantie, kleurdiepte, animatie, coderingskosten en ondersteuning buiten de browser Vervolgens geeft het een beslissingstabel en laat zien hoe u deze onderling kunt converteren.
tl;dr: Voor afbeeldingen op een website dient u AVIF eerst met WebP als fallback en JPG als laatste redmiddel, met behulp van de
<picture>element - of serveronderhandeling; AVIF is meestal het kleinst, WebP is vlak achter en sneller te coderen, en JPG opent overal Voor afbeeldingen die de browser verlaten (e-mail, uploads, print, kantoorsoftware), gebruik JPG, of PNG wanneer transparantie ertoe doet Bestanden andere programma's accepteren, de AVIF naar JPG converter en WebP naar JPG draait client-side, niets geüpload, gratis, geen aanmelding; JPG naar WebP en PNG naar WebP gaan de andere kant op.
Wat zijn AVIF, WebP en JPG?
Alle drie zijn het rasterbeeldformaten voor foto's, en ze verschillen vooral in de leeftijd en het ontwerp van hun compressie.
JPG (JPEG) is de stilstaande beeldmethode die is gestandaardiseerd in ITU-T-aanbeveling T.81 in 1992. Het verdeelt het beeld in blokken van 8x8 pixels, transformeert elk met een discrete cosinustransformatie en gooit het hoogfrequente detail weg dat het oog het minst opmerkt. Bestanden worden meestal in de JFIF-container gewikkeld ITU-T T.871.
WEBP is Google's-formaat, nu gespecificeerd in RFC 9649. De verliesgevende modus maakt gebruik van de keyframecodering van de VP8-videocodec en heeft een aparte verliesvrije modus, plus transparantie en animatie. De gids aan wat WebP is en waarom opgeslagen afbeeldingen als.webp uitkomen dekt het in de diepte.
voorwerp is het AV1 Image File Format, uitgegeven door de Alliance for Open Media als de AVIF-specificatie. Het slaat afbeeldingen op die zijn gecodeerd met de AV1 videocodec in een HEIF-container wordt dezelfde boxstructuur gebruikt die iPhone HEIC-foto's gebruiken AV1 wordt aangeboden onder een royaltyvrije patentlicentie van de Alliance for Open Media, wat een van de redenen is waarom browsers AVIF sneller adopteerden dan HEIC.
AVIF vs WebP vs JPG: de vergelijkingstabel
AVIF leidt op het gebied van compressie en mogelijkheden, JPG leidt op het gebied van compatibiliteit en coderingssnelheid, en WebP zit er op bijna elke rij tussenin.
| Attribuut | voorwerp | WEBP | JPG |
|---|---|---|---|
| Specificatie | AOMedia AVIF, AV1-codec | IETF RFC 9649 | ITU-T T.81 en T.871 |
| Geïntroduceerd | 2019 | 2010 | 1992 |
| Compressie | Verlies of verliesvrij | Verlies of verliesvrij | verlies- |
| Typische fotogrootte | Kleinste | Small | Grootste van de drie |
| Bitdiepte | 8, 10 of 12 bits per kanaal | 8 bits per kanaal | 8 bits per kanaal in de praktijk |
| HDR en brede kleur | ja | heel weinig | heel weinig |
| doorzichtigheid | Volledige alfa | Volledige alfa | niet een |
| Animatie | Beeldreeksen | ja | heel weinig |
| Coderingssnelheid | Langzaam, CPU-zwaar bij hoge inspanning | Matig | onbeweeglijk |
| Browserweergave | Chrome 85, Firefox 93, Safari 16, Edge 121 en hoger | Alle huidige browsers | Universal |
| Desktop apps, e-mail, formulieren uploaden | Zwakste | Patchy | Universal |
| Beste gebruik | Grootste webafbeeldingen waar bytes het belangrijkst zijn | Algemene webbeelden, brede terugval | Alles wat de browser verlaat |
De rij die mensen verrast is coderingssnelheid AVIF' s kleine bestanden komen van een encoder die hard zoekt naar de beste manier om elk blok te coderen, en die zoekopdracht kost tijd Een bouwstap die duizenden productafbeeldingen in minuten naar WebP converteert kan veel langer duren voor AVIF bij een instelling met hoge inspanning Voor een site die één keer codeert en miljoenen keren serveert, is de handel meestal de moeite waard Voor afbeeldingen die per verzoek direct worden gegenereerd, is dit misschien niet het geval.
Welk formaat maakt de kleinste bestanden?
AVIF maakt meestal de kleinste bestanden met vergelijkbare visuele kwaliteit, WebP is de volgende en JPG is de grootste. De grootte van de opening hangt sterk af van de afbeelding en de encoderinstellingen.
Voor WebP is er een gepubliceerd referentiepunt: Google's WebP-overzicht rapporteert verliesgevende WebP-bestanden die 25 tot 34% kleiner zijn dan vergelijkbare JPEG bij gelijkwaardige SSIM-kwaliteit, en verliesvrije WebP 26% kleiner dan PNG. AVIF verbetert gewoonlijk weer WebP voor foto's, met de grootste winst op vloeiende hellingen, luchten en huid, waar JPEG's 8x8 blokken als eerste worden weergegeven.
Drie waarschuwingen houden die cijfers eerlijk.
- Kwaliteitsnummers komen niet overeen tussen formaten. Een JPG op kwaliteit 80, een WebP op 80 en een AVIF op 80 zijn niet dezelfde visuele kwaliteit, en verschillende encoders voor hetzelfde formaat zijn het daar ook niet mee eens Vergelijk bestanden door ernaar te kijken, of door een metriek zoals SSIM, nooit door de schuifwaarde.
- Laag-detail afbeeldingen besparen minder. Een platte illustratie of een toch al zwaar samengedrukte JPEG laat weinig meer knijpen.
- Het opnieuw coderen van verliesgevende bestand stapelt verliezen. Het converteren van een JPG naar AVIF of WebP begint bij een afbeelding die al details heeft verloren. Codeer wanneer je maar kunt vanuit het originele camerabestand, PNG of hoogwaardige master.
Hoeveel is de formaatkeuze van belang voor het paginagewicht?
Het maakt het meest uit op pagina's met veel afbeeldingen, omdat afbeeldingen meestal het grootste deel zijn van wat een bezoeker downloadt. De rekenkunde is eenvoudig. Een cataloguspagina met 40 productfoto's van ongeveer 400 KB bevat elk 16 MB aan afbeeldingen als JPG. Bij de 25 tot 34% besparing van Google-rapporten voor WebP komt dezelfde set ergens tussen de 10,5 en 12 MB terecht. AVIF trimt daar doorgaans verder op.
Bij een snelle desktopverbinding is het verschil bescheiden Op een telefoon over een langzaam mobiel netwerk is enkele megabytes de kloof tussen een pagina die snel tot rust komt en een pagina die bezoekers verlaten, en afbeeldingen bovenaan de pagina worden rechtstreeks weergegeven in hoe snel het grootste zichtbare element wordt weergegeven.
Formaat is niet de enige hendel, en vaak ook niet de grootste Het verzenden van een 4000 px brede foto naar een 400 px slot verspilt veel meer bytes dan het kiezen van WebP boven AVIF. Pas eerst het formaat aan naar de weergegeven grootte, geef srcset varianten voor verschillende schermen, lui-laad afbeeldingen onder de vouw, en kies dan het formaat Doe het in de andere volgorde optimaliseert het verkeerde.
Hoe verschillen ze in kwaliteit en artefacten?
Elk formaat mislukt op zijn eigen manier wanneer het naar kleine formaten wordt gepusht, en als u de fout kent, kunt u kiezen.
JPG breekt in zichtbare 8x8 blokken en "ringing", zwakke rimpelingen rond scherpe randen zoals tekst op een foto WebP' s lossy mode verzacht details en, omdat het kleur op halve resolutie opslaat, kan gekleurde randen rond dunne rode of blauwe lijnen achterlaten AVIF heeft de neiging om fijne textuur te vervagen in plaats van te blokkeren, dus een zwaar samengedrukte AVIF ziet er glad en licht wasachtig uit, wat minder verwerpelijk is op foto's en meer merkbaar is in stof, haar en bladeren.
Voor graphics met harde randen, platte kleur en tekst is geen van de lossy modi ideaal PNG of lossless WebP houdt randen exact.
Het laadgedrag verschilt ook T.81 definieert een progressieve modus voor JPEG, waarin een wazige versie van het hele beeld als eerste verschijnt en verscherpt naarmate er meer gegevens binnenkomen, dus een grote progressieve JPG voelt snel aan bij een langzame verbinding, zelfs voordat deze is voltooid WebP en AVIF zoals gewoonlijk geserveerd tekenen slechts zodra er voldoende van het bestand is aangekomen, wat hun kleinere formaat meestal goedmaakt Op zeer grote heldenafbeeldingen over slechte verbindingen kan dat verschil zichtbaar zijn, en het is een reden te meer om het formaat te wijzigen voordat u een formaat kiest.
Waar passen PNG en GIF?
Geen van beide is een fotoformaat, en geen van beide concurreert rechtstreeks met de drie hierboven. PNG, gedefinieerd in de W3C PNG specificatie, is verliesvrij: de juiste keuze voor screenshots, diagrammen, logo's en montagemasters, en de verkeerde voor foto's, die het opslaat op meerdere malen de grootte van een JPG. GIF is beperkt tot 256 kleuren per frame en overleeft voornamelijk voor korte animaties op plaatsen die niets nieuwers zullen afspelen.
Op een website zijn beide meestal beter gediend als WebP of AVIF: verliesvrij of kwalitatief goed verliesgevend voor PNG-achtige graphics, geanimeerde WebP voor GIF-achtige clips Buiten de browser blijft PNG het veilige formaat voor alles met transparantie, aangezien JPG het niet kan vasthouden.
Welk formaat ondersteunt transparantie, HDR en animatie?
AVIF ondersteunt ze alle drie, WebP ondersteunt transparantie en animatie, maar niet HDR, en JPG ondersteunt geen van deze.
Transparantie. AVIF slaat alfa op als hulpafbeelding, en WebP heeft een alfakanaal in zowel verliesgevende als verliesvrije modi. Ofwel kan een productuitsparing met een zachte rand op een fractie van een PNG' s-grootte worden gehouden. JPG heeft geen transparantie, dus elk transparant gebied moet worden gevuld met een effen kleur bij het converteren ernaar.
HDR en brede kleur. AVIF kan 10 of 12 bits per kanaal gebruiken, dat is wat HDR-foto's van recente telefoons en camera's nodig hebben om banding in heldere luchten te voorkomen WebP en JPG zijn 8-bit.
Animatie. WebP-animaties worden veel gebruikt als kleinere vervanging voor GIF. AVIF definieert beeldreeksen, hoewel de ondersteuning voor geanimeerde AVIF in software buiten browsers dunner is.
Waar mislukt elk formaat nog?
Ondersteuning binnen de huidige browsers is voor alle drie opgelost. Ondersteuning overal elders is waar de keuze bijt.
AVIF-displays in Chrome vanaf versie 85, Firefox vanaf 93, Safari vanaf 16 en Edge vanaf 121 Oudere browsers, oudere fotokijkers van het besturingssysteem, veel kantoorsuites en een lange lijst met uploadformulieren accepteren het niet Een AVIF opslaan vanaf een webpagina en deze in een presentatie laten vallen is de klassieke mislukking.
WebP is verder Elke huidige browser geeft het weer en de meeste moderne besturingssystemen openen het, maar sommige e-mailclients, printservices en oudere desktopsoftware weigeren het nog steeds.
JPG opent op in wezen elk apparaat, elke toepassing en elk formulier Daarom blijft het het juiste formaat voor elke afbeelding waarvan u de bestemming niet beheert.
Welk formaat moet je gebruiken? een beslissingstabel
Bepaal eerst op bestemming en vervolgens op inhoud.
| betrekking | goed doen | waarom |
|---|---|---|
| Held en productafbeeldingen op uw eigen site | AVIF, met WebP- en JPG-fallbacks | Kleinste bytes op de zwaarste afbeeldingen |
| Algemene siteafbeeldingen, eenvoudige pijplijn | WebP, met JPG-fallback | Bijna universele browserondersteuning, snel te coderen |
| Beelden gegenereerd per aanvraag | WebP of JPG | De kosten voor AVIF-codering voegen latentie toe |
| Foto's met HDR of brede kleur | voorwerp | Slechts één van de drie met 10 en 12 bits |
| Transparante graphics op het web | AVIF of WebP | Alfa bij een fractie van PNG' s grootte |
| E-mailbijlagen | JPG | Elke cliënt opent het |
| Formulieren uploaden, marktplaatsen, ID-portals | JPG | Toelagenlijsten bevatten zelden AVIF of WebP |
| Druk - en kantoordocumenten | JPG, of PNG voor grafische afbeeldingen | Software ondersteuning |
| Bewerken van meesters en archieven | Origineel formaat, PNG of TIFF | Vermijd herhaalde lossy codering |
Het patroon is eenvoudig: moderne formaten voor levering, JPG voor uitwisseling, verliesvrij voor masters.
Hoe serveer je AVIF en WebP met een JPG fallback?
Gebruik de <picture> element. De browser loopt door de <source> lijst in volgorde en neemt het eerste type dat het ondersteunt, terugvallend naar de <img>, zoals gedefinieerd door de WHATWG HTML picture elementpiepsel
<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>
Een browser met AVIF-ondersteuning downloadt alleen de AVIF. Eén zonder AVIF maar met WebP downloadt de WebP, en al het andere krijgt de JPG. Er wordt geen formaat tweemaal gedownload.
Het alternatief is onderhandeling aan de serverzijde: de browser verzendt een Accept koptekst zoals image/avif,image/webp,*/*, en de server of CDN retourneert het beste formaat dat hij heeft van een enkele URL. Dit houdt de opmaak eenvoudig, maar vereist dat de cache op die header varieert, zoals beschreven in HTTP's regels voor inhoudsonderhandeling in RFC 9110.
Om de drie versies in een bouwstap te genereren, schrijft de Node.js-bibliotheek ze allemaal scherp:
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')
De kwaliteitswaarden verschillen expres, aangezien de schalen niet overeenkomen tussen de formaten Controleer de uitvoer visueel voordat u zich op getallen vestigt.
Hoe converteert u tussen AVIF, WebP en JPG zonder te uploaden?
Gebruik een client-side converter, die de afbeelding binnen het tabblad van de browser decodeert en opnieuw codeert, zodat het bestand uw apparaat nooit verlaat De Toolz-converters worden gesplitst op richting.
Van AVIF naar iets wat andere programma's accepteren. de AVIF naar JPG converter is de fix voor een AVIF opgeslagen van een website die een document of formulier weigert Transparante gebieden zijn gevuld met wit, en een notitie onder het resultaat zegt dat De Quality slider loopt van 10 tot 100 en begint bij 90 Wanneer de afbeelding een transparante achtergrond heeft die moet overleven, converteer de AVIF naar PNG in plaats daarvan, die het alfakanaal houdt en de gedecodeerde pixels verliesvrij opslaat.
Decodering van AVIF maakt gebruik van de browser' een eigen AVIF-decoder, dus de converter heeft een browser nodig die AVIF: Chrome, Edge, Firefox of Safari 16 en hoger weergeeft Als de browser het bestand niet kan openen, zegt de rij dat een geanimeerde AVIF wordt gelezen als een stilstaande afbeelding.
Van WebP naar JPG. Om dezelfde redenen, WebP naar JPG maakt van een gedownloade .webp een bestand dat overal wordt geopend, met dezelfde witte vulling voor transparantie.
Van JPG en PNG naar WebP. De andere kant op gaan, JPG naar WebP verkleint foto's voor publicatie, en PNG naar WebP doet hetzelfde voor screenshots en transparante graphics met behoud van het alfakanaal Encoding gebruikt de browser' s canvas encoder Huidige Chrome, Edge en Firefox kunnen WebP schrijven; een browser die geen duidelijke fout kan krijgen in plaats van een PNG hernoemd naar .webp.
Wat de converters niet doen. Toolz leest AVIF maar schrijft het niet, omdat browsers een AVIF-encoder niet op betrouwbare wijze aan webpagina's blootstellen Om AVIF-bestanden te produceren, gebruikt u een buildtool zoals het scherpe voorbeeld hierboven De Image Converter accepteert JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG en PDF en schrijft JPG, PNG, WebP, GIF, ICO, PDF en SVG, dat gemengde batches omvat.
Elke conversie wordt door een canvas getrokken, dus EXIF-gegevens, GPS-coördinaten en kleurprofielen worden niet in de uitvoer gekopieerd Afbeeldingen van meer dan 100 megapixels worden geweigerd met een bericht in plaats van op het tabblad te crashen De tools zijn gratis, geen aanmelding, met een dagelijkse conversielimiet.
Verliest conversie tussen AVIF, WebP en JPG kwaliteit?
Converteren naar een lossy formaat verliest elke keer weer wat detail, en converteren naar een lossless formaat verliest verder niets De richting bepaalt welke van toepassing is.
| verandering | Verliesstap? | Wat verandert? |
|---|---|---|
| AVIF naar JPG | ja | Tweede verliesgevende code; transparantie gevuld met wit; bestand meestal groter |
| AVIF naar PNG | heel weinig | Gedecodeerde pixels precies bewaard; transparantie behouden; bestand veel groter |
| WebP naar JPG | ja | Tweede verliesgevende code; transparantie gevuld met wit |
| JPG naar WebP | ja | Tweede verliesgevende code bovenop JPEG's; bestand meestal kleiner |
| PNG naar WebP | Meestal met verliesgevende WebP | Transparantie behouden; bestand meestal veel kleiner |
| Elk van hen naar AVIF | Ja, in typisch gebruik | Kleinste bestand; langzaamste codering |
Er volgen twee praktische gevolgen. Een bestand dat verschillende verliesgevende conversies heeft ondergaan, wordt bij elke stap een beetje afgebroken, dus vermijd retourvluchten zoals JPG naar WebP naar JPG. En de grootte van een geconverteerd bestand vertelt je weinig over de kwaliteit ervan: een AVIF geconverteerd naar JPG wordt groter zonder beter te worden, omdat de JPG-encoder meer bytes uitgeeft aan het beschrijven van hetzelfde reeds gecomprimeerde beeld.
Bij een kwaliteitsinstelling rond de 90 is een enkele extra verliesgevende stap erg moeilijk te zien op gewone foto's. De verliezen worden zichtbaar bij herhaalde conversies, instellingen van lage kwaliteit of afbeeldingen met fijne tekst en scherpe randen.
Waarom won't een opgeslagen AVIF of WebP geopend?
Het programma dat het opent heeft geen decoder voor het formaat Een huidige browser toont de afbeelding omdat het dat formaat met de server heeft onderhandeld, maar het bestand op schijf wordt vervolgens overhandigd aan software met een oudere of smallere lijst met formaten: een kantoorpakket, een oudere fotoviewer, een e-mailclient of een uploadformulier ' s allow-list.
Hernoemen van het bestand naar .jpg helpt niet De bytes beginnen nog steeds met een AVIF ftyp doos of een WebP RIFF header, en een programma dat JPEG verwacht, vindt geen JPEG-gegevens Converteren van het bestand is de oplossing, en het is ook de moeite waard om te controleren of de site een directe downloadlink biedt, die soms de originele JPG of PNG bedient in plaats van de onderhandelde versie.
Is JPG verouderd?
Nee. JPG is alleen verouderd als het formaat dat een website naar een huidige browser moet sturen, en zelfs daar blijft het de terugval in elke browser <picture> element. Als uitwisselingsformaat is het voor e-mail, formulieren, afdrukken, kantoordocumenten en alles wat naar software gaat die u niet beheert, nog steeds de juiste standaard, en noch AVIF noch WebP heeft deze vervangen.
Dezelfde logica geldt voor het andere formaat dat mensen buiten de browser in verwarring brengt iPhone-foto's zijn HEIC, een broer of zus van AVIF in dezelfde HEIF-container, en de vergelijking van HEIC versus JPG legt uit waarom die bestanden niet openen op Windows Elke beeldomzetter wordt vermeld op de hub voor beeldhulpmiddelen.
