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:
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 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:
- Det berømte Lenna-billede
- 24 billeder fra Kodak true color image suite
- 100 billeder fra Tecnick.com
- En tilfældig prøve på 11.000+ billeder fra Google Image Search
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.
Kinstas billedoptimeringsfunktion
Denne første er ikke ligefrem et plugin, men snarere en indbygget funktion: Kinstas billedoptimering.
Denne funktion – der tilgås via Kinstas brugerdefinerede dashboard, MyKinsta – opretter automatisk optimerede WebP-kopier af dit websteds originale billeder og serverer derefter den mindste af de to billedfiler til dine besøgende.
Ved altid at sikre, at den mindst mulige fil hentes, booster billedoptimering øjeblikkeligt indlæsningstiderne, hvilket i høj grad kan forbedre både dine SEO-resultater og dine brugeres oplevelse. Funktionen udnytter Kinstas lynhurtige CDN direkte til at levere filerne endnu hurtigere.
Webstedsejere kan vælge mellem lossy og lossless komprimering til deres WebP-billeder, afhængigt af deres behov. Optimering kan også slås til eller fra efter ønske, hvis du har brug for at lave nogle test.
Billedoptimeringsfunktionen er helt gratis for alle Kinsta-kunder. Sådan aktiverer du det:
- Upload dine billeder til dit Kinsta-hostede WordPress-mediebibliotek.
- Log ind på dit MyKinsta-dashboard.
- Naviger til WordPress-websteder > webstedsnavn > CDN.
- Klik på knappen Indstillinger under afsnittet Billedoptimering.
- Vælg mellem lossy og lossless komprimering, og klik derefter på Gem indstillinger.
Hvis du ikke allerede er på Kinsta-platformen, kan du selv prøve funktionen uden omkostninger ved at planlægge en demo.
Lossless vs Lossy Compression
Du kan vælge mellem lossless og lossy komprimering til dine filer. Selvom begge metoder vil komprimere dine billedfiler og fjerne deres metadata, er der en stor forskel mellem dem:
- Lossless billedoptimering: Lossless billedkomprimering har ingen indflydelse på kvaliteten af dine billeder. Du bør vælge denne mulighed, hvis billedkvalitet er vigtigere for dig end hastighed.
- Lossy billedoptimering: Lossy billedkomprimering kan reducere kvaliteten af dine billeder. Vælg denne mulighed for at maksimere og prioritere hastighed frem for billedkvalitet.
Dernæst vil vi se på nogle installerbare WordPress-plugins til optimering.
ShortPixel
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 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:
For at aktivere WebP-billeder skal du gå til fanen Avanceret og:
- Marker afkrydsningsfeltet for WebP-billeder
- Marker afkrydsningsfeltet for at levere WebP-versionerne… (dette vises, når du har markeret det første felt)
- Vælg alternativknappen til brug af <PICTURE> tag-syntaks (dette vises efter afkrydsning af det foregående felt)
- Forlad standard Kun via valg af WordPress-hooks
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 er et populært plugin til billedoptimering fra den samme udvikler som WP Rocket.
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.
For at aktivere WebP-billeder skal du rulle ned til sektionen Optimering og finde sektionen WebP Format:
- Marker afkrydsningsfeltet for at oprette webp-versioner af billeder
- Marker afkrydsningsfeltet for at få vist billeder i webp-format…
- Vælg alternativknappen for at bruge <billede> -koder
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 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:
- Det kan tjene dine billeder via sin CDN (drevet af Amazon CloudFront).
- 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:
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.
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. Og glem ikke, at Kinsta-kunder automatisk kan generere komprimerede WebP-billeder, uden omkostninger i diskplads, ved at udnytte Kinstas gratis, indbyggede billedoptimeringsfunktion.
Hvis du har spørgsmål om brugen af WebP på WordPress, så spørg os venligst i kommentarerne nedenfor!
Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.
Skriv et svar