webp-filer wordpress

De fleste av oss vet nå at optimalisering av bilder er veldig viktig, ettersom den spiller en enorm rolle i den totale belastningstiden på WordPress-nettstedet ditt. I dag ønsker vi å dele med deg et enkelt alternativ til hvordan du integrerer Googles WebP-filer på ditt WordPress-nettsted. Noen brukere har sett reduksjon av bildefilestørrelse på over 70%!


Hva er WebP?

Hvis du ikke er kjent med WebP, det er et bildefilformat laget av nettprestasjonsteamet hos Google med den hensikt å lage bilder som er mindre og raskere. Den ble først kunngjort i 2010 og inneholder både tapsrike og tapsfrie komprimeringsmetoder. Bildene blir levert til nettleseren fra en webserver basert på MIME-typen den bruker som er image / webp.

WebP tapløse bilder er 26% mindre i størrelse sammenlignet med PNG-er og WebP-tapete bilder 25-34% mindre enn JPEG-er.

Bedrifter som YouTube og eBay bruker allerede WebP for å stille strøm på mange nettsteder. Nedenfor er et eksempel fra eBay, der de på gjennomsnittlig hjemmeside gjennomsnittlig har omtrent 30 WebP-filer.

webp bruk ebay

Hvorfor er WebP så viktig? I følge httparchive, fra august 2016, bilder utgjør over 64% av en gjennomsnittlig nettside. Vanligvis er det mer enn CSS, JS og HTML kombinert. Så det er viktig å velge en robust bildeoptimaliseringsmetode og bildeformat som WebP, slik at du kan redusere sidevekten så mye som mulig. Generelt, jo mindre siden er, jo raskere vil den lastes. Og det vil ikke bare besøkende, men også Google glede som sidehastighet er en rangeringsfaktor.

WebP-støtte

Selv om WebP er veldig spennende, er det også viktig å nevne nettleserstøtte. Ikke alle moderne nettlesere støtter WebP for øyeblikket. I følge kan jeg bruke, WebP støttes for øyeblikket i Chrome 23+, Opera 39+, alle versjoner av Opera mini, Android-nettleser 4.3+ og Chrome for Android.

støtte for nettleser

Men vent! Ikke bli for skuffet, for i veiledningen vi skal vise deg nedenfor, er det en metode å gjøre leverer WebP-filer til støttede nettlesere og JPG / PNG-er som et tilbakeblikk. Dette betyr at nettlesere som ikke støttes, ikke vil se et ødelagt bilde, de vil bare se hva de så før. Tenk på WebP som et tillegg til ditt WordPress-nettsted, i stedet for en migrering.

I følge W3Schools, Chrome har monopol på markedsandelen i nettleseren til litt over 70%. Men ikke bare ta markedsandeler som solid bevis, se på dataene til dine egne besøkende og se hvilke nettlesere de bruker, da det kan variere ut fra din nisje. Du kan imidlertid bli overrasket over hvor skjev statistikken er. I Google Analytics under “Publikum” kan du klikke deg inn i “Nettleser og operativsystem” og se hvilke nettlesere folk bruker når de treffer nettstedet ditt. Vi trakk et tilfeldig nettsted, og som du kan se nedenfor, er 67% av besøkende fra Chrome og ytterligere 1% fra Opera. Så 68% av disse personene kan se og dra nytte av WebP bildefilformat!

nettlesere krom webp

Hvordan bruke WebP-filer i WordPress

I dagens eksempel vil vi bruke en kombinasjon av to forskjellige WordPress-plugins for å få WebP i gang i WordPress. Disse er opprettet og utviklet av teamet over på KeyCDN, som er et globalt innholdsleveringsnettverk (CDN).

  1. [Premium] Optimus Image Optimizer: Tapløs plugin-plugin for bildekompressjon for WordPress, konverterer bilder til WebP
  2. [gratis] WordPress Cache Enabler: Cache-plugin som lar deg tjene WebP til nettlesere som støttes

Optimus Image Optimizer

Du kan laste ned Optimus Image Optimizer fra WordPress depot, fra optimus.io, eller fra plugin-dashbordet. Merk: Det krever en premium-lisens hvis du vil konvertere bildene til WebP. Når den er installert, kan du aktivere “Oppretting av WebP-filer” i plugin-innstillingene.

