Het vergelijken van de Roman vs. Geprobeerd en True Image Formaten

0
80

Populaire bestandsformaten zoals JPG, PNG en GIF zijn rond voor een lange tijd. Ze zijn relatief efficiënte en web ontwikkelaars hebben geïntroduceerd vele optimalisatie-oplossingen verder te comprimeren hun grootte. Echter, het tijdperk van de Jpg ‘s, png’ s en Gif ‘ s kunnen komen om een einde als nieuwere, efficiëntere image file formats doel hun plaats in te nemen.

We gaan het verkennen van deze nieuwe bestandsindelingen in dit bericht, samen met een analyse van hoe ze het doet tegen een ander en de vorige formaten. We zullen ook betrekking hebben op optimalisatie technieken te verbeteren met de levering van uw afbeeldingen.

Waarom hebben we behoefte aan nieuwe afbeelding formaten?

Afgezien van de beeldkwaliteit, het meest opvallende verschil tussen de oudere en nieuwere afbeelding formaten is de grootte van het bestand. Nieuwe formaten te gebruiken algoritmen die zijn meer efficiënt bij het comprimeren van data, zodat de bestanden veel kleiner zijn. In het kader van de ontwikkeling van het web, kleinere bestanden betekent snellere laadtijden, wat zich vertaalt in lagere bounce rates, meer verkeer, meer conversies. Alle goede dingen die we vaak prediken.

Zoals met de meeste technologische innovaties, de implementatie van nieuwe afbeelding formaten worden geleidelijk als browsers overwegen en nemen hun normen. In de tussentijd zijn we als web ontwikkelaars zijn geschikt voor gebruikers met verschillende niveaus van ondersteuning. Gelukkig Kan ik al op de top van en de rapportage over de browser ondersteuning voor specifieke afbeelding formaten.

De Nieuwe Spullen

Als we zwerven in een nieuwe grens van de image bestandsformaten, we hebben veel van formaat keuzes. Hier zijn een paar kandidaten die al zijn popping up en het maken van gevallen voor het vervangen van de bestaande vaandeldragers.

WebP

WebP is ontwikkeld door Google als een alternatief voor JPG en kan tot 80 procent kleiner dan Jpeg ‘ s met dezelfde afbeelding.

WebP-browser ondersteuning is het verbeteren van de hele tijd. Opera en Chrome op dit moment ondersteunen. Firefox heeft plannen aangekondigd om het te implementeren. Voor nu, Internet Explorer en Safari zijn de holdouts. Grote bedrijven met ton van invloed, zoals Google en zijn momenteel aan het experimenteren met de opmaak en het maakt al ongeveer 95 procent van de beelden op eBay homepage. YouTube maakt ook gebruik van WebP voor grote miniaturen.

Als je gebruik maakt van een CMS zoals WordPress of Joomla, er zijn extensies om u te helpen met het implementeren van ondersteuning voor WebP, zoals Optimus en Cache Enabler voor WordPress en Joomla ‘ s eigen ondersteunde uitbreiding. Deze zal niet breken uw website voor browsers die geen ondersteuning voor de indeling zo lang als u verstrekt, PNG-of JPG-uitwijkmogelijkheden. Als een resultaat, browsers die ondersteuning bieden voor de nieuwere formaten ziet een performance boost, terwijl anderen de standaard-ervaring. Gezien het feit dat de browser ondersteuning voor WebP is groeiende, het is een geweldige kans om te besparen op de wachttijd.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
23 12 Geen Geen Geen Geen

Mobiele / Tablet

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

HEIF

Hoog rendement image bestanden (of HEIF) daadwerkelijk voorzien van de extensie HEIC (.heic), wat staat voor high efficiency afbeelding container, maar de twee acroniemen worden door elkaar gebruikt. Eerder dit jaar kondigde Apple aan dat zijn nieuwste lijn van producten ondersteunen HEIF indeling standaard.

Op de top van een kleinere bestandsgrootte HEIF biedt meer veelzijdigheid dan andere formaten sinds de ondersteuning van zowel stilstaande beelden en reeksen afbeeldingen. Hierdoor is het mogelijk om de burst-foto ‘ s, focal stapels, blootstelling stapels beelden van video-en andere collecties van beelden in één bestand. HEIF ook ondersteunt transparantie, 3D en 4K.

