Å sammenligne Romanen vs. Prøvde og True Image Formater

0
110

Populære image filformater som JPG, PNG og GIF har vært rundt for så lenge tid. De er relativt effektiv og web-utviklere har innført mange optimalisering av løsninger for ytterligere å komprimere deres størrelse. Imidlertid, den æra av jpg-filene, PNGs, og Gif-filer kan komme til en slutt som nyere, mer effektiv image filformater som mål å ta deres plass.

Vi kommer til å utforske disse nyere fil formater i dette innlegget sammen med en analyse av hvordan de klarer seg mot en annen og tidligere formater. Vi vil også dekke optimalisering teknikker for å forbedre levering av bilder.

Hvorfor trenger vi nye bildeformater i det hele tatt?

Bortsett fra bildekvalitet, det mest merkbare forskjellen mellom eldre og nyere bildeformater er filstørrelse. Nye formater bruke algoritmer som er mer effektiv ved å komprimere data, så størrelser kan være mye mindre. I forbindelse med web-utvikling, mindre filer betyr raskere lasting, noe som fører til lavere avvisningsfrekvens, mer trafikk, og flere konverteringer. Alle gode ting, at vi ofte forkynne.

Som med de fleste teknologiske nyvinninger, utrullingen av nye bildeformater vil bli gradvis som nettlesere vurdere og vedta sine standarder. I mellomtiden, vi som web-utviklere vil ha for å imøtekomme brukere med varierende grad av støtte. Heldigvis, Kan jeg Bruker er allerede på toppen av det og rapportering på nettleseren støtte for bestemte bildeformater.

Nye Ting

Som vi vandre i et nytt grenseland av bildeformater, vi vil ha mye format valg. Her er noen kandidater som allerede dukker opp og gjør tilfeller for å erstatte den eksisterende fanebærere.

WebP

WebP ble utviklet av Google som et alternativ til JPG og kan bli opp til 80 prosent mindre enn Jpeg-filer som inneholder det samme bildet.

WebP nettleser støtte er bedre hele tiden. Opera og Chrome støtter det. Firefox annonsert planer om å gjennomføre det. For nå, Internet Explorer og Safari er holdouts. Store selskaper med tonnevis av innflytelse som Google og er for tiden eksperimenterer med formatet, og det allerede utgjør om lag 95 prosent av bilder på eBay ‘ s hjemmeside. YouTube bruker også WebP for store miniatyrbilder.

Hvis du bruker et CMS som WordPress og Joomla, det er utvidelser for å hjelpe deg til enkelt å implementere støtte for WebP, for eksempel Optimus og Cache-Tilrettelegger for WordPress og Joomla egen støttet utvidelsen. Disse vil ikke bryte ditt nettsted for nettlesere som ikke støtter formatet så lenge du gir PNG eller JPG fallbacks. Som et resultat, nettlesere som støtter den nye formater vil se en økning i ytelse, mens andre får den standard erfaring. Tatt i betraktning at leseren støtte for WebP er økende, det er en flott mulighet til å spare på ventetid.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
23 12 Ingen Ingen Ingen Ingen

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Ingen 11.1 alle 4.2-4.3 62 Ingen

HEIF

Høy effektivitet bilde-filer (eller HEIF) faktisk bære extension HEIC (.heic), som står for høy effektivitet bildet beholder, men de to forkortelser blir brukt om hverandre. Tidligere dette året, Apple annonsert at sin nyeste linje av produkter vil støtte HEIF-formatet som standard.

På toppen av mindre filstørrelser, HEIF tilbyr mer fleksibilitet enn andre formater, siden det kan støtte både bilder og bildesekvenser. Derfor er det mulig å lagre burst bilder, focal stabler, eksponering stabler, bilder tatt fra video og annet bilde samlinger i en enkelt fil. HEIF støtter også gjennomsiktighet, 3D og 4K.

