Hvad er WebP?
WebP er et filformat udviklet af Google. Det er udviklet for at udfase brugen af PNG, JPEG og GIF, da det understøtter god komprimering af “almindelige billeder” såsom JPEG, men også kan komprimere gennemsigtige billeder og animerede billeder. WebP er egentlig ikke et nyt billedformat, da det egentlig blev annonceret af Google helt tilbage i 2010, hvor lossless delen blev annoceret i 2012.
Men for at fortælle hvad WebP er, så er det et billedformat som de formater mange efterhånden har kendskab til (PNG og JPEG). WebP giver mulighed for både at lave lossy- (en afvejning mellem kvalitet og størrelse) og lossless-optimering (reduktion i størrelse uden kompromis i kvalitet).
Hvordan fungerer WebP?
For at gøre det simpelt og kort, så er der 2 måder hvorpå WebP fungerer, alt efter om man vil bruge lossy- eller lossless-optimering.
Lossy-optimering bruger en algoritme til at forudsige værdierne af farver, af de nærliggende pixels. Derefter tager den disse værdier og sammenligner med de faktiske værdier. Ud af denne sammenligning vil nogle forskellige være “null” eller 0 og dette fænomen bidrager til yderligere reduktion af størrelsen på WebP-billedet.
Lossless-optimering er – modsat lossy – mere som eksempelvis et JPEG billede. Her sker optimeringen i blokke, som bliver komprimeret og giver en mindre størrelse, men bibeholder billedets kvalitet.
Hvorfor bliver WebP ikke brugt til alt?
Du tænker nok “Hvis WebP har været her siden 2012 og er så fantastisk, hvorfor er det så ikke mere udbredt?”
Som så meget andet med teknologi på nettet, slås de med at slå 100% igennem. Ikke alle moderne browsere understøtter WebP endnu. Ifølge Can I use ses det, at i skrivende stund, så understøtter Internet Explorer, Safari og iOS Safari endnu ikke WebP. Men bare fordi Apple ikke understøtter WebP, betyder det ikke at man skal gå en stor bue udenom. Det er muligt at vise WebP billeder til de besøgende, hvis browser understøtter det, og bruge JPEG og PNG som backup, hvis en Safari bruger kommer forbi.
Hvad er fordelen så ved WebP?
Ud fra Googles dokumentation omkring WebP:
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.
Med mindre filstørrelse, opnås der hurtigere indlæsningshastighed, hvilket er vigtigt når det kommer til at surfe rundt på din side.
Brug WebP billeder på din WordPress side
Det er endnu ikke muligt, at lægge webp-billeder i dit mediebibliotek, som standard i WordPress, hvilket betyder du ikke bare kan uploade dine webp billeder direkte – men ingen panik! ?
Du kan stadig bruge WebP på din WordPress side, du behøver ikke engang selv at komprimere dem, der findes plugins som kan hjælpe dig.
Vi i octokom benytter udelukkende QUIC til vores kunders billeder. Det gør vi, da vi hoster siderne på vore egne servere, som benytter Litespeed.
Hvis du ikke bruger en server med Litespeed kan du bruge et plugin såsom WebP Express plugin, som også giver dig muligheden for at vise autogenererede WebP billeder, til browsere der supportere dem.
Konklusion
Typisk optager billeder omkring 50% af en hjemmesides totale “vægt”. Det er derfor et rigtigt god sted at starte, når du skal have bugt på indlæsningshastigheden på din side. Indlæsningstid er en meget vigtig del af den brugeroplevelse du giver de besøgende på en hjemmeside og vi har faktisk skrevet lidt dybere omkring dette lige her: Hvordan påvirker loadtid din bundlinje?
WebP kan ikke bare spare dig plads på din server, men også gøre at dine besøgende/kunder kan bevæge sig hurtigere rundt på din side. Det er en Win-Win!