Naast afbeeldingen, HEIF bestanden kunnen houden van de eigenschappen van een afbeelding, miniaturen, metadata en aanvullende gegevens zoals de diepte kaarten en audio. Afbeelding-afleidingen kunnen worden opgeslagen als goed dankzij de niet-destructieve bewerkingen. Dat betekent bijsnijden, rotaties, en andere wijzigingen ongedaan kan worden gemaakt op elk gewenst moment. Stel je al je verschillende variaties van het beeld, die in een enkel bestand!

Apple doet er alles aan om de overgang zo soepel mogelijk verloopt. Bijvoorbeeld wanneer gebruikers delen HEIF bestanden met apps die niet de ondersteuning van de indeling, zal Apple automatisch op de afbeelding converteren naar een meer compatibel formaat zoals JPG.

Er is geen browser ondersteuning voor HEIF op het moment van dit schrijven.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Geen Geen Geen Geen Geen Geen

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Geen Geen Geen Geen Geen Geen

Dat gezegd zijnde, de indeling van het bestand, en biedt een indrukwekkend bestand besparingen voor zowel video en afbeeldingen. Dit wordt steeds belangrijker als onze apparaten worden sterker en in staat zijn om een hogere kwaliteit van afbeeldingen en video ‘ s, hetgeen resulteert in een grotere behoefte aan efficiënte media-bestanden.

FLIF

Gratis Beeld Lossless Formaat (of FLIF) maakt gebruik van een compressie-algoritme dat de resultaten van de bestanden die zijn 14-74 procent kleiner zijn dan de oudere formaten zonder in te boeten aan kwaliteit (d.w.z. zonder kwaliteitsverlies). Daarom FLIF is een goede pasvorm voor elk type afbeelding of animatie.

De FLIF homepage beweert dat FLIF bestanden 43% procent kleiner dan gemiddelde typische PNG-bestanden. De grafiek hieronder illustreert hoe FILF vergeleken met andere formaten in dit verband.

FLIF vaak leidt tot de meest efficiënte indeling in de tests.

FLIF maakt gebruik van zogenaamde meta-adaptive in de buurt van nul geheel getal arithmetic coding, of (correct) MANIAK. FLIF ondersteunt ook progressieve interlacing dus dat de afbeeldingen worden weergegeven hele zodra ze beginnen met het downloaden, dat is een andere functie die heeft aangetoond dat het verminderen van webpagina bounce rates.

Het potentieel van FLIF is erg spannend, maar er is geen browser ondersteunt op dit moment, noch ziet het eruit zoals alle browsers momenteel overweegt toe te voegen. Terwijl de makers van de indeling wordt hard gewerkt aan het bereiken van de ingebouwde ondersteuning voor populaire web-browsers en beeldbewerkingsprogramma ‘ s, ontwikkelaars toegang tot de FLIF bron code en pak een polyfill oplossing om het uit te testen.

De Bestaande Spullen

Zoals eerder vermeld zullen we waarschijnlijk nog jaren verwijderd van de nieuwe indelingen volledig over te nemen. In sommige gevallen kan het beter zijn om de stok met de beproefde. Laten we eens bekijken wat formaten die we over praten en te bespreken hoe hebben ze vast rond voor zo lang.

JPG

Als de uitspraak standaard voor de meeste digitale camera ‘s en foto’ s delen apparaten, JPG is de meest gebruikte afbeelding-formaat op het internet. W3Techs meldt dat bijna drie kwart van alle websites maken gebruik van JPG-bestanden. Evenzo zijn de meest populaire foto-software voor het bewerken van beelden opslaan als JPG bestanden standaard.

JPG is vernoemd naar de Joint Photographic Experts Group, de organisatie die zich ontwikkelde in de technologie; daarom JPG is als alternatief genoemd JPEG. Je kan zien dat deze acroniemen door elkaar gebruikt.

De indeling dateert al de weg terug naar 1992, en is gemaakt om te vergemakkelijken compressie van bitmap-afbeeldingen. Lossy compressie is een onomkeerbaar proces dat berust op een onjuiste benadering. Het idee was om ontwikkelaars aan te passen compressie ratio ‘ s voor het bereiken van hun gewenste balans tussen bestandsgrootte en beeldkwaliteit.

