Stel je dit voor: het beste beeldformaat voor het web in 2019

JPEG, WEBP, HEIC, AVIF? Deze gids helpt u bij het kiezen.

Na decennia van de ongeëvenaarde dominantie van JPEG, zijn de afgelopen jaren getuige geweest van het verschijnen van nieuwe formaten - WebP en HEIC - die deze positie uitdagen. Ze worden slechts gedeeltelijk, maar aanzienlijk ondersteund door belangrijke spelers in webbrowsers en mobiele besturingssystemen. Een ander nieuw afbeeldingsformaat - AVIF - zal naar verwachting in 2019 het toneel betreden met de belofte over het hele web te vegen.

In dit artikel beginnen we met een korte herziening van de klassieke formaten, gevolgd door een beschrijving van WebP en HEIC / HEIF. Vervolgens gaan we verder met het verkennen van AVIF en eindigen we met een samenvatting van alle belangrijke punten.

Opmerkingen over voor- en nadelen bouwen voort op zowel de beoordeling van beschikbare gezaghebbende rapporten als observaties uit de eerste hand tijdens de ontwikkeling en inzet van tools voor beeldoptimalisatiepijplijnen in e-commerce workflows.

Klassieke afbeeldingsindelingen voor internet met universele ondersteuning

Laten we ons in chronologische volgorde herinneren aan de drie belangrijkste klassieke indelingen voor webafbeeldingen.

GIF

GIF ondersteunt LZW-compressie zonder verlies en meerdere frames waarmee we eenvoudige animaties kunnen maken.

De belangrijkste beperking van dit formaat is dat het beperkt is tot 256 kleuren. Dit was redelijk toen het eind jaren 80 werd gemaakt, omdat dezelfde beperking gold voor bestaande displays. Met de verbetering van de weergavetechnologie werd het echter duidelijk dat het niet geschikt was om vloeiende kleurovergangen te reproduceren, zoals die in fotografische afbeeldingen. We kunnen de kleurbanden die het produceert gemakkelijk herkennen.

GIF maakt echter lichtgewicht animatie met universele ondersteuning mogelijk. Deze functie heeft het formaat tot op de dag van vandaag levend gehouden in gebruikssituaties die niet gevoelig zijn voor kwaliteitsproblemen.

JPEG

De koning van de afbeeldingsindelingen voor internet is ontwikkeld ter ondersteuning van workflows voor digitale fotografie.

Met een gebruikelijke 24-bits diepte biedt het veel meer kleurresolutie (niet te verwarren met bereik of gamma) dan het menselijk oog kan onderscheiden. Het ondersteunt compressie met verlies door gebruik te maken van bekende mechanismen van het menselijk gezichtsvermogen.

Onze ogen zijn gevoeliger voor middelgrote schalen dan voor fijne details. Bijgevolg kunnen we met JPEG fijne details (hoge ruimtelijke frequenties) weggooien met een hoeveelheid die wordt geregeld door een kwaliteitsfactor. Minder kwaliteit betekent dat minder details behouden blijven. Bovendien zijn we veel gevoeliger voor details met een hoog luminantiecontrast dan details met alleen chromatisch contrast.

JPEG hercodeert dus intern RGB-afbeeldingen (rood, groen en blauw) in één luminantie en twee chromakanalen. Dit stelt ons in staat om chroma-subsampling te gebruiken om meer details alleen in de chromakanalen weg te gooien. Het is vermeldenswaard dat JPEG afbeeldingen codeert in blokken van 8x8 pixels.

Naarmate we de kwaliteitsfactor verminderen en / of agressievere chroma-subsampling toepassen, beginnen we steeds meer artefacten van beltonen, halo's, blokkering of vervaging te krijgen. Een probleem met JPEG is dat, afhankelijk van de beeldinhoud, artefacten kunnen verschijnen met verschillende kwaliteitsfactorwaarden. Het wildste verschil verschijnt wanneer de effecten op natuurlijke fotografie worden vergeleken met de effecten op illustraties. Omdat illustraties (vormen, lettertypen) meestal afhankelijk zijn van scherpe randen, beginnen ze artefacten te produceren, zelfs voor kleine hoeveelheden weggegooide details.

