Att jämföra Nya vs. Försökt och Sann Bild Format

0
21

Populära filformat som JPG, PNG och GIF har funnits under en lång tid. De är relativt effektiv och webbutvecklare har infört många lösningar för att ytterligare komprimera sin storlek. Men era av jpg-bilder, Png och Gif-bilder kan komma till ett slut som nyare, mer effektiv image file format syfte att ta deras plats.

Vi kommer att utforska dessa nyare filformat i detta inlägg tillsammans med en analys av hur de stack upp mot en annan och tidigare format. Vi kommer även att omfatta optimering för att förbättra leverans av dina bilder.

Varför behöver vi nya bildformat på alla?

Bortsett från bildkvalitet, den mest märkbara skillnaden mellan äldre och nyare format bilden är filstorleken. Nya format som använder algoritmer som är mer effektiv på att komprimera data så att filstorleken kan vara mycket mindre. I samband med webbutveckling, mindre filer betyder snabbare laddningstider, vilket leder till lägre avvisningsfrekvens, mer trafik och fler omvandlingar. Alla bra saker som vi ofta predika.

Som med de flesta tekniska innovationer, utbyggnad av ny image format kommer att ske successivt som webbläsare överväga och anta sina standarder. Under tiden, har vi som webbutvecklare kommer att ha för att tillgodose användare med olika nivåer av stöd. Tack och lov, Kan jag Använda är redan på toppen av det och rapportera om webbläsaren har stöd för vissa bildformat.

Nya Saker

När vi går in i en ny gräns för bilden filformat, kommer vi att ha massor av format val. Här är några kandidater som redan har poppar upp och göra ärenden för att ersätta den befintliga standarden bärare.

WebP

WebP har utvecklats av Google som ett alternativ till JPG och kan vara upp till 80 procent mindre än Jpeg-filer som innehåller samma bild.

WebP webbläsare stöd ökar hela tiden. Opera och Chrome för närvarande har stöd för det. Firefox planer på att genomföra det. För nu, Internet Explorer och Safari är de holdouts. Stora företag med massor av inflytande som Google och experimenterar med det format och den redan gör upp om 95 procent av bilderna på eBay: s hemsida. YouTube använder också WebP för stora miniatyrer.

Om du använder ett CMS som WordPress eller Joomla, det finns tillägg för att hjälpa dig att enkelt implementera stöd för WebP, såsom Optimus och Cache Möjliggörare för WordPress och Joomla ‘ s egna stöds förlängning. Dessa kommer inte att bryta din webbplats för webbläsare som inte har stöd för det format så länge du ger PNG-eller JPG-fallbacks. Som ett resultat, webbläsare som har stöd för nyare filformat kommer att se en prestandaökning medan andra få den standard erfarenhet. Med tanke på att webbläsaren har stöd för WebP växer, det är en stor möjlighet att spara på latens.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
23 12 Inga Inga Inga Inga

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Inga 11.1 alla 4.2-4.3 62 Inga

HEIF

Hög effektivitet-bildfiler (eller HEIF) faktiskt bära förlängning HEIC (.heic), som står för hög effektivitet bild behållare, men de två förkortningar som används omväxlande. Tidigare i år meddelade Apple att sin nyaste sortiment av produkter kommer att stödja HEIF-format som standard.

På toppen av mindre filstorlekar, HEIF och erbjuder mer flexibilitet än andra format eftersom det kan stödja både bilder och bildsekvenser. Det är därför möjligt att lagra burst-bilder, fokus stackar, exponering stackar, bilder tagna från video och andra bilden samlingar i en enda fil. HEIF också stöder öppenhet, 3D-och 4K.

Förutom bilder, HEIF filer kan hålla egenskaper för en bild, miniatyrer, metadata och extra uppgifter såsom djup kartor och ljud. Bild avledningar kan lagras och tack vare icke-förstörande redigering. Det innebär att beskära, rotationer, och andra ändringar kan ångras som helst. Föreställa sig alla dina bild variationer som finns i en enda fil!

Apple gör allt den kan för att göra övergången så smidig som möjligt. Till exempel, när en användare dela HEIF filer med program som inte har stöd för det formatet, Apple kommer att automatiskt konvertera bilden till ett mer kompatibelt format såsom JPG.

Det finns ingen webbläsare har stöd för HEIF vid tidpunkten för denna skrift.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
Inga Inga Inga Inga Inga Inga

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Inga Inga Inga Inga Inga Inga

Som sagt, det filformat som erbjuder imponerande fil besparingar för både video och bilder. Detta blir allt viktigare som våra enheter blir starkare och kan ta högre kvalitet på bilder och video, vilket resulterar i ett större behov av effektiva media-filer.

FLIF