Het JPG-formaat is perfect voor foto ‘ s; echter, zoals de naam impliceert, lossy compressie gaat met een vermindering van de beeldkwaliteit. Kwaliteit degradeert verder elke keer dat een afbeelding wordt bewerkt en opnieuw opgeslagen, dat is de reden waarom de ontwikkelaars worden geleerd om zich te onthouden van het resizen van afbeeldingen meerdere keren.

GIF

GIF is de afkorting van graphics interchange format. Het hangt af van een compressie-algoritme genoemd LZW, die niet af beeldkwaliteit. Het GIF-formaat ontbreekt de kleur ondersteuning van JPG en PNG, maar het is rond zitten toch dankzij de mogelijkheid om te renderen animaties door het bundelen van meerdere beelden in één bestand. Afbeeldingen die opgeslagen zijn in een GIF-bestand kunt maken in successie het maken van een korte film-achtig effect. Gif ‘ s kunnen worden geconfigureerd voor het weergeven van beeld reeksen een aantal keren loop of oneindig.

Afbeelding met dank aan Giphy.com

PNG

De goede oude portable network graphic (PNG) is in eerste instantie geconceptualiseerd als de opvolger van GIF-formaat en debuteerde in 1996. Het werd speciaal ontworpen voor het representeren van afbeeldingen op het web. In termen van populariteit, PNG is een nauwe runner-up naar JPG. W3Techs beweert dat 72 procent van de websites maakt gebruik van deze indeling. In tegenstelling tot JPG -, PNG-afbeeldingen zijn in staat om van lossless compressie (betekent dat er geen beeldkwaliteit verloren gaat).

Een ander voordeel ten opzichte van JPG is dat PNG ondersteunt transparantie en opaciteit. Sinds de grote foto ‘ s hebben de neiging om te kijken superieur in het JPG-formaat, de PNG-indeling wordt meestal gebruikt voor niet-complexe grafieken en illustraties.

Het vergelijken van de transparantie ondersteuning van JPG (links) en PNG (rechts).

Manieren om het Imago te Verbeteren Optimalisatie en Levering

Er zijn een paar essentiële dingen om te overwegen bij het optimaliseren van afbeeldingen voor het web, omdat elk bestand formaat—met inbegrip van de nieuwe—kan eindigen met het toevoegen van nog een andere laag van complexiteit. Afbeeldingen doorgaans account voor de bulk van de bytes op een web-pagina, zodat afbeelding optimalisatie wordt beschouwd als low-hanging fruit voor het verbeteren van een website de prestaties. De Google Dev Gids heeft een uitgebreid artikel over het onderwerp, maar hier is een korte lijst van tips voor het versnellen van uw afbeelding levering.

Het implementeren van Ondersteuning voor Nieuwe Afbeelding Formaten

Sinds nieuwere formaten zoals WebP nog niet algemeen ondersteund, moet u de toepassingen, zodat ze de juiste middelen om uw gebruikers.

Je moet in staat zijn om te detecteren welke formaten de cliënt ondersteunt en leveren de beste optie. In het geval van WebP, er zijn een paar manieren om dit te doen.

Investeren in een CDN

Een content delivery network (CDN) versnelt de levering van beelden door caching ze op hun netwerk van edge-servers. Daarom, wanneer bezoekers naar je website komen, ze worden doorgestuurd naar de dichtstbijzijnde rand van de server in plaats van de oorspronkelijke server. Dit kan leiden tot enorme tijdwinst, vooral als je gebruikers zijn veel van de oorspronkelijke server.

We hebben een hele post op het onderwerp om te helpen begrijpen hoe Cdn ‘ s werk en hoe dit te beïnvloeden is voor uw projecten.

Het gebruik van CSS in Plaats van Afbeeldingen

Omdat oudere browsers worden nog niet ondersteund beeld schaduwen en afgeronde hoeken, een ervaren web ontwikkelaars zijn gebruikt voor het weergeven van bepaalde elementen, zoals knoppen in de vorm van afbeeldingen. Vergeet niet de dagen bij het weergeven van een aangepast lettertype vereist het maken van beelden voor nieuws? Deze praktijken zijn nog steeds in het wild, maar zijn erg inefficiënte aanpak. In plaats daarvan, gebruik CSS als je kan.

Controleer Uw Beeld Cache-Instellingen

