Hvis du vil fremskynde dit WordPress-websted, giver det et stort afkast på din investering, at finde måder til at reducere størrelsen på dine billeder.

I gennemsnit tegner billeder sig for cirka halvdelen af ​​en websides filstørrelse, så selv små forbedringer kan give store resultater.

WebP er et moderne billedformat, der kan hjælpe dig med at reducere størrelsen på dine billeder uden at ændre, hvordan de ser ud. I gennemsnit vil det at lære at konvertere et billede til WebP, krympe størrelsen med ~ 25-35% uden noget tydeligt tab i kvalitet.

Derfor dykker vi dybt ind i emnet i dette blogindlæg!

Parat? Lad os komme igang!

Hvad er WebP?

Så … hvad er en WebP-fil? Kort sagt er WebP et billedformat, der er udviklet af Google. For eksempel har du billedformater som JPEG eller JPG og PNG, ikke? Okay, men WebP er et alternativt filformat til billeder.

WebP fokuserer på at levere den samme billedfil bare med en mindre filstørrelse. Ved at reducere størrelsen på dine billedfiler kan du stadig levere den samme oplevelse til dit websteds besøgende, men dit websted indlæses hurtigere.

For eksempel fandt Google i Googles WebP-komprimerings undersøgelse, at en WebP-billedfil i gennemsnit er…

Dette er grunden til, at hvis du kører dit websted gennem PageSpeed ​​Insights, er en af ​​de mange anbefalinger at servere billeder i næste generations formater som WebP:

Google PageSpeed ​​Insights foreslår at bruge WebP-billeder

Google PageSpeed ​​Insights foreslår at bruge WebP-billeder

Så hvordan opnår Googles WebP-format disse reduktioner i filstørrelse?

WebP understøtter både lossy og lossless komprimering, så den nøjagtige reduktion afhænger af, om du bruger tabt eller tabsfri komprimering

Med tabt WebP-komprimering bruger WebP noget, der kaldes “predictive coding” for at sænke filstørrelsen. Forudsigelig kodning bruger værdierne på tilstødende pixels i et billede til at forudsige værdier og koder derefter kun forskellen. Det er baseret på VP8-key frame-kodning.

Tab uden WebP bruger et meget mere kompliceret sæt metoder, der blev udviklet af WebP-teamet.

Hvis du vil lære mere om WebP-komprimeringsteknikker i detaljer, er denne artikel et godt udgangspunkt.

Hvilke browsere understøtter WebP?

For at WebP-billeder skal fungere, skal en besøgendes browser understøtte dem. Desværre, mens browserstøtte er vokset meget, er WebP-kompatibilitet stadig ikke universel.

WebP-billeder understøttes af populære browsere som:

Safari er dog den mest bemærkelsesværdige undladelse. På det tidspunkt, vi skriver dette indlæg, understøtter hverken desktop- eller mobilversionerne af Safari WebP-billeder. Apple eksperimenterede kort med WebP-support til Safari i 2016, men der er ikke blevet skubbet yderligere siden da.

Internet Explorer mangler også WebP-support (men Edge understøtter ikke WebP, fordi den er baseret på Chromium).

I alt bruger ca. 77% af internetbrugerne en browser, der understøtter WebP. Så selvom det bestemt har støtte fra flertallet, er 23% for store til at ignorere (i vores WordPress WebP-tutorial nedenfor, viser vi dig, hvordan du håndterer dette, så alle dine besøgende får en fantastisk oplevelse):

WebP-support

WebP-support

WebP vs JPG vs PNG størrelse sammenligning

I henhold til Googles test er WebP-billeder:

Hvis du vil lære mere om Googles metode, kan du finde direkte links til de fulde resultater nedenfor:

Begge test er baseret på over 11.000 billeder, herunder:

Sådan bruges WebP-billeder på WordPress

Da ikke alle browsere understøtter WebP-billeder, kan du ikke bare uploade WebP-billedfiler i dit mediebibliotek og direkte bruge dem i WordPress, som du kan med JPEGs og PNGs.

Igen bruger 23% af mennesker (inklusive alle Safari-brugere) en webbrowser, der ikke understøtter WebP. Hvis du konverterer WebP-billeder og bruger dem direkte i dit content, vil de besøgende ikke være i stand til at se dine billeder, hvilket ville ødelægge deres browseroplevelse.

Bare rolig, der er en løsning!

I stedet for at uploade WebP-billeder til WordPress direkte, kan du bruge et WordPress-plugin, der konverterer dine originale billeder til WebP-formatet og også giver det originale billede som et tilbagefald, hvis en besøgende browser ikke understøtter WebP.

Hvis du f.eks. uploader en JPEG-fil til dit websted, vil pluginet:

På den måde kan alle se dit billede, og alle får den hurtigste oplevelse.