Gratis Förlustfritt bildformat (eller FLIF) använder en komprimering algoritm som leder till filer som är 14-74 procent mindre än äldre format utan att göra avkall på kvalitet (dvs icke-förstörande). Därför FLIF är en bra passform för alla typer bild eller animation.

Den FLIF hemsida hävdar att FLIF filer är 43% procent mindre i genomsnitt än typiska PNG-filer. Grafen nedan visar hur FILF jämför med andra format i detta avseende.

FLIF ofta vindar upp att vara den mest effektiva formen i tester.

FLIF tar fördel av något som kallas meta-adaptiv nära-noll heltal aritmetisk kodning, eller (på lämpligt sätt) GALNING. FLIF stöder också progressiva interlacing så att bilder visas i sin helhet, som snart börjar de ner, vilket är en annan funktion som har visat sig minska webbsida avvisningsfrekvens.

Potentialen för FLIF är mycket spännande, men det finns ingen webbläsare stöd just nu och inte heller ut som någon webbläsare är för närvarande överväger att lägga. Medan skaparna av det format som arbetar hårt på att uppnå inbyggt stöd för populära webbläsare och bildredigeringsverktyg, kan utvecklare få tillgång till FLIF källkod och haffa en polyfill lösning för att testa det.

Den Befintliga Grejer

Som tidigare nämnts, att vi är benägna fortfarande år borta från de nya formaten helt tar över. I vissa fall kan det vara bättre att hålla sig med den beprövade och sant. Låt oss se vad som format vi pratar om och diskutera hur de har fastnat för så länge.

JPG

Som den styrande standard för de flesta digitala kameror och foto att dela enheter, JPG är det vanligaste bildformat på internet. W3Techs rapporter om att nästan tre fjärdedelar av alla webbplatser använder JPG-filer. På samma sätt, mest populära bildbehandlingsprogram spara bilderna som JPG-filer som standard.

JPG är uppkallad efter Joint Photographic Experts Group, en organisation som utvecklat tekniken, därav varför JPG är alternativt kallas JPEG. Du kan se dessa förkortningar används omväxlande.

Formatet går hela vägen tillbaka till 1992, och skapades för att underlätta förstörande komprimering av bitmap-bilder. Förstörande komprimering är en irreversibel process som förlitar sig på oriktiga approximationer. Tanken var att göra det möjligt för utvecklare att justera kompression för att uppnå sina önskade balansen mellan filstorlek och bildkvalitet.

JPG-formatet är fantastiskt för tagna bilder, men, som namnet antyder, förstörande komprimering kommer med en minskning i bildkvalitet. Kvalitet försämras ytterligare varje gång en bild redigeras och sparas, vilket är anledningen till att utvecklarna lär sig att avstå från att ändra storlek på bilder flera gånger.

GIF

GIF står för graphics interchange format. Det beror på en komprimering algoritm som kallas LZW, som inte försämrar bildkvaliteten. GIF-formatet saknar färg stöd för JPG och PNG, men det har fastnat runt ändå tack vare sin förmåga att göra animationer genom att bunta ihop flera bilder till en enda fil. Bilder som lagras i en GIF-fil kan göra i följd för att skapa en kort film-liknande effekt. Gif kan konfigureras för att visa bild-sekvenser och ett visst antal gånger eller slinga oändligt.

Bild med tillstånd från Giphy.com

PNG

Den gamla goda portable network graphic (PNG) var ursprungligen conceptualized som efterträdare till GIF-format och debuterade 1996. Det var särskilt utformade för att representera bilder på webben. I termer av popularitet, PNG är en nära runner-up till JPG. W3Techs hävdar att 72 procent av de webbplatser använder detta format. Till skillnad från JPG -, PNG-bilder kan förlustfri komprimering (vilket betyder att ingen bild kvalitet går förlorad).

En annan fördel jämfört med JPG är att PNG stöder transparens och opacitet. Eftersom stora bilder tenderar att se överlägsen i JPG-format, PNG-format används vanligen för icke-komplex grafik och illustrationer.

Att jämföra öppenhet stöd för JPG (till vänster) och PNG (höger).

Sätt att Förbättra Bild-Optimering och Leverans

Det finns några viktiga saker att tänka på när du optimerar bilder för webben för alla filformat, inklusive de nya—kan hamna ännu ett lager av komplexitet. Bilder som normalt står för huvuddelen av byte på en webbsida, så bildoptimering anses vara lågt hängande frukt för att förbättra webbplatsens prestanda. Google Dev Guide har en omfattande artikel om ämnet, men här är en kondenserad lista med tips för att snabba upp din bild leverans.

Implementera Stöd för Nya bildformat

Eftersom nyare format som WebP är ännu inte allmänt stöd, måste du konfigurera dina applikationer så att de tjänar upp de resurser som krävs för att dina användare.

Du måste kunna upptäcka vilka format klienten stöder och levererar det bästa alternativet. I fall av WebP, finns det några sätt att göra detta.