I tillegg til bilder, HEIF filer kan inneholde bilde-egenskaper, miniatyrbilder, metadata og ekstra data som for eksempel dybde kart og lyd. Bildet forklaringer kan være lagret som godt takket være non-destruktiv redigering operasjoner. Det betyr at beskjæring, rotasjoner, og andre endringer som kan gjøres om til enhver tid. Tenk deg alle dine bildet variasjoner som finnes i en enkelt fil!

Apple gjør alt den kan for å gjøre overgangen så sømløs som mulig. For eksempel, når brukerne deler HEIF filer med apper som ikke støtter formatet, Apple vil automatisk konvertere bildet til en mer kompatibelt format som JPG.

Det er ingen nettleser støtte for HEIF på tidspunktet for dette skriftlig.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
Ingen Ingen Ingen Ingen Ingen Ingen

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Ingen Ingen Ingen Ingen Ingen Ingen

Som blir sagt, fil format og tilbyr imponerende fil besparelser for både video og bilder. Dette blir stadig viktigere som våre enheter blir sterkere og er i stand til å ta en høyere kvalitet på bilder og videoer, og dermed resulterer i en større behov for effektiv media-filer.

FLIF

Free Lossless bildeformat (eller FLIF) bruker en komprimering algoritmen som resulterer i filer som er 14-74 prosent mindre enn eldre formater uten å ofre kvalitet (dvs. uten datatap). Derfor, FLIF er en flott plass for hvilken som helst type bilde eller en animasjon.

Den FLIF hjemmeside hevder at FLIF filer er 43% prosent mindre enn gjennomsnittet typisk PNG-filer. Grafen nedenfor illustrerer hvordan FILF sammenligner til andre formater i denne sammenheng.

FLIF ofte vind opp med å bli den mest effektive formatet i tester.

FLIF tar seg av noe som kalles meta-adaptive nær null heltall aritmetisk koding, eller (riktig) GALNING. FLIF støtter også progressive interlacing slik at bildene vises hele så snart de begynner å laste ned, som er en annen funksjon som har vist seg å redusere web-side sprette priser.

Potensialet for FLIF er veldig spennende, men det er ingen nettleser støtte i øyeblikket heller ikke det ser ut som noen nettlesere er for tiden vurderer å legge det til. Mens skaperne av format jobber hardt på å oppnå native støtte for populære nettlesere og bilderedigering verktøy, utviklere kan få tilgang til FLIF kildekoden og snag en polyfill løsning for å teste det ut.

Den Eksisterende Ting

Som nevnt tidligere, er vi sannsynligvis fortsatt mange år unna den nye formater helt tar over. I noen tilfeller kan det være bedre å holde seg med de prøvde og sanne. La oss se på hvilke formater vi snakker om og diskuterer hvordan de har kjørt rundt for så lenge.

JPG

Som den herskende standard for de fleste digitale kameraer og deling av bilder enheter, JPG er den mest brukte bildeformatet på internett. W3Techs rapporterer at nesten tre fjerdedeler av alle nettsteder bruker JPG-filer. På samme måte, mest populære fotoredigering programvare som lagrer bildene som JPG-filer som standard.

JPG er oppkalt etter Joint Photographic Experts Group, en organisasjon som utviklet teknologien; derav grunnen til JPG er alternativt kalt JPEG. Du kan se disse forkortelsene brukt om hverandre.

Formatet kan dateres helt tilbake til 1992, og ble opprettet for å lette lossy komprimering av bitmap-bilder. Lossy komprimering er en irreversibel prosess som er avhengig av eksakt anslag. Ideen var å tillate utviklere å justere komprimering prosenter for å oppnå den ønskede balansen mellom filstørrelse og bildekvalitet.

JPG-formatet er kjempefint for bilder; imidlertid, som navnet tilsier, lossy kompresjon kommer med en reduksjon i bildekvaliteten. Kvalitet reduseres ytterligere hver gang et bilde som er redigert og re-frelst, som er grunnen til at utviklere er lært opp til å avstå fra å resizing bildene dine flere ganger.

GIF

GIF er en forkortelse for graphics interchange format. Det avhenger av en komprimering algoritmen kalles LZW, som ikke forringe bildekvaliteten. GIF-formatet mangler fargen støtte for JPG og PNG, men det har holdt seg rundt likevel, takket være dens evne til å gjengi animasjoner ved bunting flere bilder i en enkelt fil. Bildene som er lagret inne i en GIF-fil kan gjengi på rad for å lage en kort film-lignende effekt. Gif-filer kan konfigureres til å vise bilde-sekvenser et angitt antall ganger eller uendelig loop.

Bilde gjengitt med tillatelse fra Giphy.com

PNG

Den gode gamle portable network graphic (PNG) ble opprinnelig definert som etterfølgeren til GIF-format og debuterte i 1996. Den ble designet spesielt for å representere bilder på nettet. I form av popularitet, PNG er en nær andreplass til JPG. W3Techs hevder at 72 prosent av nettsteder bruker dette formatet. I motsetning til JPG, PNG-bilder er i stand til tapsfri komprimering (dette betyr ikke bildekvaliteten er tapt).

En annen fordel over JPG er at PNG støtter åpenhet og gjennomsiktighet. Siden store bilder har en tendens til å se overlegen i JPG-format, PNG-formatet er vanligvis brukt til ikke-kompleks grafikk og illustrasjoner.

Å sammenligne åpenhet støtte for JPG (til venstre) og PNG (høyre).

Måter å Forbedre Bildet Optimalisering og Levering

Det er et par viktige ting å vurdere når du optimalisere bilder for internett fordi alle filformater—inkludert den nye de—kan ende opp med å legge enda et lag av kompleksitet. Bilder som vanligvis konto for mesteparten av byte på en web-side, så bildet optimalisering er vurdert som lavt-hengende frukt for å forbedre et nettsted ‘ s ytelse. Google Dev Guide har en omfattende artikkel om emnet, men her er en kondensert liste med tips for fartsovertredelse opp ditt bilde levering.

Implementere Støtte for Nye Bildeformater

Siden nyere formater som WebP ennå ikke er universelt støttes, må du konfigurere programmer slik at de tjene opp de riktige ressursene til brukerne.

Du må være i stand til å oppdage hvilke formater klienten støtter og levere det beste alternativet. I tilfelle av WebP, det er et par måter å gjøre dette på.

Investere i en CDN

Et innhold levering nettverk (CDN) akselererer levering av bilder ved caching dem på deres nettverk av kanten servere. Derfor, når besøkende kommer til nettstedet ditt, kan de få rutes til nærmeste kanten server i stedet for den opprinnelige serveren. Dette kan produsere enorme tidsbesparelser spesielt hvis brukerne er langt fra den opprinnelige serveren.

Vi har et helt innlegg om temaet for å hjelpe deg å forstå hvordan CDNs fungerer og hvordan du kan utnytte dem for dine prosjekter.

Bruk CSS i Stedet for Bilder

Fordi eldre nettlesere som ikke støtter bilde skygger og avrundede hjørner, erfarne web-utviklere er brukt til å vise enkelte elementer som knapper som bilder. Husker når du viser en tilpasset skrifttype som kreves for å lage bilder for overskrifter? Disse rutinene er fortsatt ute i naturen, men er fryktelig ineffektive tilnærminger. I stedet, bruke CSS når du kan.

Sjekk Din Image Cache-Innstillinger

For bildefiler som ikke endres ofte, kan du bruke HTTP caching direktiver for å øke belastningen for de vanlige besøkende. På den måten, når noen besøker nettstedet ditt for første gang, nettleseren vil cache bildet, slik at det ikke trenger å lastes ned igjen ved senere besøk. Denne praksisen kan også spare deg for penger ved å redusere båndbredde kostnader.

