Se dette: det beste bildeformatet for nettet i 2019

JPEG, WEBP, HEIC, AVIF? Denne guiden vil hjelpe deg å velge.

Etter flere tiår med den enestående dominansen av JPEG, har de siste årene vært vitne til utseendet til nye formater - WebP og HEIC - som utfordrer denne posisjonen. De har bare delvis, men betydelig støtte fra store aktører blant nettlesere og mobile operativsystemer. Et annet nytt bildeformat - AVIF - forventes å komme inn i scenen i 2019 med løfte om å feie gjennom hele nettet.

I denne artikkelen starter vi med en kort revisjon av de klassiske formatene, etterfulgt av en beskrivelse av WebP og HEIC / HEIF. Deretter går vi videre til å utforske AVIF, og avslutter med et sammendrag som setter alle hovedpunktene sammen.

Kommentarer til fordeler og ulemper bygger både på gjennomgang av tilgjengelige autoritative rapporter og førstehåndsobservasjoner under utvikling og distribusjon av verktøy for rørledninger for bildeoptimalisering i arbeidsflyter for e-handel.

Klassiske bildeformater for nettet med universell støtte

La oss minne oss i kronologisk rekkefølge på de tre viktigste klassiske formatene for nettbilder.

GIF

GIF støtter LZW-tapsfri komprimering og flere rammer som lar oss produsere enkle animasjoner.

Hovedbegrensningen i dette formatet er at det er begrenset til 256 farger. Dette var rimelig tilbake da det ble opprettet på slutten av 80-tallet, siden den samme begrensningen gjaldt for eksisterende skjermer. Men med forbedring av skjermteknologi viste det seg at den ikke var egnet til å reprodusere noen jevn fargestigning, som de som ble funnet i fotografiske bilder. Vi kan lett se fargebåndet som den produserer.

GIF tillater imidlertid lett animasjon med universell støtte. Denne funksjonen har holdt formatet i live fram til i dag i tilfeller som ikke er følsomme for kvalitetsproblemer, og den mest typiske er små animerte bilder med få eller ingen farger.

JPEG

Kongen av bildeformatene for nett ble utviklet for å støtte arbeidsflyt for digital fotografering.

Med en vanlig dybde på 24 bit gir den langt mer fargeløsning (for ikke å forveksle med rekkevidde eller spekter) enn det menneskelige øye kan forstå. Den støtter tapt kompresjon ved å utnytte kjente mekanismer for menneskets syn.

Øynene våre er mer følsomme for middels skala enn for fine detaljer. Derfor tillater JPEG oss å forkaste fine detaljer (høye romfrekvenser), med en mengde kontrollert av en kvalitetsfaktor. Mindre kvalitet betyr at mindre detaljer bevares. Dessuten er vi mye mer følsomme for detaljer med høy luminanskontrast enn detaljer med bare kromatisk kontrast.

Så JPEG koder internt RGB (røde, grønne og blå) bilder i en luminans og to kromkanaler. Dette gjør at vi kan bruke chroma-underprøver for å forkaste mer detaljer bare i kromkanalene. Det er verdt å merke seg at JPEG kodifiserer bilder i blokker på 8x8 piksler.

Når vi reduserer kvalitetsfaktoren og / eller bruker mer aggressiv kromundersampling, begynner vi å få økende gjenstander av ringing, glorie, blokkering eller uskarphet. Et problem med JPEG er at avhengig av bildeinnhold, kan gjenstander vises med forskjellige kvalitetsfaktorverdier. Den villeste forskjellen vises når du sammenligner effektene på naturfotografering med effektene på kunstverk. Siden kunstverk (former, skrifter) vanligvis er avhengige av skarpe kanter, begynner de å produsere gjenstander selv for små mengder detaljer som blir kastet.

For bilder leverer JPEG enkelt en reduksjon av filvekten med en faktor 10 med knapt merkbare gjenstander, sammenlignet med tapsfri komprimering.

PNG

Dette tapeløse grafikkformatet ble utviklet for å erstatte GIF, og adresserte fargebåndbånd (og lisensiering) problemer. Det var nødvendig for bilder med en betydelig mengde kunstverk, som JPEG produserte store gjenstander til og med med minimale kompresjonshastigheter.

Den støtter gjennomsiktighet og en forbedret komprimering sammenlignet med GIF. Siden den ikke kaster informasjon, produserer ikke PNG gjenstander. Dette går selvfølgelig på bekostning av tyngre bildevikt i nærvær av mange forskjellige fargebarenter, sammenlignet med tapt kompresjon.

Det lykkes med å utnytte et hyppig kjennetegn ved kunstverk: I motsetning til fotografering - som har et kontinuum av farger med subtile varianter - har kunstbilder vanligvis få veldefinerte farger.

Så PNG komprimerer bilder ved å kartlegge store mengder piksler til en enkel diskret palett og spare mange biter som et resultat. Sammenlignet med GIF, leverer den mye høyere kvalitet med vanligvis langt færre byte.

Nykommere med delvis støtte: WEBP og HEIC basert på HEVC

Mekanismer som brukes av videokodeker for å komprimere strømmer, kan klassifiseres i to hovedtyper: inter-frame og intra-frame. Mens den første utnytter oppsigelsene over tid, fokuserer mekanismene innenfor rammen på å redusere overflødighet innenfor en gitt ramme, uten noen avhengighet av resten. Denne komprimeringsmekanismen kan brukes på stillbilder.

Eksplosjonen av videodeling - med mobilnett i hjertet - og den stadige økningen av skjermoppløsningen har drevet innsatsen for nye kodingsstandarder for å oppnå høyest mulig effektivitet i komprimering.

Så nye bildeformater dukker opp som derivater av de nye standardene for videokoding. Disse nye bildeformatene tilbyr større funksjonssett enn JPEG og lover relevante besparelser i filvekt med forbedret visuell kvalitet.

webp

Google utviklet dette formatet med sikte på å gi et enkelt bildeformat på nettet for å håndtere alle typiske brukssaker.

Det er viktig at den søker å oppnå lettere bilder enn JPEG, uten straff for visuell kvalitet. Den bruker mer komplekse operasjoner - som blokkprediksjon - og er et derivat av VP8-videokodek. Den støtter tapsfri komprimering og i motsetning til JPEG, tillater den åpenhet og animasjoner som kan kombinere bilder som er kodet med både tapsfri og tapsfri komprimering.

I prinsippet skal det fungere som en erstatning for JPEG, PNG og GIF. En viktig ulempe har vært mangelen på universell støtte. Inntil nylig hadde WebP blitt begrenset til Google-støttet programvare som Chrome-nettleseren og Android-native programmer.

Imidlertid, med kunngjøringen om at Edge og Firefox (unntatt iOS Firefox) skal introdusere WebP-støtte i 2019, er det tydeligvis å få trekkraft. Det er også verdt å merke seg at Apple - Safari og iOS - ikke støtter WebP ennå.

HEIC / HEIF

Dette formatet bringer en betydelig utvikling i to forskjellige forhold.

For det første støtter filbeholderen det største funksjonssettet blant tilgjengelige bildeformater. Den støtter for eksempel bilder med flere bilder med komprimering av flere bilder - en nøkkelfunksjon for effektive HDR-, multifokus- eller flersynsbilder.

For det andre støtter den mange typer ikke-bildedata med en bemerkelsesverdig fleksibilitet. For øyeblikket er de fleste bilder som bruker denne beholderen komprimert med et derivat for bilder fra H265 / HEVC-videokodek, utviklet for å effektivt takle 4k og 8k oppløsninger omtalt av den siste generasjons skjermer. HEVC-koding innebærer mer komplekse operasjoner med færre begrensninger enn JPEG. Det oppnår en mye høyere komprimeringseffektivitet til bekostning av litt høyere kodetider - ikke noe problem i arbeidsflyter på nettet.

I likhet med H265, er HEIC basert på HEVC støttet av Apple. Den har egen støtte i iOS og macOS og støttes av Safari-nettlesere, men - mest på grunn av patenterings- og lisensproblemer - støttes den ikke av resten (Android, Chrome, Firefox, Windows eller Edge).

Så et stort spørsmål oppstår: bør vi tilby WEBP / HEIC-alternativer og JPEG, med PNG-versjoner som et tilbakeblikk?

La oss se på hvert tilfelle ...

Bør jeg tjene WEBP-derivater?

Google hevder at dette formatet produserer mye lettere bilder enn JPEG med sammenlignbar kvalitet. Uavhengige tester har imidlertid påpekt at dette resultatet ikke er konsistent på tvers av forskjellige målinger av kvalitet, og vektreduksjon er i de fleste tilfeller balansert av økende uskarphet.

I våre egne tester med netthandelsbilder så vi besparelser for WebP, men til prisen for mer uskarphet og mindre detaljer. Selv om vi også så mindre risiko for ringing og blokkering av gjenstander, som vi vil anse som mer visuelt irriterende enn uskarphet.

Siden WebP mangler støtte fra Apple-nettlesere og operative systemer, anbefaler vi ikke generelt å servere WebP-derivater som konkurrerer med JPEG. Slike grep vil øke mediehåndteringens kompleksitet med begrensede fordeler.

Denne situasjonen ville endret seg hvis Apple begynte å støtte WebP.

Hvis dette var tilfelle, kan det utvidede funksjonssettet til WebP og de lysere bildene som er produsert være verdt å bruke, og effektivt forenkle arbeidsstyring for bilderadministrasjon.

For å prøve WebP selv, er et klassisk verktøy som ImageMagick et godt alternativ. Det gjør det enkelt å sammenligne bildeversjoner med forskjellige innstillinger for kvalitet og oppløsning for både WebP og JPEG. Resultatene kan vises med Chrome.