Voor foto's levert JPEG gemakkelijk een vermindering van het bestandsgewicht met een factor 10 met nauwelijks waarneembare artefacten, vergeleken met verliesloze compressie.

PNG

Dit grafische formaat zonder verlies is ontwikkeld om GIF te vervangen en de problemen met kleurbanden (en licenties) aan te pakken. Het was nodig voor afbeeldingen met een aanzienlijke hoeveelheid illustraties, waarvoor JPEG grote artefacten produceerde, zelfs met minimale compressieverhoudingen.

Het ondersteunt transparantie en een verbeterde compressie in vergelijking met GIF. Aangezien het geen informatie weggooit, produceert PNG geen artefacten. Dit gaat natuurlijk ten koste van een zwaarder beeldgewicht in aanwezigheid van veel verschillende kleurgradiënten, in vergelijking met lossy compressie.

Het slaagt erin een frequent kenmerk van kunstwerken te exploiteren: in tegenstelling tot fotografie - dat een continuüm van kleuren met subtiele variaties heeft - hebben kunstfoto's meestal weinig goed gedefinieerde kleuren.

PNG comprimeert dus afbeeldingen door grote hoeveelheden pixels toe te wijzen aan een eenvoudig discreet palet en daardoor veel bits te besparen. Vergeleken met GIF levert het veel hogere kwaliteit met meestal veel minder bytes.

Nieuwkomers met gedeeltelijke ondersteuning: WEBP en HEIC op basis van HEVC

Mechanismen die door videocodecs worden gebruikt om streams te comprimeren, kunnen worden ingedeeld in twee hoofdtypen: interframe en intraframe. Terwijl de eerste de ontslagen in de loop van de tijd exploiteert, richten intra-frame mechanismen zich op het verminderen van redundantie binnen een bepaald frame, zonder enige afhankelijkheid van de rest. Dit compressiemechanisme kan worden toegepast op stilstaande beelden.

De explosie van het delen van video's - met mobiele netwerken in het hart - en de gestage toename van de schermresolutie hebben de inspanningen voor nieuwe coderingsstandaarden gedreven om de hoogst mogelijke compressie-efficiëntie te bereiken.

Er ontstaan ​​dus nieuwe beeldformaten als afgeleiden van de nieuwe videocoderingsstandaarden. Deze nieuwe afbeeldingsindelingen bieden grotere functiesets dan JPEG en beloven relevante besparingen in het bestandsgewicht met verbeterde visuele kwaliteit.

WebP

Google heeft dit formaat ontwikkeld met als doel een enkel webformaat te bieden voor alle typische gebruikssituaties.

Belangrijk is dat het streeft naar lichtere afbeeldingen dan JPEG, zonder boetes op visuele kwaliteit. Het gebruikt meer complexe bewerkingen - zoals blokvoorspelling - en is een afgeleide van de VP8-videocodec. Het ondersteunt compressie zonder verlies en in tegenstelling tot JPEG, maakt het transparantie en animaties mogelijk die afbeeldingen gecodeerd combineren met compressie zonder verlies en verlies.

In principe zou het moeten dienen als vervanging voor JPEG, PNG en GIF. Een belangrijk nadeel is het gebrek aan universele ondersteuning. Tot voor kort was WebP beperkt tot door Google ondersteunde software zoals de Chrome-browser en Android-applicaties.

Met de aankondiging dat Edge en Firefox (behalve iOS Firefox) in 2019 ondersteuning voor WebP zullen introduceren, wint het duidelijk aan grip. Het is ook vermeldenswaard dat Apple - Safari en iOS - WebP nog niet ondersteunt.

HEIC / heif

Dit formaat brengt een belangrijke evolutie in twee verschillende opzichten.

Ten eerste ondersteunt de bestandscontainer de grootste functieset van de beschikbare beeldformaten. Het ondersteunt bijvoorbeeld multi-frame afbeeldingen met multi-frame compressie - een belangrijke functie voor efficiënte HDR-, multi-focus- of multi-view afbeeldingen.

