Hvis du vil fremskynde dit WordPress-websted, giver reduktion af dine billeders filstørrelse et betydeligt afkast af din investering. I gennemsnit tegner billeder sig for omkring halvdelen af ​​en websides filstørrelse, så selv mindre forbedringer kan give overvældende resultater. WebP kan hjælpe dig enormt med det!

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 filstørrelsen med ~ 25-35% uden noget tydeligt tab i kvalitet.

De fleste moderne browsere og WordPress 5.8+ understøtter WebP ud af boksen. I denne artikel vil vi dykke dybt ned i dette spændende nye billedformat og vise dig, hvordan du kan udnytte dets awesomeness.

Parat? Lad os komme igang!

Hvad er WebP?

Så hvad er en WebP-fil? I en nøddeskal er WebP et billedformat udviklet af Google til at optimere billeder bedre end populære billedformater (på det tidspunkt). For eksempel har du billedformater som JPEG eller JPG og PNG.

Bemærk: Tjek, hvordan forskellige billedfiltyper kan påvirke hastigheden på dit websted.

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:

  • 25-34% mindre end et sammenligneligt JPEG-billede.
  • 26% mindre end et sammenligneligt PNG-billede.

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?

For det første 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 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:

  • Chrome (desktop og mobil)
  • Firefox (desktop og mobil)
  • Microsoft Edge
  • iOS og macOS Safari (kun macOS 11 Big Sur og nyere)
  • Opera (desktop og mobil)

På det tidspunkt, hvor vi skriver dette indlæg, understøtter Safari kun delvist WebP-billeder.

Internet Explorer mangler også WebP-understøttelse (men Edge understøtter WebP, da det er baseret på Chromium). IE-brugen er dog skrumpet til mindre end 1% af de samlede internetbrugere. Det er en velsignelse for alle på nettet!

I alt bruger omkring 95% af internetbrugerne en browser, der understøtter WebP. Så selvom det bestemt har flertalsstøtte, er de 5% en mindre hindring, især når det er Safari-brugere på ældre macOS-versioner. I vores WordPress WebP tutorial nedenfor, viser vi dig, hvordan du håndterer dette, så alle dine besøgende får en god oplevelse.

WebP-understøttelse på tværs af større browsere.
WebP-understøttelse på tværs af større browsere.

WebP vs JPG vs PNG størrelse sammenligning

I henhold til Googles test er WebP-billeder:

  • 25-34% mindre end sammenlignelige JPEG-billeder.
  • 26% mindre end tilsvarende PNG-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

Fra og med WordPress 5.8 vil du være i stand til at bruge WebP-billedformatet på samme måde som JPEG-, PNG- og GIF-formater. Du skal bare uploade dine billeder til dit mediebibliotek og inkludere dem i dit indhold. Da WordPress 5.8+ understøtter WebP-formatet som standard, behøver du ikke installere tredjeparts plugins for at uploade WebP-billeder. Det burde være tilstrækkeligt til de fleste almindelige brugssager.

For at komme i gang med det samme, kan du henvise til vores hurtige primer om brug af WebP-billeder i WordPress 5.8+. Vi foreslår, at du gennemgår forbeholdene om WebP-support i WordPress.

Men omkring 5% af folkene (hovedsagelig Safari-brugere på ældre macOS) bruger en webbrowser, der ikke understøtter WebP. Hvis du konverterer WebP-billeder og bruger dem direkte i dit indhold, vil disse besøgende ikke kunne se dine billeder, hvilket ville ødelægge deres browsingoplevelse.

Det er heller ikke så ligetil at generere WebP-billeder som at få et JPG/JPEG-billede, som er standardbilledfilformatet på de fleste kameraer, smartphones og online billedbiblioteker. WordPress understøtter ikke automatisk billedkonvertering til WebP-format (endnu!).

Fortvivl ikke! Der er en løsning.

Du kan bruge et WordPress-plugin, der konverterer dine originale billeder til WebP-formatet, og som også giver det originale billede som en reserve, hvis en besøgendes browser ikke understøtter WebP.

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

  • Konverter JPEG-filen til WebP og servér WebP-versionen til Chrome, Firefox, Edge osv.
  • Vis den originale JPEG-fil til besøgende, der gennemser med Safari (på ældre macOS-versioner) og andre browsere, der ikke understøtter WebP.

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.

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 det.

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 (et af de få cache-plugins, der fungerer med Kinsta).

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

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 disse 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.

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
Sådan aktiveres WordPress WebP-billeder i Imagify
Sådan aktiveres WordPress WebP-billeder i Imagify

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 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.

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

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:

Optimole aktiverar WordPress WebP-bilder som standard.
Optimole aktiverar WordPress WebP-bilder som standard.

Da Optimole håndterer levering af dine billeder via sin 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 skade brugeroplevelsen. WebP er et moderne billedformat, der kan tilbyde en ~ 25% reduktion i filstørrelse sammenlignet med komparative JPEG- eller PNG-filer.

Omkring 95% af internetbrugerne bruger allerede en browser, der understøtter WebP. WordPress 5.8+ versioner understøtter også WebP ud af boksen nu. Så der er ingen grund til at du ikke skal bruge det.

Et mindretal af browsere, især Safari på ældre macOS-versioner, tilbyder dog stadig ikke WebP-understøttelse. Derfor kan du ikke vise WebP-billeder til alle besøgende endnu. 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 det, mens du bruger de originale billeder til besøgende, hvis browsere ikke gør det.

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

Hvis du har spørgsmål om brugen af ​​WebP på WordPress, så spørg os venligst i kommentarerne nedenfor!


Spar tid, omkostninger og maksimer webstedets ydeevne med:

  • Øjeblikkelig hjælp fra WordPress-hostingeksperter, 24/7.
  • Cloudflare Enterprise integration.
  • Globalt publikum når med 34 datacentre verden over.
  • Optimering med vores indbyggede Application Performance Monitoring.

Alt dette og meget mere, i en plan uden langsigtede kontrakter, assisteret migration og en 30-dages pengene-tilbage-garanti. Tjek vores planer, eller tal med salgsteamet for at finde den plan, der passer til dig.