Bileteoptimalisering er eitt av dei tiltaka i WordPress-ytelse som gir “høgast avkastning”: Med same sidestruktur og same tema vil lasteopplevinga ofte bli merkbart betre med ein gong, så lenge du gjer rett når det gjeld biletstorleik, dimensjonar, format og leveringsmåte.

Men bileteoptimalisering er også det som lettast får folk til å “rote det meir og meir til”, og grunnen er ikkje at teknologien er for vanskeleg, men at informasjonen er for oppstykka:
Du har lese nokre artiklar til å vite om “komprimering”, “WebP/AVIF” og “latlasting”, men så ser du i plugin-skildringa ting som “100 credits gratis kvar månad”, “gratis 20MB” og “1 credit per bilete”, og jo meir du les, jo meir forvirra blir du — held det gratis eigentleg? Korleis blir det trekt? Har du misforstått om det er “same ting”? Og viktigast av alt:Etter at du var ferdig, verka det eigentleg eller ikkje?

Denne artikkelen gjer berre tre ting:

  1. Gi deg eit gjennomførbartVegkart(Kva som skal gjerast først, og kva som skal gjerast seinare)
  2. Forklar vala tydeleg (gratis/betalt: kva er skilnaden, og kven passar dei for)
  3. Skriv opp dei vanlegaste fallgruvene på førehand (så slepp du å leite rundt etter feil etterpå)

1. Grunnlag: Kva WordPress kjem med, og kva det ikkje kjem med

Viss du ikkje først set deg inn i kva WordPress-kjernen allereie har gjort, er det lett at to situasjonar oppstår:

  • Brukte ikkje dei gratis moglegheitene ein kunne fått, men brukte heller tid/pengar på å finne opp hjulet på nytt
  • Trudde WordPress kom til å automatisk konvertera alle gamle bilete til WebP/AVIF, men det gjorde det ikkje

WordPress-kjernen har allereie desse nøkkelfunksjonane innebygde:

  • Responsivt bilete (srcset/sizes): Frå WordPress 4.4 vil kjernen skriva ut for bilete srcsetsizesog bruk dei bileta i fleire storleikar som blir genererte ved opplasting, slik at nettlesaren kan velje ein meir passande ressurs å laste inn ut frå skjermforholda.
  • Innebygd latlasting:Frå og med WordPress 5.5 er innebygd latlasting for bilete slått på som standard, ved bruk av HTML-standarden loading Attributtimplementering.
  • Støttar opplasting av WebPFrå og med WordPress 5.8 kan du laste opp og bruke WebP på same måte som JPEG/PNG, så lenge vertsmiljøet støttar WebP.
  • Støttar opplasting av AVIF: Frå WordPress 6.5 kan du laste opp og bruke AVIF på same måte som JPEG/PNG, dersom vertsmiljøet støttar det.

Men merk:
“Støttar opplasting/bruk” ≠ “automatisk konvertering/automatisk levering”
Det vil seie: Sjølv om du allereie har WP 6.5, vil ikkje dei JPG-/PNG-filene du har i mediebiblioteket ditt, automatisk bli gjorde om til WebP/AVIF; og du vil heller ikkje automatisk få den komplette kjeda for å levere AVIF/WebP basert på nettlesarstøtte, med tilbakefall til originalbiletet for nettlesarar som ikkje støttar det — denne delen krev vanlegvis eit programtillegg eller ei teneste for å bli komplettert.

2. Vegkart: Bileteoptimalisering i 5 steg

Kva ein skal gjere, kvifor, kva som reknast som godkjent, og kva som er typiske fallgruver.

2.1 Få først “storleiken” riktig (det som er lettast å oversjå, men gir størst gevinst)

Mange nettstader er treige ikkje fordi komprimering ikkje er gjort, men fordiLasta ned eit bilete som er mykje større enn visingsområdet
Til dømes viser sida i røynda berre 900 px breidd, men du let den besøkande laste ned originalbiletet på 3000 px. Nettlesaren “lastar berre ned alt og skalerer det så ned”. Dette sløsar med bandbreidd, aukar dekodingstida og gjer første vising tregare.

for WordPress 4.4+Mekanisme for responsive biletesrcset/sizes)nettopp for å løyse dette problemet.

Kva skal til for å vere godkjend:

  • Når sida blir opna på mobil, bør dei nedlasta bileta vere tydeleg mindre enn på datamaskin
  • Same bilete lastar ressursar i ulik storleik på ulike einingar i staden for alltid å laste ned originalbiletet

Dei vanlegaste fallgruvene:

  • Nokre tema/nettsidebyggjarar brukar bilete som CSS-bakgrunnsbilete, eller viser dei på eigne måtar, og kan dermed omgå srcsetsom fører til at store bilete blir lasta ned heile tida
  • Du brukar eksterne biletvertstenester og tredjepartsbiletblokker, og kan òg omgå systemet for fleire biletestorleikar som mediebiblioteket lagar

2.2 Komprimering (få KB ned, men ikkje “øydeleggje” kvaliteten)

Kjernen i komprimering er ikkje “jo mindre, desto betre”, men “det menneskelege auget knapt kan sjå skilnaden, medan storleiken blir tydeleg redusert”.