Ten tweede ondersteunt het vele soorten niet-beeldgegevens met een opmerkelijke flexibiliteit. Momenteel zijn de meeste afbeeldingen die deze container gebruiken gecomprimeerd met een afgeleide voor afbeeldingen van de H265 / HEVC-videocodec, ontwikkeld om efficiënt om te gaan met de 4K- en 8K-resoluties van de nieuwste schermen. HEVC-codering omvat complexere bewerkingen met minder beperkingen dan JPEG. Het bereikt een veel hogere compressie-efficiëntie ten koste van iets hogere coderingstijden - helemaal geen probleem in webworkflows.

Net als H265 wordt HEIC op basis van HEVC ondersteund door Apple. Het heeft native ondersteuning in iOS en macOS en wordt ondersteund door Safari-browsers, maar - vooral vanwege patent- en licentieproblemen - wordt het niet ondersteund door de rest (Android, Chrome, Firefox, Windows of Edge).

Er rijst dus een grote vraag: moeten we WEBP / HEIC-alternatieven en JPEG aanbieden, met PNG-versies als fallback?

Laten we elk geval bekijken ...

Moet ik WEBP-derivaten bedienen?

Google beweert dat dit formaat veel lichtere afbeeldingen produceert dan JPEG met vergelijkbare kwaliteit. Onafhankelijke tests hebben echter aangetoond dat dit resultaat niet consistent is bij verschillende kwaliteitsmetingen en dat gewichtsvermindering in de meeste gevallen wordt gecompenseerd door toenemende wazigheid.

In onze eigen tests met e-commerce-afbeeldingen zagen we bestandsbesparingen voor WebP, maar voor de prijs van meer vervaging en minder detail. Hoewel, we zagen ook minder risico op het rinkelen en blokkeren van artefacten, die we visueel irritanter dan wazig zouden vinden.

Omdat WebP geen ondersteuning biedt van Apple-browsers en besturingssystemen, raden we over het algemeen niet aan om WebP-derivaten aan te bieden die concurreren met JPEG. Dergelijke bewegingen zouden de complexiteit van het mediabeheer vergroten met beperkte voordelen.

Deze situatie zou veranderen als Apple WebP zou gaan ondersteunen.

Als dit het geval zou zijn, dan zijn de uitgebreide functieset van WebP en de geproduceerde lichtere afbeeldingen wellicht het gebruik waard, waardoor de workflow voor afbeeldingsbeheer effectief wordt vereenvoudigd.

Om WebP zelf te proberen, is een klassieke tool zoals ImageMagick een goede optie. Het maakt eenvoudig te vergelijken beeldversies met verschillende instellingen voor kwaliteit en resolutie voor zowel WebP als JPEG. Resultaten kunnen worden bekeken met Chrome.

# Converteren naar WEBP-kwaliteit 60
convert input.jpg -quality 60 output_60.webp
# Converteren naar JPEG-kwaliteit 60
convert input.jpg -kwaliteit 60 output_60.jpg
# Converteren naar WEBP-kwaliteit 60 en breedte 450 px
convert input.jpg -resize 450 -kwaliteit 60 output_450_60.webp

Verschillende combinaties van kwaliteit en resolutie hebben in elk geval verschillende effecten, omdat de compressie-algoritmen anders werken. Controleer dus uw relevante bestandsgroottes op verschillende afbeeldingen om inzicht te krijgen in de potentiële besparingen en de beste instellingen voor een bepaald gebruik.

Moet ik HEIC-derivaten bedienen?

Het voordeel van HEIC (ten opzichte van JPEG) is duidelijk. Gewichtsreductie is consistent aanzienlijk - ongeveer 50% - zonder verlies van visuele kwaliteit. De ondersteunde functieset is gewoon geweldig.

Het probleem is opnieuw browser- en besturingssysteemondersteuning.

Gezien de patentkwesties van HEVC en de bijbehorende aanzienlijke royalty's, kunnen we verwachten dat de ondersteuning beperkt blijft tot die in de Apple-wereld. Omdat JPEG al efficiënt is in het comprimeren van afbeeldingen, is de 50% van iets kleins misschien niet voldoende om complexiteit toe te voegen aan onze beeldverwerkingsworkflow.