Investera i ett CDN

Ett content delivery network (CDN) som accelererar leverans av bilder genom cachning dem på deras nätverk av edge-servrar. Därför, när besökarna kommer till din webbplats, de får kopplas till närmaste kant i stället för den ursprungliga servern. Detta kan producera enorma tidsbesparingar särskilt om dina användare är långt från ditt ursprung server.

Vi har ett helt inlägg om ämnet för att förstå hur Cdn arbete och hur du kan utnyttja dem till ditt projekt.

Använd CSS Istället för i Bilder

Eftersom äldre webbläsare inte har stöd för bild skuggor och rundade hörn, erfaren webbutvecklare används för att visa vissa element som knappar som bilder. Kom ihåg de dagar när du visar ett anpassat teckensnitt som krävs för att göra bilder för rubriker? Dessa metoder är fortfarande ute i naturen, men är fruktansvärt ineffektiva metoder. I stället använda CSS när du kan.

Kolla Din Bild Cache-Inställningar

För bild-filer som inte ändras så ofta kan du använda HTTP-cachning direktiv för att förbättra laddningstider för din vanliga besökare. På det sättet, när någon besöker din hemsida för första gången, webbläsaren kommer att kunna cacha bilden så att det inte behöver laddas ner igen vid ett senare besök. Denna praxis kan också spara pengar genom att minska kostnader för bandbredd.

Naturligtvis, felaktig cachelagring kan orsaka problem. Lägga till ett fingeravtryck, som en tidsstämpel, att dina bilder kan hjälpa till att förhindra cachning konflikter. Lyckligtvis, de flesta plattformarna webbutveckling göra detta automatiskt.

Ändra storlek på Bilder för Olika Enheter

Räkna ut hur att bäst tillgodose mobila enheter med sämre skärmupplösningar som är en pågående process. Vissa utvecklare inte ens bryr sig och helt enkelt erbjuda samma bild filer för alla användare, men detta tillvägagångssätt avfall din bandbredd och från dina mobila besökare. Överväg att använda srcset så att webbläsaren fastställer vilken bildstorlek det bör leverera baserat på kundens storlek mått.

Image Compression (Bildkomprimering) Tester

Det är alltid intressant att se storleken skillnader av varje bild-formatet ger. I fall av denna artikel jämför vi förlustfria och förstörande bildformat tillsammans. Naturligtvis, det är inte vanligt som många gånger förstörande kommer att vara mindre i storlek än lossless-kvalitet på bilden lider för att producera en mindre bildstorlek.

I vilket fall som helst att välja mellan lossless och lossy format bilden bör vara baserat på hur bilden intensivt att din webbplats är och hur snabbt det redan körs. Till exempel, en e-handel butik kan vara bekvämt med en något försämrad bild i utbyte för snabbare laddningstider när en fotograf webbplats är sannolikt den motsatta för att visa talang.

Att jämföra storleken på var och en av de sex bildformat som nämns i denna artikel, vi började med tre JPG-bilder och konverterade dem till var och en av de andra formaten. Här är prestanda resultat.

  • Bild 1
  • Bild 2
  • Bild 3

Som tidigare nämnts, resultatet nedan variera kraftigt på grund av icke-förstörande/förstörande bildformat. Till exempel, PNG och FLIF bilder är både lossless, därför resulterar i större bildfiler.

Bild 1 Storlek
Bild 2 Storlek
Bild 3 Storlek

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

Enligt resultaten ovan, HEIF bilder var mindre totalt än någon annan format. Dock, på grund av deras brist på stöd, det för närvarande inte är möjligt att integrera HEIF-format i webbapplikationer. WebP kom in på en ganska nära andra och inte erbjuder sätt för att undvika mindre-än-perfekt mängd webbläsare stöd. För användare som använder Chrome eller Opera, WebP bilder kommer säkert att hjälpa till att påskynda leveransen.

Som för icke-förstörande bildformat, PNG är betydligt större än det är förstörande JPG motsvarighet. Men när optimerad med FLIF, besparingar på cirka 50 procent realiserades. Detta gör FLIF ett bra alternativ för dem som önskar bilder av hög kvalitet på en mindre filstorlek. Som sagt FLIF för närvarande inte stöds av annan webbläsare än, liknande till HEIF.

Slutsats

Den gamla bilden format kommer sannolikt fortfarande att finnas kvar många år framöver, men fler utvecklare kommer att omfamna den nyare format när de inser storlek-spara fördelar.

Kameror, mobila enheter och många prylar i allmänhet blir mer och mer sofistikerade och det betyder att bilder och videoklipp som tagits av högre kvalitet och tar upp mer utrymme. Nya format måste vidtas för att lindra detta, och det ser ut som att vi har några mycket lovande alternativ att se fram emot, även om det kommer att ta lite tid att se dem som antagits officiellt.