Voor de image-bestanden die niet vaak verandert, kunt u gebruik maken van HTTP caching richtlijnen voor het verbeteren van de laadtijden van je vaste bezoekers. Op die manier, wanneer iemand uw website bezoekt voor de eerste keer in hun browser cache van de afbeelding zodat het niet opnieuw gedownload te worden voor latere bezoeken. Deze praktijk kan ook u geld besparen door het verminderen van kosten voor bandbreedte.

Natuurlijk, onjuiste caching problemen kan veroorzaken. Het toevoegen van een vingerafdruk, zoals een tijdstempel om uw beelden kan helpen voorkomen dat de caching conflicten. Gelukkig zijn de meeste web development platforms die dit automatisch doet.

De grootte van Afbeeldingen voor Verschillende Apparaten

Het uitzoeken hoe we het best geschikt voor mobiele apparaten met inferieure scherm resoluties is een continu proces. Sommige ontwikkelaars niet eens de moeite en gewoon bieden dezelfde image bestanden voor alle gebruikers, maar deze aanpak afval uw bandbreedte en uw mobiele bezoekers. Overweeg het gebruik van srcset zodat de browser bepaalt welke afbeelding formaat moeten leveren op basis van de opdrachtgever afmetingen.

Voor De Compressie Van Afbeeldingen Testen

Het is altijd interessant om te zien dat de verschillen in grootte van elk beeld formaat biedt. In het geval van dit artikel, we vergelijken lossless en lossy beeldformaten samen. Natuurlijk, dat is niet gebruikelijk zo vaak met verlies zal worden kleiner in omvang dan lossless als de kwaliteit van de afbeelding lijdt met het oog op een kleiner beeldformaat.

In ieder geval, de keuze tussen lossless en lossy afbeelding formaten dienen te worden gebaseerd op hoe beeld-intensieve uw site is en hoe snel het al wordt uitgevoerd. Bijvoorbeeld, een e-commerce shop kan comfortabel met een enigszins aangetaste beeld in ruil voor snellere laadtijden, terwijl een fotograaf website waarschijnlijk het tegenovergestelde om te demonstreren talent.

Voor het vergelijken van de grootte van elk van de zes afbeelding formaten vermeld in dit artikel, zijn we begonnen met drie JPG-afbeeldingen en omgezet ze in elk van de andere formaten. Hier zijn de resultaten.

  • Afbeelding 1
  • Afbeelding 2
  • Afbeelding 3

Zoals eerder vermeld, de resultaten hieronder variëren aanzienlijk door de lossless/ ‘lossy’ afbeelding formaten. Bijvoorbeeld, PNG en FLIF beelden zijn zowel lossless, daarom resulteert in grotere afbeelding bestanden.

Afbeelding 1 Maat
Afbeelding 2 Grootte
Afbeelding 3 Grootte

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

Volgens de bovenstaande resultaten HEIF beelden waren kleiner algemene dan een ander formaat. Echter, vanwege hun gebrek aan steun, het is momenteel niet mogelijk om de integratie van de HEIF indeling in web applicaties. WebP kwam uit op een goede tweede en biedt manieren te werk om de minder-dan-ideale hoeveelheid steun van de browser. Voor gebruikers die met behulp van Chrome of Opera, WebP-afbeeldingen zal zeker helpen versnellen van de levering.

Als voor het beeld lossless formaten, PNG is aanzienlijk groter dan het verlies JPG tegenhanger. Echter, wanneer geoptimaliseerd met FLIF, een besparing van ongeveer 50 procent gerealiseerd. Dit maakt FLIF een geweldig alternatief voor degenen die de beelden van hoge kwaliteit tegen een kleinere bestandsgrootte. Dat zei FLIF wordt momenteel niet ondersteund door andere web browsers nog, vergelijkbaar met HEIF.

Conclusie

De oude afbeelding formaten zal het waarschijnlijk nog rond voor vele jaren te komen, maar meer ontwikkelaars zullen omarmen de nieuwere formaten zodra ze beseffen de grootte-kostenvoordelen.

Camera ‘s, mobiele apparaten en vele gadgets, in het algemeen, zijn steeds meer en meer verfijnd betekenis die de beelden en video’ s genomen zijn van een hogere kwaliteit en meer ruimte in beslag. Nieuwe indelingen moeten worden genomen om dit effect te beperken en het lijkt erop dat we een aantal zeer veelbelovende opties om naar uit te kijken, zelfs als het zal enige tijd duren om ze te zien officieel aangenomen.