Bepaalde gevallen waarin grote afbeeldingen worden gebruikt, met een grote interesse in visuele kwaliteit EN met een groot percentage Apple-apparaten in hun gebruikersbestand, zouden moeten overwegen dit formaat aan te bieden.

Het uitvoeren van tests met HEIC is heel eenvoudig met een Mac. Met Preview kunnen we een afbeelding exporteren naar HEIC en JPEG met verschillende kwaliteitswaarden en verschillende resoluties. U hoeft niet veel tests uit te voeren om het duidelijke en systematische verschil te zien.

Exporteren naar HEIC in Preview

Als u iets flexibeler wilt proberen dat kan worden geïntegreerd in een workflow voor het verwerken van webafbeeldingen, is GPAC een kijkje waard.

Hoe zit het met AVIF?

AVIF is de laatste van onze kanshebbers.

Net als WebP en HEIC op basis van HEVC is AVIF een afgeleide van de nieuwste inspanningen op het gebied van videostandaarden. Het maakt ook gebruik van HEIC / HEIF-containers en ondersteunt dus een complete functieset, die alle beschikbare hoofdformaten omvat. Het levert een veel hogere efficiëntie in compressie op, die is verkregen door het gebruik van AV1 intra-frame coderingsmechanismen. Deze voordelen maken dit formaat aantrekkelijk.

Een ander belangrijk voordeel komt van de Alliantie voor Open Media, het grote consortium achter zijn ontwikkeling als een volledig open aanpak, met een open licentie, vrij van royalty's. Grote spelers zoals Google, Netflix, Adobe, Mozilla, Microsoft, Facebook en Amazon - belangrijke actoren in de webafbeeldingen en videoscene - ondersteunen dit nieuwe formaat en pleiten voor een snelle en brede acceptatie, zowel in software als hardware. Hoewel het stream-formaat in maart 2018 werd bevroren met een referentiecode beschikbaar, worden de eerste apparaten met hardware-ondersteuning voor AV1 eind 2019 verwacht.

Op het moment dat dit artikel werd geschreven, kan de beschikbare open source-implementatie van AV1 nog steeds als experimenteel worden beschouwd en niet geschikt voor productie.

Overzicht

JPEG blijft het king-formaat voor algemene afbeeldingen voor het web in 2019 en PNG blijft de standaardoptie voor afbeeldingen met veel afbeeldingen.

De reden? Universele ondersteuning.

Alles wat een afbeelding opent, opent JPEG of PNG in 2019, net als in voorgaande jaren en decennia! Het lijdt dus geen twijfel dat deze universele formaten nog een tijdje blijven bestaan.

De voordelen van WebP blijven controversieel. Een duidelijk voordeel van WebP is dat het ook PNG kan vervangen, waardoor de workflow voor beeldverwerking mogelijk wordt vereenvoudigd. Zonder universele ondersteuning verdwijnt dit voordeel echter. Dit kan alleen veranderen als Apple van gedachten verandert en WebP eindelijk universele acceptatie krijgt, dan kan het worden gebruikt als vervanging voor alle JPEG-, PNG- en GIF-afbeeldingen.
 
HEIC-afbeeldingen op basis van HEVC bieden daarentegen duidelijke voordelen, vooral voor grote resoluties. Als verkeer van iOS- en macOS-gebruikers relevant is voor een website met grote, zware afbeeldingen, is het misschien de moeite waard om HEIC-alternatieven voor hen te bieden, met mogelijke UX-verbeteringen, vooral voor trage mobiele verbindingen. Naast het versnellen, verzekert HEIC kwaliteit, vrijwel vrij van de irritante blokkerende en rinkelende artefacten die agressief JPEG-beleid pesten.

Hoewel AVIF wordt verwacht voor 2019, zal ondersteuning en adoptie tijd kosten. Maar het is zeker een afbeeldingsindeling die u de komende tijd onder de radar blijft houden.

Het gebruik van een cloudservice voor beeldoptimalisatie blijft natuurlijk altijd een eenvoudig en duidelijk alternatief om de klus te klaren.