Selvfølgelig, feil caching kan føre til problemer. Legge til et fingeravtrykk, som for eksempel et tidsstempel, slik at bildene kan bidra til å hindre at caching konflikter. Heldigvis, de fleste web-utvikling plattformer gjør dette automatisk.

Endre størrelse på Bilder for Forskjellige Enheter

Å finne ut hvordan man best kan imøtekomme mobile enheter med dårligere skjermoppløsninger er en pågående prosess. Noen utviklere ikke engang gidder og bare tilbyr den samme bilde-filer for alle brukere, men denne tilnærmingen avfall båndbredde og til din mobile besøkende’ tid. Vurder å bruke srcset slik at leseren bestemmer hvilken bildestørrelse det bør levere basert på kundens størrelse dimensjoner.

Image Compression Tester

Det er alltid interessant å se størrelsen forskjeller hvert bilde format gir. I tilfelle av denne artikkelen sammenligner vi lossless og lossy bildeformater sammen. Selvfølgelig, det er ikke vanlig praksis så mange ganger lossy vil være mindre i størrelse enn lossless som kvaliteten på bildet lider i for å lage en mindre bildestørrelse.

I alle fall, å velge mellom lossless og lossy bildeformater bør være basert på hvordan bildet intensiv nettstedet ditt er og hvor fort det går allerede. For eksempel, en e-handel butikk kan være komfortable med en litt dårligere bildet i bytte for raskere lasting, mens en fotograf nettstedet er sannsynligvis det motsatte i for å vise frem talentet.

For å sammenligne størrelser av hver av de seks bildeformater som er nevnt i denne artikkelen, vi begynte med tre JPG-bilder og konvertere dem til hver av de andre formater. Her er resultatene.

  • Bilde 1
  • Bilde 2
  • Bilde 3

Som tidligere nevnt, vil resultatene nedenfor variere betydelig på grunn av lossless/lossy bildeformater. For eksempel, PNG og FLIF bilder er både lossless, derfor resulterer i større bildefiler.

Bilde 1 Størrelse
Bilde 2 Størrelse
Bilde 3 Størrelse

WebP 1.8 MB 293 KB 1.6 MB
HEIF 1.2 MB 342 KB 1.1 MB
FLIF 7.4 MB 2.5 MB 6.6 MB
JPG 3.9 MB 1.3 MB 3.5 MB
GIF 6.3 MB 3.9 MB 6.7 MB
PNG 13.2 MB 5 MB 12.5 MB

I henhold til resultatene ovenfor, HEIF bildene var mindre samlet enn noen andre format. Imidlertid, på grunn av deres mangel på støtte, er det for øyeblikket ikke er mulig å integrere HEIF format til et web-applikasjoner. WebP kom inn i en ganske nær andre og tilbyr måter å omgå mindre enn ideelle mengden av nettleseren støtte. For brukere som bruker Chrome eller Opera, WebP bilder vil sikkert bidra til å akselerere levering.

Som for lossless bildeformater, PNG er betydelig større enn det er lossy JPG motstykke. Imidlertid, når optimalisert med FLIF, besparelser på rundt 50 prosent ble realisert. Dette gjør FLIF et flott alternativ for de som krever høy kvalitet bilder i en mindre filstørrelse. Når det er sagt FLIF for øyeblikket ikke støttes av annen nettlesere ennå, lik HEIF.

Konklusjon

Den gamle bildeformater vil trolig fortsatt være rundt i mange år framover, men flere utviklere vil omfavne den nye formater når de innser størrelsen-sparing fordeler.

Kameraer, mobile enheter og mange gadgets, generelt, er blitt mer og mer sofistikerte, noe som betyr at bilder og videoer du har tatt er av høyere kvalitet og tar opp mer plass. Nye formater, må være vedtatt å bøte på dette, og det ser ut som vi har noen ekstremt lovende alternativer å se frem til, selv om det vil ta litt tid til å se dem offisielt vedtatt.