Brug WebP i dit webdesign

8. januar 2023
webp
Forfatter på bloggen Christian Cortsen
Af Christian Cortsen
Jeg er grafisk designer og webdesigner, indehaver af det grafiske bureau Vektropol og forfatter her på bloggen.
Opret forbindelse med mig på LinkedIn

Er du webdesigner, webmaster eller marketingmedarbejder i en virksomhed, så er du med stor sandsynlighed vant til at arbejde med billeder, optimere dem og uploade dem til websites.

Men – hvis du bruger JPEG og PNG, så belaster du hjemmesiden unødigt, for der findes et format som er langt bedre komprimeret, og det hedder WebP.

WebP format

WebP formatet er udviklet af Google som en erstatning for både JPEG og PNG, da det ligesom PNG også kan fungere med transparens.

WebP virker udelukkende til web, men til gengæld udkonkurrerer det også både JPEG og PNG i både billedkvalitet og størrelse. Og særlig i forhold til størrelse – altså hvor meget billedet fylder, er der virkelig noget at hente.

Som udgangspunkt kan man spare alt mellem 1/3 til 2/3 i kilobyte og megabyte, og hvis man har et website med mange billeder, så vil det være betydelige mængder data man sparer den besøgende for når hjemmesiden skal indlæses.

Det betyder et hurtigere website, og det er jo enhver webdesigner‘s våde drøm :).

En test der viser forskellene

For lige at vise hvor store forskelle i størrelse der er tale om, så kommer her et par eksempler.

Det er dog vigtigt lige at sige, at størrelser på billeder i den grad afhænger af detaljegraden i billeder, så derfor er nedenstående eksempler et af hvert. Et billede med få detaljer, og et billede med mange detaljer.

I testen her har jeg i begge tilfælde gemt billedet i en opløsning på 2000 x 1334 pixels. Endvidere har jeg eksporteret både WebP og JPEG fra Photoshop.

webp test 1

Det første eksempel her viser at ovenstående billede i WebP format fylder næsten 6,5 gange mindre en JPG formatet.

Det er et billede med lav detaljegrad, så derfor vil fordelen automatisk også være større.

webp vs jpeg test 2

Det andet eksempel her ovenfor, er et billede med meget høj detaljegrad. Det betyder selvfølgelig at det fylder en hel del mere, og generelt ville man nok sjældent vælge sådan et billede i sit webdesign, men eksemplet giver mening.

Ovenstående billede i WebP fylder næsten 3 gange mindre end i JPEG formatet.

Gem som WebP i Photoshop

Ofte eksporterer man billeder til webbrug i Photoshop (JPEG/PNG), men WebP funktionen er “gemt” under “Save a Copy…”.

Sådan gør du:

  1. Forbered dit billede inden du gemmer. Med andre ord; lav ønskede justeringer og sæt størrelsen under “Image” og “Image Size…”.
  2. Gå til “File” og “Save a Copy…”.
  3. I “Format” dropdown-boksen vælger du “WebP”.
  4. Skriv det ønskede filnavn og tryk “Gem”.
  5. I det næste dialogboks vælger du “Lossy” og sætter “Quality” til 75.
  6. De 3 bokse under plejer jeg ikke at sætte flueben i, men det er helt op til dig.

Tjek hvor meget billedet fylder efterfølgende, og hvis du tænker at reducere størrelsen yderligere efterfølgende, kan jeg anbefale at slå vejen forbi TinyJPG.

Ingen Photoshop…?

Har du ikke abonnement på Photoshop, så er der selvfølgelig andre muligheder.

Både dine JPEG og PNG filer kan konverteres flere steder online. Søg på Google og du skal finde…

WebP support

Som før nævnt, så kan WebP kun bruges til web. Det kan ikke bruges til e-mail signaturer, LinkedIn supporterer det heller ikke, Facebook gør det delvist m.v., så – kun til web.

Der er også flere gamle versioner af browsere der heller ikke supporterer formatet, men det er efterhånden de færreste der ikke sidder med en opdateret browser. I hvert fald i den vestlige verden.

Konklusion

I min optik er der ikke meget at rafle om. Få hellere processen sat i gang i dag end i morgen – og gør både dine besøgende og Google glad :).

Tak fordi du læste med!

 

Del dette indlæg