oppretting av webp-filer

Etter at WebP er aktivert, skaper dette i utgangspunktet et tilleggsbilde for alt som blir konvertert. Så hvis du laster opp en PNG-fil eller JPG, er det nå også en .webp-versjon av bildet ditt. Husk at PNG / JPG fortsatt er nødvendig fordi disse fortsatt brukes til å tjene til nettlesere som ikke støttes. Optimus utfører tapsfri komprimering, så PNG- og JPG-ene dine blir også komprimert.

webp og png filer

Det er også et bulkoptimeringsalternativ i tilfelle du allerede har komprimert bildene dine før og fortsatt trenger å konvertere dem til WebP.

bulk image optimizer

WordPress Cache Enabler

Så nå som du har WebP-bilder, trenger du en måte å fortelle WordPress å servere WebP-bilder til støttede nettlesere og PNG / JPG til de andre nettleserne. Dette kan oppnås med den gratis WordPress Cache Enabler-plugin. Du kan laste ned plugin fra WordPress depot eller installer det fra plugin-dashbordet. Når den er installert, kan du aktivere “Opprett en ekstra WebP-hurtigbufret versjon” i plugin-innstillingene.

cache-aktiveringsinnstillinger

Når du aktiverer dette alternativet, opprettes en ekstra hurtigbufret WebP-versjon av siden din.webp versjoner

Og det er det! Nå skal du ha WebP-filer som kjører på WordPress-nettstedet ditt.

JPG til WebP-sammenligning

Vi kjørte en sammenligning av JPG til WebP for å vise forskjellene du kan oppnå.

FILNAVNORIGINAL JPGKOMPRIMERT JPGWEBP FORMATSTØRRINGSFERSKIL%
jpg-til-webp-1.jpg758 KB685 KB109 kB86%
jpg-til-webp-2.jpg599 KB529 kB58,8 KB90%
jpg-til-webp-3.jpg960 KB881 KB200 KB79%
jpg-til-webp-4.jpg862 kB791 kB146 kB83%
jpg-til-webp-5.jpg960 KB877 KB71,7 KB93%

WebP resulterte i a 85,87% reduksjon i gjennomsnittlig bildestørrelse.

PNG til WebP-sammenligning

Igjen kjørte vi også en sammenligning av PNG til WebP for å vise forskjellene du kan oppnå.

FilnavnOriginal PNGkomprimert PNGWebP-formatStørrelsesforskjell%
png-til-webp-1.png44 KB34 KB30 KB32%
png-til-webp-2.png46 KB35 KB33 KB28%
png-til-webp-3.png43 KB31 KB25 KB42%
png-til-webp-4.png30 kB24 KB18 KB40%
png-til-webp-5.png15 KB11 KB8 KB47%
png-til-webp-6.png34 KB24 KB18 KB47%
png-til-webp-7.png15 KB13 KB8 KB47%
png-til-webp-8.png63 KB47 KB44 KB30%
png-til-webp-9.png48 KB36 KB33 KB31%
png-til-webp-10.png17 KB14 KB11 KB35%
png-til-webp-11.png18 KB13 KB9 KB50%
png-til-webp-12.png61 KB45 KB39 KB36%
png-til-webp-13.png32 KB25 KB21 KB35%
png-til-webp-14.png26 KB21 KB17 KB35%
png-til-webp-15.png14 KB12 KB9 KB36%
png-til-webp-16.png36 KB27 KB24 KB33%
png-til-webp-17.png14 KB12 KB8 KB43%
png-til-webp-18.png21 KB18 KB13 KB38%
png-til-webp-19.png42 KB30 KB27 KB36%
png-til-webp-20.png23 KB20 KB18 KB22%

WebP resulterte i a 42,8% reduksjon i gjennomsnittlig bildestørrelse.

Sammendrag

Som du kan se, er WebP veldig enkelt å implementere på WordPress-nettstedet ditt, og du kan oppnå drastisk mindre bildefilstørrelser! Det er ingen bildekomprimering der ute som kan sammenligne med besparelsene til WebP. Åh, og nevnte vi at WebP har muligheten til å bruke tapsfri komprimering? Det betyr at du ikke vil se noe merkbart kvalitetstap. Hvis du er ute etter en bedre måte å få fart på WordPress, kan WebP være en flott løsning.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me