Nedenfor gennemgår vi nogle af de bedste WebP WordPress-plugins, som alle fungerer sammen med Kinsta og Kinsta CDN.

Info

Hvis du bliver hosted hos Kinsta, skal du kontakte vores support, så vi kan oprette en Nginx-regel til WebP-cache-bucket til nogle af disse plugins.

ShortPixel

ShortPixel WordPress-plugin

ShortPixel WordPress-plugin

ShortPixel er et populært WordPress-billedoptimeringsplugin, der kan hjælpe dig med automatisk at ændre størrelse og komprimere de billeder, du uploader til dit WordPress-sted.

Som en del af dens funktionsliste kan ShortPixel også hjælpe dig med automatisk konvertering af billeder til WebP og serverer disse billeder til browsere, der understøtter WebP.

ShortPixel har en begrænset gratis plan, der giver dig mulighed for at optimere ~ 100 billeder pr. måned gratis. Derefter starter betalte planer ved 4,99 USD pr. måned for op til 5.000 billeder / credits eller 9,99 USD engangsbeløb for en pakke på 10.000 credits.

ShortPixel tæller hver WordPress-billedstørrelse, som du optimerer som kredit. Så hvis du vil optimere flere miniature billedestørrelser, kan et billede tænkes at bruge flere kreditter. Der er ingen grænser for filstørrelse for billeder.

Du kan sprede dine ShortPixel-kreditter over ubegrænsede websteder – der er ingen per-site-grænser (og alle dine websteder kan bruge den samme ShortPixel-konto).

For at bruge ShortPixel til at servere WebP-billeder på WordPress, skal du installere pluginet fra WordPress.org og tilføje din API-nøgle (som du kan få ved at registrere dig for en gratis ShortPixel-konto).

På fanen Generelt kan du konfigurere grundlæggende indstillinger for, hvordan billedoptimering fungerer. For eksempel, hvilket komprimeringsniveau, der skal bruges, og om der skal ændres størrelse på billeder:

Sådan indstilles komprimeringsniveau og billeddimensioner i ShortPixel

Sådan indstilles komprimeringsniveau og billeddimensioner i ShortPixel

For at aktivere WebP-billeder skal du gå til fanen Avanceret og:

  1. Marker afkrydsningsfeltet for WebP-billeder
  2. Marker afkrydsningsfeltet for at levere WebP-versionerne.. (dette vises, når du har markeret det første felt)
  3. Vælg alternativknappen til brug af <PICTURE> tag-syntaks (dette vises efter afkrydsning af det foregående felt)
  4. Forlad standard Kun via valg af WordPress-hooks
Sådan aktiveres WordPress WebP-billeder i ShortPixel

Sådan aktiveres WordPress WebP-billeder i ShortPixel

Gem derefter dine ændringer.

Hvis du bliver hosted hos Kinsta, giver ShortPixel dig en advarsel om konfiguration af serverkonfigurationsfiler på Nginx. For at konfigurere disse indstillinger kan du nå ud til Kinsta-support, og vi med stor glæde vil hjælpe med at konfigurere serverkonfigurationen til dig.

Imagify

Imagify WordPress-plugin

Imagify WordPress-plugin

Imagify er et populært plugin til billedoptimering fra den samme udvikler som WP Rocket (som er et af de få cache-plugins, der fungerer med Kinsta).

Det kan automatisk komprimere og ændre størrelsen på de billeder, du uploader til dit WordPress-sted. Derefter kan det også hjælpe dig med at konvertere dem til WebP og servere WebP-versioner til besøgende med browsere, der understøtter det.

Med hensyn til funktioner deler ShortPixel og Imagify en masse ligheder. Den største forskel kommer, når man ser på priser. Mens ShortPixel opkræver dig baseret på billeder uden nogen størrelsesgrænse pr. Billede, forestil dig, at du opkræver, baseret på den samlede filstørrelse uden billedegrænse.

Så hvis du har brug for at optimere masser af store billeder, kan ShortPixels tilgang muligvis være billigere. Men hvis du har brug for at optimere masser af små billeder, kan Imagifys tilgang muligvis være billigere.

Imagify har et begrænset gratis niveau, der giver mulighed for 25 MB optimeringer pr. måned. Derefter starter betalte planer ved 4,99 USD per måned for op til 1 GB eller 9,99 USD for en engangskredit på 1 GB.

Som ShortPixel kan du sprede dine kontobegrænsninger over ubegrænsede websteder.

Træt af en langsom vært for dit WordPress-site? Vi leverer lynhurtige servere og 24/7 support i verdensklasse fra WordPress-eksperter. Tjek vores planer

For at bruge Imagify til at levere WordPress WebP-billeder, skal du installere pluginet fra WordPress.org og tilføje din API-nøgle for at komme i gang.

Når du har aktiveret plugin, kan du bruge boksen Generelle indstillinger til at vælge dit komprimeringsniveau.

