Forestil dig dette: det bedste billedformat til internettet i 2019

JPEG, WEBP, HEIC, AVIF? Denne guide hjælper dig med at vælge.

Efter årtier med JPEGs uovertrufne dominans har de seneste år været vidne til udseendet af nye formater - WebP og HEIC - der udfordrer denne position. De har kun delvis, men betydelig, support fra store aktører blandt webbrowsere og mobile operativsystemer. Et andet nyt billedformat - AVIF - forventes at komme ind på scenen i 2019 med løfte om at feje gennem hele internettet.

I denne artikel starter vi med en kort revision af de klassiske formater efterfulgt af en beskrivelse af WebP og HEIC / HEIF. Vi fortsætter derefter med at udforske AVIF og slutter med et resumé, der sætter alle hovedpunkterne sammen.

Kommentarer til fordele og ulemper bygger både på gennemgangen af ​​tilgængelige autoritative rapporter og førstehåndsobservationer under udvikling og implementering af værktøjer til billedoptimeringsrørledninger i e-handelsarbejdsprocesser.

Klassiske billedformater til internettet med universel support

Lad os minde os selv i kronologisk rækkefølge om de tre vigtigste klassiske formater til webbilleder.

GIF

GIF understøtter komprimering uden tab af LZW og flere rammer, der giver os mulighed for at producere enkle animationer.

Den største begrænsning ved dette format er, at det er begrænset til 256 farver. Dette var rimeligt tilbage, da det blev oprettet i slutningen af ​​80'erne, da den samme begrænsning gælder for eksisterende skærme. Men med forbedringen af ​​displayteknologi blev det klart, at det ikke var egnet til at gengive nogen glatte farveforløb, som dem, der findes i fotografiske billeder. Vi kan let få øje på det farvebånd, det producerer.

GIF tillader dog letvægtsanimation med universel support. Denne funktion har holdt formatet i live indtil i dag i brugssager, der ikke er følsomme over for kvalitetsproblemer, hvor det mest typiske er små animerede billeder med få eller ingen farver.

JPEG

Kongen af ​​billedformaterne til internettet blev udviklet til at understøtte digital fotografering arbejdsgange.

Med en sædvanlig 24-bit dybde giver den langt mere farveopløsning (ikke at forveksle med rækkevidde eller farveskala) end det menneskelige øje kan se. Det understøtter tabt kompression ved at udnytte kendte mekanismer for menneskelig syn.

Vores øjne er mere følsomme over for mellemstore skalaer end for fine detaljer. Derfor giver JPEG os mulighed for at kassere fine detaljer (høje rumlige frekvenser) med et beløb styret af en kvalitetsfaktor. Mindre kvalitet betyder mindre detaljer bevares. Desuden er vi meget mere følsomme over for detaljer med høj luminanskontrast end detaljer med kun kromatisk kontrast.

Så JPEG internkodificerer internt RGB (rød, grøn og blå) billeder i en luminans og to chromakanaler. Dette giver os mulighed for at bruge chroma-undersampling til kun at kassere mere detaljer i chromakanalerne. Det er værd at bemærke, at JPEG kodificerer billeder i blokke på 8x8 pixels.

Når vi reducerer kvalitetsfaktoren og / eller anvender mere aggressiv chromaundersampling, begynder vi at få stigende artefakter af ringning, glorier, blokering eller sløring. Et problem med JPEG er, at artefakter afhængigt af billedindholdet kan vises med forskellige kvalitetsfaktorværdier. Den vildeste forskel vises, når man sammenligner effekterne på naturlig fotografering med effekterne på illustrationer. Da illustrationer (figurer, skrifttyper) normalt er afhængige af skarpe kanter, begynder de at producere artefakter selv for små mængder detaljer, der kasseres.

For fotos leverer JPEG let en reduktion af filens vægt med en faktor på 10 med knap mærkbare artefakter sammenlignet med tabsfri komprimering.

PNG

Dette tabsfri grafikformat blev udviklet til at erstatte GIF, der adresserede dens problemer med farvebånd (og licensering). Det var nødvendigt for billeder med en betydelig mængde illustrationer, hvor JPEG producerede store artefakter, selv med minimale kompressionshastigheder.

Det understøtter gennemsigtighed og en forbedret kompression sammenlignet med GIF. Da PNG ikke kasserer information, producerer PNG ikke artefakter. Selvfølgelig sker dette på bekostning af en højere billedvægt i nærværelse af mange forskellige farvegradienter sammenlignet med tabsfri kompression.

Det lykkes at udnytte en hyppig karakteristik af kunstværker: I modsætning til fotografi - der har et kontinuum af farver med subtile variationer - har kunstbilleder normalt få veldefinerede farver.

Så PNG komprimerer billeder ved at kortlægge store mængder pixels til en simpel diskret palet og gemme mange bits som et resultat. Sammenlignet med GIF leverer den meget højere kvalitet med normalt langt færre byte.

Begynderne med delvis støtte: WEBP og HEIC baseret på HEVC

Mekanismer, der bruges af videokodecs til komprimering af streams, kan klassificeres i to hovedtyper: inter-frame og intra-frame. Mens den første udnytter afskedigelserne ad gangen, fokuserer intramodemekanismer på at reducere redundans inden i en given ramme uden nogen afhængighed af resten. Denne komprimeringsmekanisme kan anvendes på stillbilleder.

Eksplosionen af ​​videodeling - med mobilnetværk i centrum - og den stadige stigning i skærmopløsningen har drevet bestræbelserne på nye kodningsstandarder for at opnå den højest mulige effektivitet i komprimering.

Så nye billedformater dukker op som derivater af de nye videokodningsstandarder. Disse nye billedformater tilbyder større funktionssæt end JPEG og lover relevante besparelser i filvægt med forbedret visuel kvalitet.

WEBP

Google udviklede dette format med det formål at tilvejebringe et enkelt webbaseret billedformat til at håndtere alle de typiske brugssager.

Det er vigtigt, at det søger at opnå lettere billeder end JPEG uden sanktioner for visuel kvalitet. Det bruger mere komplekse operationer - som blok forudsigelse - og er et afledt af VP8 video codec. Det understøtter tabsfri kompression og i modsætning til JPEG tillader det gennemsigtighed og animationer, der kan kombinere billeder kodet med både tabsfri og tabsfri komprimering.

I princippet skal den fungere som erstatning for JPEG, PNG og GIF. En vigtig ulempe har været manglen på universel støtte. Indtil for nylig var WebP begrænset til Google-understøttet software som Chrome-browseren og Android-indbyggede applikationer.

Men med meddelelsen om, at Edge og Firefox (undtagen iOS Firefox) skal introducere WebP-support i 2019, får det åbenbart trækkraft. Det er også værd at bemærke, at Apple - Safari og iOS - ikke understøtter WebP endnu.

HEIC / HEIF

Dette format bringer en betydelig udvikling i to forskellige henseender.

For det første understøtter filbeholderen det største funktionssæt blandt tilgængelige billedformater. Det understøtter f.eks. Multi-frame-billeder med multi-frame-komprimering - en nøglefunktion til effektive HDR-, multifokus- eller multi-view-billeder.

For det andet understøtter den mange typer ikke-billeddata med en bemærkelsesværdig fleksibilitet. I øjeblikket er de fleste billeder, der bruger denne beholder, komprimeret med et derivat til billeder fra H265 / HEVC-videokodec, udviklet til effektivt at klare de 4k- og 8k-opløsninger, der vises på den nyeste generations skærme. HEVC-kodning involverer mere komplekse operationer med færre begrænsninger end JPEG. Det opnår en meget højere komprimeringseffektivitet på bekostning af lidt højere kodningstider - slet ikke et problem i web-arbejdsgange.

Ligesom H265 støttes HEIC baseret på HEVC af Apple. Den har indbygget support i iOS og macOS, men - hovedsagelig på grund af patent- og licensproblemer - understøttes den ikke af resten af ​​platforme (Android, Windows). Selv i macOS understøtter Safari det ikke. iOS-apps ser ud til at være den eneste anvendelige anvendelse for HEIC på nettet.

Så et stort spørgsmål opstår: skal vi tilbyde WEBP / HEIC-alternativer og JPEG, med PNG-versioner som en reserve?

Lad os se på hvert tilfælde ...

Skal jeg betjene WEBP-derivater?

Google hævder, at dette format producerer meget lettere billeder end JPEG med sammenlignelig kvalitet. Uafhængige tests har imidlertid påpeget, at dette resultat ikke er konsistent på tværs af forskellige kvalitetsmål, og vægttab er i de fleste tilfælde afbalanceret af øget slørethed.

I vores egne tests med e-handelsbilleder så vi filbesparelser for WebP, men til prisen for mere sløring og mindre detaljer. Selvom vi også så mindre risiko for at ringe og blokere artefakter, som vi ville betragte som mere visuelt irriterende end sløring.

Da WebP mangler support fra Apple-browsere og operativsystemer, anbefaler vi generelt ikke at betjene WebP-derivater, der konkurrerer med JPEG. Sådanne træk ville øge kompleksiteten i mediestyringen med begrænsede fordele.

Denne situation ville ændre sig, hvis Apple begyndte at støtte WebP.

Hvis dette var tilfældet, kan det udvidede funktionssæt af WebP og de producerede lettere billeder være værd at bruge, hvilket effektivt forenkler arbejdsstyringen for billedstyring.

For at prøve WebP selv er et klassisk værktøj som ImageMagick en god mulighed. Det gør det let at sammenligne billedversioner med forskellige indstillinger for kvalitet og opløsning for både WebP og JPEG. Resultater kan ses med Chrome.

# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webp

Different combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.

Should I serve HEIC derivatives?

The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.

The problem again is browser and operative system support.

Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.

Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.

Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.

If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.

What about AVIF?

AVIF is the last of our contenders.

Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.

Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.

At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.

Summary

JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.

The reason? Universal support.

Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.

The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.

I modsætning hertil giver HEIC-billeder baseret på HEVC klare fordele, især for store opløsninger. Hvis trafik fra iOS-brugere er relevant for et websted med store tunge billeder, kan det være værd at overveje at betjene HEIC-alternativer til dem med potentielle UX-forbedringer, især til langsomme mobilforbindelser. Udover at fremskynde, sikrer HEIC kvalitet, næsten fri for de irriterende blokerende og ringende artefakter, der plager aggressive JPEG-politikker.

Selvom AVIF forventes i 2019, vil support og adoption tage tid. Men det er helt sikkert et billedformat, der skal holdes under din radar i den nærmeste fremtid.

Selvfølgelig forbliver brugen af ​​en skytjeneste - gennem et billedoptimerings-API eller et billedoptimeringsplugin - altid et let og ligetil alternativ til at få arbejdet gjort.