Reglane er som følgjer:

  • Foto/ekte bilete (personar, produkt, landskap): Prioriter tapskomprimering (størst gevinst)
  • Skjermbilete/grensesnitt eller bilete med mykje tekst: Komprimeringa må vere meir forsiktig for å unngå at teksten blir utydeleg
  • Logo/ikon:Prioriter SVG eller ver varsam med tapsfri komprimering (tapsfull gjer lett kantane uskarpe)

Kva skal til for å vere godkjend:

  • Biletstorleiken på dei fleste sidene har gått tydeleg ned
  • Ingen tydeleg støy, uklare kantar, fargebanding eller utydeleg tekst

2.3 WebP / AVIF (formatstrategi: mindre ved same kvalitet)

WordPress støttar no opplasting WebP (5,8) og AVIF (6,5)
Men for å verkeleg ta i bruk “neste generasjons format”, må ein vanlegvis løyse to ting:

  1. Korleis massekonvertere i det historiske mediebiblioteket(Viss ikkje optimaliserer du berre “nye bilete som blir lasta opp seinare”)
  2. Laga ein kopi eller erstatta originalbiletet(Dette er skiljelinja for risiko; seinare kjem vi til å gå gjennom “erstatt og slett originalbiletet” i Plus WebP)

Tilrådd skrivemåte:

  • WebP: vanlegvis som standard fyrsteval (meir stabil kompatibilitet)
  • AVIF: endå meir komprimering, passar for store bilete/førsteskjermsbilete/albumbilete (men meirAvhengig av miljøstøtte

2.4 Bruk lat lasting på rett måte (ikkje bruk same løysing for alt)

Frå WordPress 5.5Standard forseinka innlastingBilete.
Det kan redusere bandbreiddabruken ved den første renderinga:

  • Latsamlasting passar for ressursar utanfor skjermen“
  • Det viktigaste store biletet på første skjermbilete eignar seg ofte ikkje for utsett innlasting

2.5 leveringsnivå: CDN / bilete CDN

Komprimering, storleik og format løyser “fila blir mindre og meir passande”.
Men om bileta alltid blir henta frå kjeldenettstaden over lang avstand, vil nettverksforsinking framleis tydeleg påverke opplevinga. Då treng ein ei løysing på “leveringslaget” (CDN/bilete CDN).

To typiske retningar:

  • Cloudflare PolishCloudflare-dokumentasjonIntroduserer komprimeringsmåtane til Polish (tapsfri/tapsbasert/WebP), og nemner bruk av format=auto Tillèt bruk av WebP-/AVIF-format
  • Jetpack-nettstadsakseleratorJetpack-dokumentasjonForklar at det vil optimalisera bilete og distribuera dei saman med statiske ressursar gjennom nettverket sitt.

Bileteoptimalisering gjer dei mindre og meir tilpassaCDN ansvarleg for tryggare og nærare levering

3. Val av løysing: Berre to hovudvegar

Det vanlegaste problemet med bileteoptimalisering er ikkje at “ingen tillegg er installerte”, men at det er installert for mange tillegg, noko som fører til dobbel handsaming:
A komprimerer, B komprimerer òg; A konverterer til WebP/AVIF, B gjer det same; A endrar URL-ar, B skriv om att – til slutt klarer du ikkje eingong å seie kva som eigentleg skjer på nettstaden no.

Reglar:

Gå berre éi rute: anten heilt gratis lokalt, eller vel éin av tre skykomprimeringsalternativ.

  • Rute A (heilt gratis lokalt):Plus WebP eller AVIF + EWWW Image Optimizer(eller vel berre ein av dei)
  • Rute B (skykomprimering, vel eitt av tre):ShortPixel / Imagify / TinyPNG

3.1 Rute A: heilt gratis lokalt (Plus WebP or AVIF eller EWWW)

Det som kjenneteiknar denne ruta, er:

  • Du er ikkje avhengig av tredjepartstenester for komprimering med månadsgrense eller betaling per bilete, sjølv om enkelte funksjonar kan tilby valfrie tenester
  • Kostnaden er at batchbehandling kan belaste serveren meir CPU/IO, og krev at du følgjer meir med på strategi og risiko“

3.1.1 Pluss WebP eller AVIFKjernen er “generer/erstatt”, ikkje eit “komprimeringsverktøy” i tradisjonell tyding”

  • Når du genererer alle bileta:Den opphavlege biletfila sin ID blir overskriven av WebP/AVIF, den opphavlege fila blir sletta, og URL-ar i innhaldet blir òg erstatta
  • Programtillegget tilbyr WP-CLI-kommandoar og minner om: Når det er mange filer, er det meir påliteleg å bruke WP-CLI.

Dette betyr: Det er ikkje “at det i det stille lagar ein WebP for deg”, men kan vere eiMigrering av eigedelar(særleg når du slår på alternativ knytte til “erstatt og slett originalbiletet”).

Skilnaden mellom dei to modusane

Modus 1: Behald originalbiletet + lag WebP/AVIF-kopiar (meir stabilt)

  • Fordel: Det er lettare å rulle tilbake ved kompatibilitetsproblem
  • Kostnad: diskbruken vil auke (originalbilete + nytt format + miniatyrbilete i fleire storleikar)

Modus 2: Byt ut og slett originalbiletet (meir aggressivt)

  • Fordelar: Disken vil ikkje vekse så raskt; interne tilvisingar blir direkte gjorde om til det nye formatet
  • Risiko: Dersom du endrar både ressursar og referansar, blir det meir kostbart å feilsøkje kompatibilitetsproblem, særleg når eksterne system eller temalogikk er avhengige av dei opphavlege filnamna, stiane eller formata

Føresetnad

Før du vel “Byt ut og slett originalbiletet”, bør du først gjere ein liten test + ha ei brukbar tryggingskopi; ikkje byt ut heile biblioteket med ein gong.

Typiske fallgruver med Plus WebP eller AVIF

  1. Etter fullstendig biblioteksutskifting blir bileta på enkelte sider viste feil
    Årsaka er vanlegvis ikkje at “biletet er øydelagt”, men at ein del i kjeda, som URL-utskifting, mellomlagring eller miniatyrbilete-strategi, ikkje stemmer.
  2. Jo fleire miniatyrbilete, desto større endringsomfang
    Når du lastar opp eit bilete i WordPress, blir det laga fleire storleikar; tema/utvidingar kan òg leggje til fleire. Fullstendig utskifting tyder at du kan endre eit svært stort sett med filer.
  3. Berre formatkonvertering betyr ikkje nødvendigvis minst mogleg filstorleik
    WebP/AVIF er vanlegvis mindre, men “storleiksstrategi” og “komprimeringsstrategi” er framleis svært viktige. Ikkje tenk på Plus WebP som “eitt klikk for å bli raskare”.

3.1.2 EWWW Image Optimizer:representanten for gratis lokal komprimering

EWWW-plugin-sida har ei svært tydeleg plassering:

  • Det kan optimaliserast på tenaren din ved å bruke ei rekkje verktøy (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp osv.)
  • Om du treng høgare komprimering eller vil spare meir CPU, kan du òg laste av behandlinga som bruker CPU til serveren deira (valfritt).

Kva rolle bør EWWW ha i rute A?

Om du bruker Plus WebP til “formatmigrering/erstatningsstrategi”, er EWWW betre eigna til å ta seg av:

  • Komprimering og storleiksoptimalisering(særleg reduksjon av storleiken på originale ressursar som JPG/PNG)
  • Masseoptimaliser eksisterande mediebibliotek(Med “redusert storleik” som mål, ikkje “byt ut URL”)

Merk

Pluss WebP EWWW : Alle kan konverterast til AVIF eller WebP
Vi rår til å berre installere éin av dei, elles kan det oppstå konfliktar

Typiske fallgruver med EWWW

  1. Serverbelastninga aukar ved batchoptimalisering
    Fordi lokal komprimering belastar CPU/IO. Løysinga er ikkje “ikkje bruk det”, men “i parti, utanom toppbelastning, og ved behov velje avlasting/skyløysing”.
  2. “Å ha generert WebP betyr ikkje nødvendigvis at frontenden leverer WebP
    Mange programtillegg har denne misforståinga: Generering er éin ting, medan leveringsstrategiar (omskriving, picture-taggar, treff i mellomlager osb.) er noko anna.
  3. Gjer same jobb som andre utvidingar
    Dersom du vel rute A, så prøv å unngå å leggja til skykomprimering som ShortPixel/Imagify/TinyPNG oppå dette; dersom du vel rute B, så ikkje slå på erstatningslogikken til Plus WebP igjen. Kjerneprinsippet:Gå heile vegen på éi rute.

3.2 Alternativ B: vel éin av tre for skykomprimering (ShortPixel / Imagify / TinyPNG)

Denne løysinga passar for dei som vil spare serverressursar, vil gjere batch enklare, og aksepterer kvote- eller forbruksbasert prising.
Men det punktet ved skykomprimering som lettast skaper misforståingar, er:Gratiskvoten er ikkje berre “talet på gratis sider”Tal på miniatyrstorleikar, om WebP/AVIF blir generert, og om bileta blir komprimerte fleire gonger, vil påverke forbruket betydeleg.

Nedanfor forklarer vi korleis gratis og betaling fungerer, korleis kvoten blir trekt, dei vanlegaste fallgruvene og kva slags nettstader det passar for.


3.2.1 ShortPixel:100 gratis kredittar/månad, men kredittforbruket aukar med miniatyrbilete og WebP/AVIF

Korleis fungerer gratis/betalt?

I introduksjonen til ShortPixel-utvidinga står det tydeleg:

  • 100 gratis credits kvar månad
  • Det finst òg ekstra uavgrensa månadlege kredittar (utvidingssida viser prisinformasjon)
  • Tilbyr også eingongspakkar med kredittar som aldri går ut, med prisar frå

Tips:

  • Gratis: kvar månad får du eit visst tal credits, til lette nettstader eller testing
  • Einongongspakke: Passar for nettstader med “eit stort mediebibliotek og som vil rydde heile lageret på éin gong” (kjøp éin gong og bruk opp, vanlegvis går ho ikkje ut på dato)
  • Månadleg/ubegrensa: Passar for nettstader som jamleg oppdaterer bilete og treng langsiktig, stabil optimalisering

ShortPixel sin offisielle KB gav òg om “eingongspakke vs uavgrensa månadleg”Tydeleg forklaring: Uavgrensa månadleg blir fakturert per månad (eller per år), gir uavgrensa credits og kjem med ein fast CDN-kvote; eingongs-credits går ikkje ut på dato, slik at du kan bruke dei meir kontrollert etter behov.

Føresetnad

  • Rydding av lageret på den gamle nettstaden: eingongspakkar blir prioriterte
  • Løpande oppdatering: passar betre for månad/ubegrensa (vil du sleppe å telje credits, vel uavgrensa

Det viktigaste: Korleis blir kredittane til ShortPixel rekna ut?

ShortPixel offisiell dokumentasjon KB seier det svært rett fram:

  • WordPress vil generere fleire miniatyrbilete når du lastar opp eit bilete;
  • Kvar optimalisering av miniatyrbilete tel som ein kreditt
  • Viss du vel å generere WebP eller AVIF,Kvar WebP-/AVIF-versjon av originalbiletet og miniatyrbiletet bruker éin ekstra kreditt
  • Du kan utelate enkelte miniatyrbilete frå optimalisering for å redusere forbruket av kredittar.

Kredittar døme

La oss seie at du lastar opp 1 bilete, og temaet/tillegget genererer 8 miniatyrbilete:

  • Berre optimaliser originalbiletet + miniatyrbileta: 1 (originalbiletet) + 8 (miniatyrbileta) = 9 kredittar
  • Viss du òg vil generere WebP/AVIF: Dei 9 over får kvar sin ekstra next-gen-versjon → +9 kredittar til
    Det vil seie at det du trur er “1 bilete”, i røynda kan bruke nær “tosifra credits”.

Så:“Gratis 100 kredittar er ikkje det same som gratis 100 bilete.

Dei vanlegaste feila med ShortPixel

  1. 100 gratis kredittar blir fort brukte opp
    Årsak: mange miniatyrbilete + ekstra kreditt for å generere WebP/AVIF
    Føresetnad
  • Vurder først talet på miniatyrbilete på nettstaden
  • Utelat unødvendige miniatyrstorleikar (berre optimaliser storleikar som faktisk blir brukte)
  • Bestem komprimeringsstrategien først, og køyr deretter i batch for å unngå gjentatt prøving og feiling
  1. Legg samtidig til andre formatkonverteringstillegg
    Viss du både slår på Plus WebP-erstatting og lèt ShortPixel lage/setje inn next-gen-taggar, vil logikken overlappe og gjere feilsøking vanskelegare. Med løysing B let du berre ShortPixel ta seg av dette.
  2. Trur at når det er installert, så leverer frontenden automatisk WebP/AVIF“
    ShortPixel-utvidingssidaNemn at det kan konvertere WebP/AVIF og leggje next-gen-bilete til på frontsida, til dømes via taggar
    Men etter at det er gjort, må ein framleis verifisere effekten.

3.2.2 ImagifyGratis 20MB/månad; kvoten blir trekt basert på “originalstorleik + tal på miniatyrbilete”, omkomprimering blir trekt på nytt

Gratis kvote og plassering

Imagify offisielle prissideDet står veldig tydeleg:Gratiskonto: 20MB kvote per månad
Pluginsida deira gjer det òg tydeleg at ho kan komprimere, endre storleik og konvertere til WebP/AVIF.

Korleis blir kvoten trekt frå?

Imagify offisiell dokumentasjon “Korleis blir kvotebruken rekna ut? forklarer betalingsmekanismen svært tydeleg:

  • Talet på miniatyrbilete påverkar forbruket: Til dømes, om du har 10 miniatyrstorleikar, vil optimalisering av 1 bilete bli til optimalisering av 11 bilete (originalbiletet + 10 miniatyrbilete), og alle desse vil bidra til kvoteforbruket.
  • Trekk kvote etter opphavleg filstorleik: Til dømes, dersom du sender eit bilete på 100 KB til Imagify, blir 100 KB trekt frå kvoten.
  • Å endre komprimeringsnivået og optimalisere på nytt vil bruke kvota igjen
  • Den same API-nøkkelen kan brukast for fleire nettstader, men kvoten blir delt mellom desse nettstadene.

Dette er Imagify sin “grunnleggjande måte å forstå på”:
Det liknar meir på ein datapakke: Kor mykje du sender, så mykje blir trekt frå; jo fleire miniatyrbilete, desto meir blir trekt frå; om du komprimerer hardt fleire gonger, blir det trekt frå fleire gonger.

Lettfatteleg døme på Imagify-kvote

La oss seie at du lastar opp eit originalbilete på 800 KB, og at nettstaden lagar 8 miniatyrbilete.

  • Når Imagify optimaliserer, tek det med både “originalbiletet + 8 miniatyrbilete” (viss du vel å optimalisere alle), noko som betyr at denne eine handlinga vil bruke opp ein kvote som er nær “summen av dei opphavlege storleikane til alle desse filene”.
    Derfor kjennest det for nokre nettstader som om “20MB blir brukt opp veldig raskt”: Det er ikkje fordi Imagify ikkje er nok, men fordi bileta du lastar opp kvar gong er for store, det blir laga for mange miniatyrbilete, og du kanskje òg prøver ulike komprimeringsnivå om att fleire gonger.

Imagify sine vanlegaste fallgruver

  1. Gratis 20MB er ikkje nok for å utføre “tømming av heile nettstaden sin historikk”
    20MB passar vanlegvis betre for testing og lette oppdateringar; viss mediebiblioteket ditt allereie er stort, vil ei eingongs tømming truleg krevje oppgradering.
  2. Gjenteken justering av komprimeringsnivået fører til gjenteken bruk av kvoten
    Imagify forklarar tydelegÅ optimalisere på nytt vil bruke opp kvoten igjen.
    Eg rår deg til å skrive tydeleg kva “strategien” er alt på denne sida:
  • Bruk først nokre få bilete for å fastsetje komprimeringsnivå og visuell kvalitet
  • Køyr i parti etter å ha stadfesta strategien
    Unngå gjenteken prøving og feiling i heile databasen
  1. Fleire nettstader deler same API-nøkkel, så kvoten blir “mystisk” mindre”
    Dersom du brukar den same API-nøkkelen på fleire nettstader, vil kvoten bli delt.
    Så i team- og fleirstadsscenario er det best å avklare kva for stader som blir delte, og kva for stader som blir brukte kvar for seg, så budsjettet ikkje kjem ut av kontroll.

3.2.3 TinyPNG(Tiny Compress Images):gratis 500 credits/månad; konvertering til WebP/AVIF vil trekkje 1 credit ekstra per storleik“

Gratiskvote og prismodellen hennar

WordPress-plugin-sida til TinyPNG er svært tydeleg skriven:

  • 500 credits gratis kvar månad
  • I ei “vanleg WordPress-installasjon” kan ein komprimere om lag Omtrent 100 bilete/månad
  • Men dersom AVIF- eller WebP-konvertering er aktivert:Kvar biletstorleik brukar ein ekstra kredittså kan det truleg berre komprimerast og konverterast Om lag 50 bilete/månad(Det kjem an på kor mange miniatyrbiletstorleikar du har).

Samtidig er Tinify (utviklaren av TinyPNG/TinyJPG) òg på si API-prissideOpplys tydeleg: Ved registrering får du 500 gratis komprimeringar per månad; etter det blir du belasta etter talet på vellukka komprimeringar, utan tvungen abonnementsordning.

Oppsummer korleis TinyPNG blir forstått, med éi setning:
Det blir rekna i credits; jo fleire miniatyrstorleikar og jo meir WebP/AVIF du slår på, dess raskare bruker du opp credits.

Eit lettfatteleg døme på TinyPNG-kredittar

La oss seie at nettstaden din genererer 8 miniatyrbiletstorleikar for kvart bilete:

  • Berre komprimering: originalbilete + 8 miniatyrbilete → krev 9 kredittar
  • Om WebP/AVIF-konvertering er slått på: Kvar storleik trekkjer éin ekstra credit → kan bli nesten dobla
    Dette samsvarer med forklaringa på utvidingssida: Når konvertering er slått på, blir gratiskvoten redusert frå om lag “100 per månad” til “50 per månad”.

Dei vanlegaste fallgruvene med TinyPNG

  1. Trudde 500 credits = 500 bilete
    Nei. Det blir trekt per “biletstorleik/variant”. Utvidingssida gjer allereie tydeleg merksam på at “konvertering trekkjer 1 ekstra kreditt for kvar biletstorleik”.
  2. Tema-/netthandelsutvidinga lagar for mange storleikar, og gratiskvoten går tydeleg ned
    Jo fleire storleikar, desto lettare blir credits brukte opp i større omfang.
  3. Etter at konvertering vart slått på, vart kvoten plutseleg brukt opp mykje raskare
    Dette er ikkje ein bug, det er prismekanismen deira.
    Strategiforslag:
  • Dersom gratisfasen hovudsakleg blir brukt til komprimering og storleiksreduksjon, kan du først berre komprimere. Når du har stadfesta at nettstadstrukturen er stabil og du faktisk treng next-gen, kan du slå på konvertering

4. Tilrådingar etter bruksområde: Korleis velje for ulike typar nettstader

Sjølv om det er same WordPress, er “biletpresspunkta” ulike for innhaldsnettstader, nettbutikkar, porteføljar og medlemssider.

4.1 Innhaldsnettstad/blogg (artiklar med mange bilete, middels oppdateringsfrekvens)

Forslag til prioritet:

  1. Storleiksstrategi (Steg 1)
  2. Komprimering (steg 2)
  3. WebP (Steg 3)

Ei meir passande rute:

  • Vil du gjere det enkelt: Vel eitt av tre i rute B (ShortPixel / Imagify / TinyPNG)
  • Vil du ha det gratis: løysing A (Plus WebP + EWWW), men det blir rådd til å først vurdere risikoen ved å starte med “konservativ modus (ikkje slett originalbileta)”

Typiske fallgruver:

4.2 Nettbutikk-/produktsider (mange miniatyrbilete, mange biletvariantar, stabilitet først)

Der netthandel oftast får problem, er ikkje at “komprimeringseffekten er dårleg”, men at “nokre storleikar blir feil etter optimalisering, miniatyrbilete manglar, eller front-end-komponentar ikkje får tak i bileta”.

Forslag til prioritet:

  1. Først stabilitet: Ver litt meir konservativ med komprimeringsstrategien, og ikkje gjer full utskifting av heile biblioteket med ein gong
  2. Vurder storleiken på miniatyrbilete: Nettbutikktema lagar vanlegvis fleire storleikar, så kvotebruken aukar (særleg med ShortPixel/TinyPNG)
  3. Verifiser i liten skala først, så i stor skala (svært viktig)

Ei meir passande rute:

  • Løysing B er ofte enklare: ShortPixel/Imagify/TinyPNG støttar alle massebehandling, men det viktigaste er å forstå kvoteordninga og vurdere kostnadene på førehand
  • Rute A går òg, men ver meir varsam med Plus WebP si åtferd for “overstyr ID/slett originalbiletet/byt ut URL”: Dette er ei ressursmigrering, og det er ikkje tilrådd å byte ut alt med ein gong.

4.3 Portefølje-/fotograferingsnettstad (følsam for kvaliteten på enkeltbilete, store bilete, høge krav til visuell oppleving)

Forslag til prioritet:

  1. Storleiksstrategi (kontroll av visingsområde)
  2. Komprimeringsstrategi (heller litt større enn å øydeleggje detaljar)
  3. WebP/AVIF (stor gevinst for store bilete, men visuell kvalitet må verifiserast)

Ei meir passande rute:

  • Imagify:Kvoten blir trekt etter “storleiken på originalbiletet”, slike nettstader gjer det lettare å halde “budsjettet under kontroll” (du veit om lag kor mykje kvart stort bilete trekkjer), men du må unngå gjenteken hard komprimering.
  • ShortPixelOm det ikkje er mange miniatyrstorleikar, er credits òg ganske oversiktlege; men om du genererer mange storleikar + next-gen, vil credit-forbruket auke, så du må planleggje på førehand.

5. Sammenlikning av kvote og prising: Forklar tydeleg om gratisversjonen er nok

Kva for ein løner seg eigentleg mest, og kor lenge kan ein klare seg gratis?

5.1 Tre betalingsmodellar

  • ShortPixel(krediteringar)Credits blir rekna ut frå “originalbilete + tal på miniatyrbilete”; generering av WebP/AVIF trekkjer éin ekstra credit for kvar tilsvarande versjon.
  • Imagify(MB kvote): kvoten blir trekt etter “storleiken på originalfila”; jo fleire miniatyrbilete, dess meir blir trekt; ny komprimering blir trekt på nytt.
  • TinyPNG(krediteringar)500 credits kvar månad; når WebP/AVIF-konvertering er slått på, blir det trekt ekstra credits for kvar biletstorleik.

5.2 Metode for rask estimering

Du kan anslå det slik:

  1. Finn eit originalbilete du ofte lastar opp, og sjå omtrent kor stort det er (til dømes 300 KB / 1MB / 3MB)
  2. Sjå kor mange miniatyrbiletstorleikar nettstaden din om lag genererer (til dømes 5 / 10 / 20)
  3. Vel om du vil generere WebP/AVIF (ja/nei)

Deretter kan du bruke følgjande “hovudrekning” for å forstå forbruket:

  • ShortPixel:Per bilete ≈ (1 + talet på miniatyrbilete) kredittar; viss WebP/AVIF blir generert, ≈ dobbelt så mange att (fordi next-gen-versjonen òg krev kredittar)
  • Imagify:Kvart bilete ≈ (storleiken på originalbiletet + storleiken på kvar miniatyr) blir trekt frå kvoten; om du endrar komprimeringsnivået og komprimerer på nytt, blir det trekt ein gong til
  • TinyPNG: gratis 500 credits; dersom nettstaden din genererer mange storleikar per bilete og konvertering er slått på, vil talet på gratis bilete gå tydeleg ned (pluginsida gir ei intuitiv forventning om “om lag 100 bilete/månad” og “om lag 50 bilete/månad”)

6. Risikovarsel

Risiko 1: Ikkje la fleire programtillegg gjere det same

Dette er den vanlegaste “katastrofekjelda”

  • Rute A:Pluss WebP eller AVIF + EWWWDel oppgåvene mellom dei to, ikkje gjer same type konvertering og levering samtidig, eller installer berre éin av dei
  • Alternativ B: ShortPixel / Imagify / TinyPNG Vel éin av tre(Vel éin for komprimering og next-gen)

Risiko 2: “Overskriv ID / slett originalbiletet / byt ut URL” i Plus WebP blir rekna som ressursmigrering

Endå ein gong vil eg understreka:Pluss WebP Skildringa seier tydeleg at ved full generering blir den opphavlege bilet-ID-en overskriven, den opphavlege fila sletta, og innhalds-URL-en erstatta.
Dette betyr at det ikkje er ei “lita innstilling som kan trekkjast tilbake når som helst”, men ei endring på eigedelsnivå.

Den tilrådde strategien bør vere:

  • Test først i liten skala (nokre titals til nokre hundre bilete)
  • Stadfest at vising på framsida, miniatyrbilete og hurtiglageroppdatering fungerer normalt
  • Vurder å behandle heile biblioteket på nytt

Risiko 3: Det faktiske forbruket av gratiskvoten for skykomprimering avheng av talet på miniatyrbilete og val av next-gen

  • ShortPixelMiniatyrbilete og next-gen vil påverke kredittar betydeleg
  • TinyPNGAktivering av WebP/AVIF trekkjer ekstra kreditt for kvar biletstorleik
  • Imagify:trekk etter storleiken på originalbiletet, dess fleire miniatyrbilete, dess meir blir trekt, og ny komprimering vil trekkje på nytt

Risiko 4: “Generert WebP/AVIF” betyr ikkje “frontenden leverer WebP/AVIF”

Mange opplever at det ikkje går raskare etter konvertering. Hovudårsaka er at frontend framleis leverer JPG/PNG, fordi eitt eller fleire ledd ikkje er rett sette opp, som cache, omskriving, taggar eller forhandling med nettlesaren.

7. Korleis kan ein sjekke om det har teke effekt etterpå

4 svært enkle verifiseringspunkt:

  1. Blir innlasting meir stabil og raskare når same side blir oppdatert andre gong(Korleis det kjennest om mellomlagring og optimalisering verkar)
  2. Er biletstorleikane som blir lasta på mobil og datamaskin tydeleg ulike(responsiv srcset/sizes Om det verkar)
  3. Stikkprøvesjekk nokre bilete: om WebP- eller AVIF-filer/ressursar finst(Om nettstaden faktisk er i bruk neste generasjon
  4. Stikkprøvekontroller nokre bilete: forstørr for å sjå om dei er tydeleg uklare, om teksten verkar uskarp(Er komprimeringskvaliteten for høg)

Dersom alle desse fire punkta stemmer, tyder det på at ruta du har valt allereie er komen i gang. Deretter går du vidare og gjer det igjen. Leveringsnivå“, totalt sett vil det vere meir stabilt.

8. Tilrådde tiltak

  1. Vel rute først:
  • Så gratis som mogleg:Plus WebP eller AVIF + EWWW (eller installer berre eitt av dei)
  • Spar serverressursar og betal etter kvote for mindre styrShortPixel / Imagify / TinyPNG vel éin
  1. Test først i liten skala (nokre titals bilete)
  2. Stadfest at alt er i orden før massehandsaming
  3. Det er behov for å styrkje leveringsstabiliteten vidare:Les CDN Akselerasjon

Vanlege spørsmål

1. Kor mange pluginar må eg eigentleg installere? Kan eg installere alle?

Prøv så langt som mogleg å berre gå éi rute.

  • Alternativ A: Plus WebP or AVIF + EWWW Image Optimizer (eller installer berre éin av dei)
  • Alternativ B: Vel éin av ShortPixel / Imagify / TinyPNG
    Å la fleire tillegg på same nettstad samtidig stå for komprimering, WebP-/AVIF-konvertering, URL-endringar eller leveringsomskriving skapar fort rot og er vanskelegast å feilsøkje.

2. Støttar ikkje WordPress allereie WebP/AVIF? Treng eg framleis eit tillegg?

Det er nødvendig å skilje mellom:
“Støttar opplasting/bruk” ≠ “automatisk konvertering/automatisk levering”
WordPress 6.5 vil heller ikkje automatisk konvertere gamle JPG-/PNG-filer i bulk til WebP/AVIF, og vil heller ikkje automatisk hjelpe deg med å setje opp ei full kjede for å “levere AVIF/WebP etter nettlesarstøtte og falle tilbake” når det trengst. Viss du vil at det historiske mediebiblioteket òg skal henge med, treng du vanlegvis eit programtillegg eller ei teneste som fyller ut det som manglar.

3. Kva for steg i bileteoptimalisering gir eigentleg størst utteljing?

Vanlegvis Få “storleik” rett først (srcset/sizes)
Mange nettsider er trege ikkje fordi dei ikkje er komprimerte, men fordi sida berre viser 900 px, medan brukaren må laste ned eit originalbilete på 3000 px. Komprimering kan spare KB, men “feil storleik” gjer at du lastar ned fleire gonger så mykje data heilt utan grunn.

4. Korleis kan eg stadfeste om det som blir lasta inn no er “den mindre versjonen”, og ikkje at originalbiletet alltid blir lasta ned?

Sjå på to fenomen:

  • Når sida blir opna på mobil, er den nedlasta biletstorleiken tydeleg mindre enn på skrivebord
  • Det same biletet lastar ressursar i ulik storleik på ulike einingar
    Om originalbiletet alltid blir lasta ned, er ein vanleg grunn at temaet eller byggjaren brukar biletet som CSS-bakgrunn eller eigendefinert utdata, og dermed går utanom fleire storleikar og srcset i mediebiblioteket.

Tyder “generert WebP/AVIF” at frontenden nødvendigvis leverer WebP/AVIF?

Er ikkje lik.
Genereringa er berre fullført på “filnivå”; om frontenden faktisk leverer WebP/AVIF, kjem også an på omskriving, strategien for picture-taggar, om cachen treff, om nettlesarforhandlinga verkar, og så vidare. Når du er ferdig, må du alltid “stikkprøvekontrollere ressurstypen til nokre bilete”.

6. Kva er eigentleg faren med Plus WebP eller AVIF? Kan eg køyre heile biblioteket med eitt klikk?

Risikopunktet er ikkje “komprimering”, menEndringar på ressursmigreringsnivå

  • Ved fullstendig generering kan den opphavlege biletfil-ID-en bli overskriven, den opphavlege fila bli sletta, og URL-ar i innhaldet bli erstatta.
    Ikkje tilrådd å erstatte heile databasen med ein gong:Test først i liten skala (nokre titals til nokre hundre bilete) + ha ei brukande tryggingskopi, og vurder deretter å behandle heile databasen.

7. Korleis velje mellom dei to modusane i Plus WebP: Behalde originalbiletet vs erstatte og slette originalbiletet?

Enkelt forstått:

  • Modus 1: Behald originalbiletet + lag WebP/AVIF-kopiar (meir stabilt):Enkelt å rulle tilbake, men diskbruken vil auke (originalbilete + nytt format + miniatyrbilete i fleire storleikar).
  • Modus 2: Byt ut og slett originalbiletet (meir aggressivt):Disken blir ikkje så lett oppblåst, men når du “endrar ressursar + endrar referansar”, blir kostnaden ved å feilsøkje kompatibilitetsproblem høgare.
    Jo meir kompleks nettstaden er (nettbutikk/mange tillegg/mange storleikar), desto meir tilrår vi å starte med ein meir stabil modus.

8. Er gratis lokal komprimering med EWWW Image Optimizer godt nok? Vil det overbelaste serveren?

EWWW liknar meir på ein lokal komprimeringsarbeidar: brukar CPU/IO។
Det vanlege er at belastninga aukar ved optimalisering i batchar. Det betyr ikkje at det ikkje fungerer, men at strategien må vere rett: i parti, utanfor rushtid, og ved behov velje avlasting/skyløysing.
Dersom du ønskjer ei problemfri løysing, eller serverressursane er knappe, er rute B meir skånsam for serveren.

9. Kvifor kjennest det som om ShortPixel sine 100 gratis kredittar i månaden forsvinn etter berre nokre få bilete?

fordi credits er ikkje “tal på bilete”vil bli forstørra av miniatyrbilete og next-gen:

  • Originalbiletet + kvart miniatyrbilete tel som ein kreditt
  • Ved generering av WebP/AVIF vil kvar tilsvarande versjon bruke ekstra kredittar
    Så du trur at “1 bilete” kanskje faktisk bruker opp nær “to-sifra credits”. ShortPixel

Kvifor blir Imagify sine gratis 20MB/månad òg raskt brukt opp?

Imagify liknar meir på ein “datapakke”:

  • Som du senderOpphavleg filstorleikTrekk frå kvote
  • Fleire miniatyrbilete gir høgare forbruk
  • Å endre komprimeringsnivået og optimalisere på nytt vil bruke kvoten igjen
  • Éin og same API-nøkkel kan brukast på fleire nettstader, med delt kvote
    Så “20MB blir raskt brukt opp” kjem ofte av at bileta er for store, at det er for mange miniatyrbilete, eller at ein prøver og feilar om att og om att.

11. TinyPNG gratis 500 kredittar/månad, kvifor seier programtillegget at det berre er rundt 100 bilete/månad, og 50 bilete/månad når WebP/AVIF er slått på?

Fordi TinyPNG-kredittane òg blir auka av “storleikar/variantar”:

  • Ei vanleg WordPress-installering komprimerer om lag 100 bilete per månad
  • Aktiver AVIF- eller WebP-konvertering:Kvar biletstorleik brukar ein ekstra kredittså du kan truleg berre komprimere og konvertere om lag 50 bilete per månad (avhengig av kor mange miniatyrstorleikar du har).
    Så 500 credits ≠ 500 bilete.

12. Kor mange miniatyrbilete har eg eigentleg på nettstaden min? Kvifor påverkar det så mykje?

Når du lastar opp eit bilete i WordPress, blir det laga fleire storleikar; tema/utvidingar (særleg nettbutikkar) kan òg leggje til fleire storleikar.
Kredittar/kvotar for skykomprimering blir vanlegvis rekna som “originalbilete + miniatyrbilete saman”, så dess fleire miniatyrbilete, dess fortare blir gratiskvoten brukt opp.

13. Vil «lazy loading» alltid gjera det raskare? Kvifor seier nokon at «lazy loading» tvert imot kan gjera det tregare?

Latlasting passar for “ressursar utanfor skjermen”.
Dersom det viktigaste store biletet på førsteskjermen òg blir lasta inn seinare, kan det gjere opplevinga av førsteskjermen tregare. Standard lat lasting frå WordPress 5.5 og utover er greitt, men ikkje bruk “same løysing for alt”.

14. Eg går rute A eller B, når treng eg CDN / bilete CDN?

Komprimering, storleik og format løyser “filer som er mindre og meir eigna”;
CDN løyser nærare og meir stabil levering
Når bilete blir henta frå opphavsstaden over lang avstand og det gir tydeleg forseinking, vil det som heilskap vere meir stabilt å leggje til CDN/bilete CDN (til dømes Cloudflare Polish / Jetpack Site Accelerator), lese WordPress-akselerasjon

15. Kva er den enklaste måten å stadfeste at det faktisk fungerer etter at eg er ferdig?

Den mest tidsbesparande verifiseringsmetoden:

  • Blir innlasting meir stabil og raskare når same side blir oppdatert andre gong
  • Er biletstorleikane som blir lasta på mobil og skrivebord tydeleg ulike (fungerer srcset/sizes)
  • Stikkprøvesjekk nokre bilete: om WebP- eller AVIF-filer/ressursar finst
  • Stikkprøvekontroller nokre bilete: forstørr for å sjå om dei er tydeleg uklare, om teksten verkar uskarp