# Konverter til WEBP-kvalitet 60
konvertere input.jpg -kvalitet 60 output_60.webp
# Konverter til JPEG-kvalitet 60
konvertere input.jpg -kvalitet 60 output_60.jpg
# Konverter til WEBP-kvalitet 60 og bredde 450px
konvertere input.jpg-størrelse 450-kvalitet 60 output_450_60.webp

Ulike kombinasjoner av kvalitet og oppløsning vil ha forskjellige effekter i hvert tilfelle, da kompresjonsalgoritmene fungerer annerledes. Så, sjekk de relevante filstørrelsene på flere bilder for å få et inntrykk av potensielle besparelser og de beste innstillingene for en gitt brukstilfelle.

Bør jeg tjene HEIC-derivater?

Fordelen med HEIC (over JPEG) er tydelig. Vektreduksjon er gjennomgående betydelig - omtrent 50% - uten tap av visuell kvalitet. Funksjonen som støttes er ganske enkelt fantastisk.

Problemet igjen er nettleser- og operativsystemstøtte.

Gitt patentspørsmålene til HEVC og de heftige royalties tilknyttet, kan vi forvente at støtten forblir begrenset til de i Apple-verdenen. Siden JPEG allerede er effektiv til å komprimere bilder, er kanskje ikke 50% av noe lite verdt nok til å legge kompleksiteten til arbeidsbehandlingen for bilder.

Enkelte tilfeller som bruker store bilder, med stor interesse for visuell kvalitet OG med en stor prosentandel av Apple-enheter i deres brukerbase, bør vurdere å tjene dette formatet.

Det er veldig enkelt å utføre tester med HEIC med en Mac. Forhåndsvisning lar oss eksportere et bilde til HEIC og JPEG med forskjellige kvalitetsverdier og forskjellige oppløsninger. Du trenger ikke å kjøre mange tester for å se den klare og systematiske forskjellen mellom dem.

Eksporter til HEIC i forhåndsvisning

Hvis du ønsker å prøve noe mer fleksibelt som kan integreres i en arbeidsflyt for webbildebehandling, er GPAC verdt å se på.

Hva med AVIF?

AVIF er den siste av våre konkurrenter.

I likhet med WebP og HEIC basert på HEVC, er AVIF et derivat av den siste innsatsen innen videostandarder. Den bruker også HEIC / HEIF-containere og støtter så et komplett funksjonssett som omfatter alle de viktigste tilgjengelige formatene. Det bringer mye høyere effektivitet i komprimering som er arvet fra bruken av AV1-koder innen mekanisk ramme. Disse fordelene gjør dette formatet overbevisende.

En annen betydelig fordel kommer fra Alliance for Open Media, det store konsortiet bak utviklingen som en helt åpen tilnærming, med en åpen lisens, fri for royalty. Store aktører som Google, Netflix, Adobe, Mozilla, Microsoft, Facebook og Amazon - store aktører innen webgrafikk og videoscene - støtter dette nye formatet og gjør en sak for en rask og bred adopsjon, både innen programvare og maskinvare. Mens strømformatet ble frosset i mars 2018 med en referansekode tilgjengelig, forventes de første enhetene med maskinvarestøtte for AV1 innen utgangen av 2019.

I skrivende stund skriver denne artikkelen, kan åpen kildekodeimplementering av AV1 fremdeles anses som eksperimentell og ikke egnet for produksjon.

Sammendrag

JPEG vil forbli kongeformatet for generelle bilder for nett i 2019, og PNG vil forbli som et standardalternativ for bilder med betydelige illustrasjoner.

Grunnen? Universell støtte.

Alt som åpner et bilde vil åpne JPEG eller PNG i 2019, akkurat som i tidligere år og tiår! Så ingen tvil om at disse universelle formatene vil forbli på plass i noen tid ennå.

Fordelene med WebP er fortsatt kontroversielle. En klar fordel med WebP er dens evne til også å erstatte PNG, potensielt forenkle arbeidsprosessene for bildebehandling. Uten universell støtte forsvinner imidlertid denne fordelen. Dette kan endres bare hvis Apple ombestemmer seg og WebP endelig får universell adopsjon, så kan den brukes som erstatning for alle JPEG-, PNG- og GIF-bilder.
 
I motsetning til dette gir HEIC-bilder basert på HEVC klare fordeler, spesielt for store oppløsninger. Hvis trafikk av iOS- og macOS-brukere er relevant for et nettsted med store tunge bilder, kan det være verdt å vurdere å servere HEIC-alternativer for dem, med potensielle UX-forbedringer, spesielt for tregte mobilforbindelser. I tillegg til å øke hastigheten, sikrer HEIC kvalitet, nesten fri for de irriterende blokkerings- og ringegjenstandene som plager aggressiv JPEG-policy.

Selv om AVIF er forventet for 2019, vil støtte og adopsjon ta tid. Men det er sikkert et bildeformat å holde under radaren din i nærmeste fremtid.

Bruken av en skytjeneste for bildeoptimalisering vil selvfølgelig alltid være et enkelt og greit alternativ for å få jobben gjort.