Sådan indstilles komprimeringsniveau i Imagify

Sådan indstilles komprimeringsniveau i Imagify

For at aktivere WebP-billeder skal du rulle ned til sektionen Optimering og finde sektionen WebP Format:

  1. Marker afkrydsningsfeltet for at oprette webp-versioner af billeder
  2. Marker afkrydsningsfeltet for at få vist billeder i webp-format…
  3. Vælg alternativknappen for at bruge <billede> -koder
  4. Hvis du er får hosted hos Kinsta og bruger Kinsta CDN, skal du indtaste URL’en til din Kinsta CDN i feltet Hvis du bruger en CDN-boks (vi fortæller dig, hvordan du finder Kinsta CDN-URL nedenfor)
Sådan aktiveres WordPress WebP-billeder i Imagify

Sådan aktiveres WordPress WebP-billeder i Imagify

Hvis du bruger Kinsta CDN, kan du finde din CDN URL ved at åbne dit websted i MyKinsta dashboardet og besøge fanen Kinsta CDN under indstillingerne for webstedet:

Sådan finder du Kinsta CDN URL

Sådan finder du Kinsta CDN URL

Som med ShortPixel, hvis du får hosted hos Kinsta, skal du oprette en Nginx-regel til WebP-cache-busket (skal du blot nå Kinsta-support).

Optimole

Optimole WordPress-plugin

Optimole WordPress-plugin

Optimole er et WordPress-billedoptimering plugin, der fungerer lidt anderledes end Imagify og ShortPixel. Optimole kan automatisk komprimere og ændre størrelsen på dine billeder. Den har dog også to andre bemærkelsesværdige funktioner:

  1. Det kan tjene dine billeder via sin egen CDN (drevet af Amazon CloudFront).
  2. Det tilbyder adaptive billeder i realtid, hvorved Optimole leverer billedet i optimal størrelse til hver besøgende. For eksempel får en person, der gennemsøger på en lille skærm, et billede i lavere opløsning end nogen, der gennemsøger på en retina-skærm.

Denne tilgang ligner andre realtidsoptimerings- / manipuleringstjenester som Cloudinary, imgix, KeyCDN Image Processing osv.

Som en del af denne billedoptimering i realtid kan Optimole også levere WebP-billeder til besøgende med browsere, der understøtter det.

Optimole har en begrænset gratis plan, der kan håndtere visning af billeder til omkring ~ 5.000 besøgende pr. Måned. Derefter starter betalte planer ved 19 USD pr. måned for ~ 25.000 besøgende.

For at komme i gang skal du installere pluginet fra WordPress.org og aktivere det med en API-nøgle (som du kan få ved at tilmelde dig en gratis Optimole-konto).

Når du har gjort det, begynder Optimole automatisk at optimere dine billeder og levere dem via dets CDN. WebP-support er som standard aktiveret, så der er ikke behov for at manuelt aktivere den.

For at konfigurere andre indstillinger, såsom komprimeringsniveauer og skaleringsadfærd, kan du gå til Media → Optimole → Settings:

Området Optimole-indstillinger - WordPress WebP-billeder er som standard aktiveret

Området Optimole-indstillinger – WordPress WebP-billeder er som standard aktiveret

Da Optimole håndterer levering af dine billeder via sin egen CDN, er der ikke behov for at oprette nogen Nginx-regler, hvis du får hosted hos Kinsta.

Forøg ⬆️ sidehastigheden, mens du reducerer ⬇️ billedstørrelser. Lær hvordan du drager fordel af WebP-formatet på dit #WordPress-sted 💥Click to Tweet

Resumé

Dit WordPress-websteds billeder udgør en stor del af filstørrelsen på en gennemsnitlig side. Hvis du kan finde måder at reducere størrelsen på dine billeder på, kan du fremskynde dit websted uden at ændre dine besøgende.

WebP er et moderne billedformat, der kan tilbyde en ~ 25% reduktion i filstørrelse sammenlignet med komparative JPEG- eller PNG-filer.

De fleste moderne browsere understøtter WebP og omkring 77% af internetbrugerne har en browser, der understøtter WebP. Nogle browsere, især Safari, tilbyder dog stadig ikke WebP-support, så du kan ikke servere WebP-billeder til alle besøgende.

For at løse dette problem kan du bruge et WordPress-plugin, der konverterer billeder til WebP og serverer WebP-versioner til besøgende, hvis browsere understøtter dette format, mens du bruger de originale billeder til besøgende, hvis browsere ikke understøtter det.

Tre plugins, der kan hjælpe dig med at gøre dette, er:

For mere taktik til at optimere billeder, se vores fulde guide til at optimere billeder til webpræstationer.

Har du spørgsmål om, hvordan du bruger WebP på WordPress? Spørg os i kommentarerne.


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer