Optimizacija slik na spletnem mestu

Optimizacija slik je eden od najbolj “nagrajujočih” vidikov delovanja WordPressa: če so velikost, dimenzije, oblikovanje in način dostave slik pri isti strukturi strani in temi pravilni, se izkušnja nalaganja pogosto takoj izboljša.

Vendar pa je optimizacija slik tudi najlažji način za ustvarjanje nereda, ne zato, ker je tehnično prezahtevna, temveč zato, ker so informacije preveč razdrobljene:
Preberete nekaj člankov, veste, da “stiskanje”, “WebP/AVIF”, “leno nalaganje”, nato pa pogled na uvod vtičnika in rekel “brezplačno vsak mesec! 100 kreditov na mesec”, “brezplačno 20MB”, “1 kredit na sliko”, vendar bolj ko berem, bolj sem zmeden-- Ali je brezplačno dovolj? Kako odšteti pristojbino? Ali ste napačno razumeli “isto stvar”? In kar je najpomembneje:Ali je dejansko začela učinkovati, ko ste jo naredili, ali ne?

V tem članku so samo tri stvari:

1. vam omogoči, da dobite izvedljivo datoteko.načrt (tudi slika)(Kaj storiti najprej, kaj drugič)
2. Jasno določite, za katero možnost se odločate (kakšna je razlika med brezplačno in plačljivo storitvijo ter za koga je primerna).
3. vnaprej napišite najpogostejše pasti (da vam po končanem delu ne bo treba iskati naokoli in reševati težav).

1. Zaključek: s čim je WordPress opremljen in s čim ne

Če najprej ne ugotovite, kaj že počne jedro WordPressa, boste zlahka storili eno od dveh stvari:

• Namesto da bi uporabljali “proste zmogljivosti”, ki bi jih morali izkoristiti, porabite čas/plačate denar za to, da znova in znova gradite kolo.
• Mislil sem, da bo WordPress “samodejno pretvoril vse stare slike v WebP/AVIF”, vendar se je izkazalo, da ne!

V jedro WordPressa so vgrajene te ključne zmožnosti:

• Odzivne slike (srcset/size): Od WordPressa 4.4 bo jedro izpisalo slike za srcset 与 sizesin uporablja slike več velikosti, ustvarjene med nalaganjem, da brskalniku omogoči izbiro ustreznejšega vira za nalaganje glede na razmere na zaslonu.
• Nativno leno nalaganje: WordPress od različice 5.5 naprej privzeto omogoča leno nalaganje slik po standardih HTML. loading izvajanje atributa.
• Podpora za nalaganje WebP: Od različice WordPress 5.8 lahko prenesete in uporabite WebP kot JPEG/PNG (če vaše gostiteljsko okolje podpira WebP).
• Podpora za nalaganje datotek AVIF: Od WordPressa 6.5 lahko AVIF naložite in uporabite kot JPEG/PNG (odvisno tudi od podpore gostovanja).

Vendar bodite pozorni:
“Podpora za nalaganje/uporabo” ≠ “Samodejna pretvorba/avtomatska dostava”.
To pomeni: tudi če že uporabljate WP 6.5, se ti JPG/PNG v vaši medijski knjižnici ne bodo sami od sebe spremenili v WebP/AVIF; ne boste samodejno dobili celotne povezave “izhod AVIF/WebP v skladu z zmogljivostmi brskalnika in povratna povezava na izvirno sliko za nepodprte brskalnike”! --Ta del je običajno treba popraviti z vtičnikom ali storitvijo.

2. Načrt: optimizacija slik v petih korakih

Kaj in zakaj je treba storiti, kako se kvalificirati in kakšna je tipična jama.

2.1 Najprej pravilno določite “velikost” (najbolj spregledano, vendar najbolj koristno)

Številne postaje so počasne ne zato, ker stiskanje ni izvedeno, temveč zato, kerPrenesena velika slika, ki se razteza daleč čez območje prikaza：
Če je na primer stran dejansko široka le 900px, obiskovalec pa mora prenesti izvirno sliko velikosti 3000px, jo brskalnik samo “prenese in nato skrči”. S tem zapravlja pasovno širino, podaljšuje čas dekodiranja in upočasnjuje prvi zaslon.

WordPress 4.4+Mehanizem odzivnih slik（srcset/sizes) je namenjen prav temu vprašanju.

Naredite, kar se šteje za prestop:

• Ko stran odprete v mobilnem telefonu, mora biti velikost prenesene slike bistveno manjša kot na namiznem računalniku.
• ista slika se na različnih napravah naloži z različnimi velikostmi virov (namesto da bi vedno prenesli izvirno sliko).

Najpogostejše pasti:

• Obstajajo teme/izdelovalci, ki diagrame obravnavajo kot slike ozadja CSS ali jih izpisujejo na prilagojen način, ki lahko zaobide srcsetRezultat je bila velika slika
• Uporabljate zunanje povezane slikovne podlage, slikovne bloke tretjih oseb in lahko tudi obidete sistem več velikosti, ki ga ustvari knjižnica medijev.

---

2.2 Stiskanje (zmanjšajte število KB, vendar ne poslabšajte kakovosti)

Bistvo stiskanja ni “čim manjši, tem boljši”, temveč “razlika je komaj vidna s prostim očesom, vendar je zmanjšanje prostornine očitno”.

Pravila so naslednja:

• Fotografije/posnetki v živo (ljudje, izdelki, pokrajine): Prednostno stiskanje z izgubami (največje povečanje)
• Slike zaslona vmesnika / slike z veliko besedila: Stiskanje bi moralo biti bolj konservativno, da bi se izognili nejasnemu besedilu
• Logotip/ikona: Prednost SVG ali diskretno brez izgub (brez izgub je enostavno prilepiti robove)

Naredite, kar se šteje za prestop:

• Znatno zmanjšanje velikosti slik na večini strani
• Brez vidnega šuma, zamegljenih robov, prekinitev barvnih blokov, zamegljenega besedila

---

2.3 WebP / AVIF (strategija formata: manjši za enako ločljivost)

WordPress že podpira nalaganje WebP (5,8) proti AVIF (6,5)。
Da pa bo format naslednje generacije zares deloval, je običajno treba rešiti dve stvari:

1. Kako paketno pretvoriti zgodovinske medijske knjižnice(V nasprotnem primeru optimizirate samo za “nove slike, naložene pozneje”).
2. Ali želite ustvariti kopijo ali nadomestiti izvirno sliko(To je tvegano prelomno dejanje; pozneje se bomo osredotočili na funkcijo “Zamenjaj in izbriši izvirno sliko” v programu Plus WebP)

Priporočeni slog pisanja:

• WebP: na splošno se raje uporablja kot privzeto (bolj stabilna združljivost)
• AVIF: nadaljnja smer stiskanja, primerna za velike slike/velike slike na prvem zaslonu/albumske slike (vendar boljOdvisnost od okoljske podpore）

---

2.4 Leno nalaganje je treba uporabljati pravilno (ni univerzalno)

WordPress od različice 5.5 naprejPrivzeto leno nalaganjeSlika.
Zmanjša porabo pasovne širine med začetnim upodabljanjem:

• Leno nalaganje za “vire zunaj zaslona”
• Najpomembnejša velika slika na prvem zaslonu (in v mnogih primerih ključna slika na prvem zaslonu) pogosto ni primerna za odloženo nalaganje.

---

2.5 Dostavna plast: CDN / Slika CDN

Stiskanje, določanje velikosti in oblikovanje rešujejo problem “manjših datotek, ki se prilegajo”.
Če pa se slike vedno prenašajo iz oddaljenega vira, bo omrežna zakasnitev še vedno bistveno vplivala na izkušnjo. Tu nastopi rešitev “dostavne plasti” (CDN/Image CDN).

Dve tipični smeri:

• Cloudflare Poljščina：Dokumentacija CloudflarePredstavljene so poljske metode stiskanja (brez izgub/izgubno/WebP) in omenjeno je, da je stiskanje z format=auto Dovoljen je format WebP/AVIF.
• Jetpack Site Accelerator：Dokumentacija JetpackPojasnite, da bo optimiziral slike in jih skupaj s statičnimi viri distribuiral po svojem omrežju.

Optimizacija slik je odgovorna za to, da so vedno manjše in ustreznejše.CDN Odgovoren za zagotavljanje tesnejših in stabilnejših

3. Izbor: samo dve glavni poti

Najpogostejša napaka pri optimizaciji slik ni “brez vtičnikov”, temveč preveč vtičnikov, ki povzročijo podvojeno obdelavo:
A stiska, B stiska, A pretvarja v WebP/AVIF, B pretvarja, A spreminja URL-je, B prepisuje - sploh ne morete ugotoviti, kaj se dogaja na postaji.

Pravila:

Na voljo je le ena pot: ali vse brezplačne lokalne ali stiskanje v oblaku med vsemi tremi možnostmi.

• Pot A (vsi brezplačni lokalni prevozi):Plus WebP ali AVIF + EWWWW Image Optimizer(ali samo eno)
• Pot B (trojna možnost stiskanja v oblaku):ShortPixel / Imagify / TinyPNG

---

3.1 Pot A: Popolnoma brezplačni lokalni (in WebP ali AVIF ali EWWW)

Za to pot so značilni:

• Ne zanašate se na storitve stiskanja tretjih oseb “na mesec/na list” (čeprav so nekatere funkcije lahko na voljo kot izbirne storitve).
• Stroški: paketna obdelava je lahko pri CPU/IO bolj zahtevna za strežnik, zato morate več pozornosti nameniti “strategiji in tveganju”.”

3.1.1 Plus WebP ali AVIF: jedro je “ustvarjanje/nadomestitev”, ni tradicionalno “orodje za stiskanje”.”

• Pri ustvarjanju slik s celotnim obsegom:ID izvirne slikovne datoteke se prepiše z WebP/AVIF, izvirna datoteka se izbriše, URL v vsebini pa se zamenja.。
• Vtičnik zagotavlja ukaze WP-CLI in opozarja: WP-CLI je bolj zanesljiv, kadar je veliko datotek.

To pomeni: namesto “tihega generiranja WebP za vas” je lahkoMigracija sredstev(Še posebej, če vklopite možnost “Zamenjaj in izbriši izvirno sliko”).

Razlike med obema modeloma

Način 1: ohrani izvirno sliko + ustvari kopijo WebP/AVIF (bolj stabilno)

• Za: Lažje se vrnete nazaj v primeru težav z združljivostjo
• Stroški: poraba diska se bo povečala (izvirna slika + nova oblika + več velikosti sličic)

Način 2: Zamenjava in brisanje izvirne slike (bolj agresivno)

• Prednosti: diski se ne razširijo tako hitro; reference postaj so neposredno v novem formatu
• Tveganje: “spreminjate sredstva + spreminjate reference”, zaradi česar je dražje odpravljati težave z združljivostjo (zlasti če so nekateri zunanji sistemi ali logika teme odvisni od prvotnega imena/ceste/formata datoteke).

Tipične pasti pri uporabi protokola Plus WebP ali AVIF

1. Po zamenjavi celotne knjižnice so nekatere slike strani prikazane nenormalno.
   Razlog običajno ni v tem, da je slika “pokvarjena”, temveč v tem, da je neka povezava v verigi zamenjave URL, predpomnilnika, pravilnika o sličicah itd. nepravilna.
2. Večje kot je število sličic, večji je obseg spremembe.
   WordPress, ki naloži sliko, ustvari več velikosti; teme/vtičniki lahko dodajo tudi več velikosti. Popolna zamenjava pomeni, da lahko spremenite zelo veliko zbirko datotek.
3. Samo izvedba migracije formata ne pomeni nujno, da je zvezek vedno najmanjši.
   WebP/AVIF sta na splošno manjša, vendar sta “strategija velikosti” in “strategija stiskanja” še vedno ključnega pomena. Ne razmišljajte o tem, da je Plus WebP “za en klik hitrejši”.

---

3.1.2 EWWW Image Optimizer: predstavnik prostega lokalnega stiskanja

Stran z vtičnikom EWWW je zelo dobro nameščena:

• Na strežniku ga lahko optimizirate z različnimi orodji (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp itd.)
• Če potrebujete večje stiskanje ali večje prihranke, lahko obdelavo, ki zahteva CPU, prenesete na strežnik (neobvezno).

Kakšno vlogo mora imeti EWWW na poti A?

Če program Plus WebP uporabljate kot “strategijo za migracijo/nadomestitev formata”, je EWWW primernejši:

• Stiskanje in optimizacija prostornine(zlasti zmanjšanje teže neobdelanih virov, kot so JPG/PNG).
• Paketna optimizacija zgodovinske medijske knjižnice(cilj je “zmanjšanje obsega” in ne “zamenjava URL”).

Tipična jama EWWW

1. Povečana obremenitev strežnika med paketno optimizacijo
   Ker lokalno stiskanje poje CPU/IO, rešitev ni “ne uporabljajte ga”, temveč “serija, nizka konica, po potrebi razbremenitev/možnost v oblaku”.
2. “Ustvarjen je WebP” ne pomeni, da mora sprednji del ustvariti WebP.
   Veliko vtičnikov trpi zaradi tega nesporazuma: generiranje je ena stvar, strategije dostave (prepisovanje, slikovne oznake, zadetki v predpomnilniku itd.) pa druga.
3. Vedno znova počnete isto stvar z drugimi vtičniki
   Če izberete pot A, ne prekrivajte stiskanja v oblaku tipa ShortPixel/Imagify/TinyPNG; če izberete pot B, ne vklopite logike zamenjave Plus WebP. Osnovno načelo:Ena pot do konca.

---

3.2 Pot B: Trojna izbira stiskanja v oblaku (ShortPixel / Imagify / TinyPNG)

Ta pot je primerna za ljudi, ki “želijo prihraniti strežniške vire, želijo opraviti serijo z manj truda in sprejemajo zaračunavanje na kredit/na količino”.
Najbolj zavajajoča točka o stiskanju v oblaku pa je:Brezplačni krediti niso tako preprosti kot “brezplačni listi”!.. Na porabo lahko bistveno vplivajo število velikosti sličic, ali se ustvari WebP/AVIF ali ne in ali se večkrat ponovno stisne ali ne.

V nadaljevanju bo pojasnjeno: kaj se dogaja z brezplačnimi/plačljivimi storitvami, kako se odštevajo krediti, v katere pasti se boste najverjetneje zapletli in katere vrste spletnih mest so primerne.

---

3.2.1 ShortPixel100 brezplačnih kreditov/mesec, vendar se krediti porabijo za sličice in povečave WebP/AVIF.

Kaj se dogaja z brezplačnim/plačanim

V opisu vtičnika ShortPixel je jasno navedeno:

• 100 brezplačnih kreditov na mesec
• Obstajajo tudi “Dodatne neomejene mesečne kredite” (stran vtičnika vsebuje informacije o ustreznih cenah)
• Na voljo tudi kot “paketi enkratnih kreditov, ki nikoli ne potečejo” (z informacijami o začetni ceni)

Nasvet:

• Brezplačno: dajte določeno količino kreditov na mesec za lahka mesta ali testiranje
• Paketi za enkratno uporabo: primerni za spletna mesta z velikimi knjižnicami medijev, ki želijo naenkrat odstraniti zaloge (kupite enkrat in porabite, običajno ne poteče).
• Mesečno/neomejeno: primerno za spletna mesta s stalno posodobljenimi slikami in dolgoročno stabilno optimizacijo

Uradna KB ShortPixel je prav tako posodobila “Enkratni paket proti neomejenemu mesečnemu”.izrecna razlaga: Neomejeno mesečno je mesečno (ali letno) plačilo, ki ponuja neomejeno število kreditov s fiksno dodelitvijo CDN; enkratni krediti, ki ne potečejo, vam omogočajo večji nadzor nad uporabo na zahtevo.

Bistvo: kako se izračunajo krediti ShortPixel?

Uradna dokumentacija ShortPixel KB se je izrazila zelo preprosto:

• WordPress ustvari več sličic, ko naložite sliko;
• Vsaka optimizacija sličic šteje kot kredit；
• Če se odločite za ustvarjanje zapisa WebP ali AVIF, seZa vsako različico WebP/AVIF izvirne slike in sličice se porabi dodatna kreditna točka.；
• Določene sličice lahko izključite iz optimizacije in tako zmanjšate porabo kreditov.

Primer kreditov：

Recimo, da naložite 1 sliko in tema/vtičnik ustvari 8 sličic:

• Optimizirajte samo izvirno sliko + sličice: 1 (izvirnik) + 8 (sličice) = 9 točk
• Če želite ustvariti tudi WebP/AVIF: še ena različica naslednje generacije za vsakega od 9 zgoraj navedenih → +9 kreditov.
  Z drugimi besedami, tisto, kar se vam zdi “1 slika”, lahko dejansko porabi skoraj “dvomestno število kreditov”.

Torej:“Brezplačnih 100 kreditov” ni enako kot “brezplačnih 100 slik”.

Najpogostejše pasti storitve ShortPixel

1. Brezplačnih 100 kreditov hitro zmanjka
   Glavni vzrok: veliko sličic + dodatni krediti za generiranje WebP/AVIF.
   predlog：

• Najprej ocenite število sličic spletnega mesta
• Izključite nepotrebne velikosti sličic (optimizirajte samo velikosti, ki bodo dejansko uporabljene)
• Strategijo stiskanja določite pred množičnim izvajanjem, da bi se izognili večkratni porabi s poskusi in napakami.

2. Hkratno zlaganje drugih vtičnikov pretvornika
   Če imate zamenjave Plus WebP in ShortPixel, ki generira/vstavlja oznake naslednje generacije, se logika kopiči in je težje odpravljati težave. Pri poti B naj ShortPixel to počne sam.
3. Mislil sem, da če ga namestim, bo “WebP/AVIF v ospredju”.”
   Stran vtičnika ShortPixelOmenil je, da pretvori WebP/AVIF in lahko doda slike naslednje generacije na prvo stran (npr. z označevanjem).
   Še vedno pa je pomembno, da po tem preverite rezultate.

---

3.2.2 ImagifyBrezplačno: 20MB/mesec; kvota se odšteje glede na “velikost izvirne slike + število sličic”, večkratni odbitki se izvedejo za ponovno stiskanje.

Prosti znesek in pozicioniranje

Imagify Uradna cenovna stranPisava je jasna:Brezplačni račun Mesečna kvota 20MB。
Na strani z vtičniki je jasno navedeno, da lahko stisne, spremeni velikost in pretvori WebP/AVIF.

Kako se odšteje kvota?

Imagify Uradna dokumentacija “Kako se izračuna uporaba kvot?” zelo jasno razloži mehanizem odbitka:

• Število sličic vpliva na poraboČe imate na primer 10 velikosti sličic, postane optimizacija 1 slike optimizacija 11 slik (izvirnik + 10 sličic), ki vse prispevajo k porabi kvote.
• Odbitek kvote glede na velikost izvirnega dokumenta: Če na primer pošljete sliko velikosti 100 KB v Imagify, se od kvote odšteje 100 KB.
• Sprememba stopnje stiskanja in ponovna optimizacija ponovno porabita kvoto。
• Isti ključ API lahko uporabljate za več spletnih mest, vendar se kvote delijo med njimi.

To je Imagifyjev “temeljni način razumevanja”:
To je bolj podobno paketu za promet: odšteje toliko, kolikor pošljete; več kot imate sličic, več odšteje; in odbitek se ponovi, če ga večkrat pritisnete.

Enostaven za branje primer kvote Imagify

Recimo, da naložite izvirno sliko velikosti 800 KB in spletno mesto ustvari 8 sličic.

• Imagify optimizira tako, da vključi “izvirno sliko + 8 sličic” (če izberete optimizacijo vseh), kar pomeni, da to posamezno dejanje porabi kvoto, ki je blizu “izvirne velikosti vseh teh datotek skupaj”.
  Zato se nekaterim spletnim mestom zdi, da “20MB hitro zmanjka”: ne gre za to, da Imagify ne zadostuje, temveč za to, da nalagate preveč slik naenkrat, preveč sličic in verjetno vedno znova preizkušate ravni stiskanja.

Najpogostejše pasti storitve Imagify

1. Brezplačno 20MB Premalo za izvedbo “popolnega popisa zgodovine spletnega mesta”
   20MB je običajno primernejši za testiranje z majhnimi posodobitvami; če je vaša mediatoteka že velika, bo enkratno čiščenje verjetno zahtevalo nadgradnjo.
2. Ponavljajoče se prilagajanje stopenj stiskanja povzroča podvajanje porabe kvot.
   Družba Imagify pojasnjuje, daPonovna optimizacija bo ponovno porabila kvoto.
   Predlagam, da na tej strani pojasnite “strategijo”:

• Začnite z majhnim številom slik, da določite stopnjo stiskanja ter videz in občutek.
• Določite strategijo in jo nato izvedite v večjih količinah
  Izogibajte se ponavljajočim se poskusom in napakam v celotni knjižnici

3. Več spletnih mest, ki si delijo ključ API, povzroči “nerazložljivo zmanjšanje kvot”.”
   Če isti ključ API uporabljate za več kot eno postajo, je kvota skupna.
   Zato je v scenarijih z ekipo/več postajami najbolje jasno določiti, katere postaje so skupne in katere se uporabljajo posamezno, da se izognete neobvladljivim proračunom.

---

3.2.3 TinyPNG(Tiny Compress Images): brezplačno 500 kreditov/mesec; ob prehodu na WebP/AVIF se “odšteje 1 kredit na velikost”.”

Brezplačni krediti in ideje za obračunavanje

Stran vtičnika TinyPNG za WordPress je zelo jasna:

• 500 kreditov na mesec brezplačno
• V “Splošna namestitev WordPressa” lahko verjetno stisnete Približno 100 slik/mesec
• Če pa je omogočeno pretvarjanje AVIF ali WebP:Za vsako velikost slike se porabi dodatno dobroimetjeZato ga je mogoče stisniti in pretvoriti le Približno 50 slik/mesec(odvisno od tega, koliko velikosti sličic imate).

Medtem je podjetje Tinify (razvijalci programov TinyPNG/TinyJPG) tudi Stran s cenami APIOpis: Prijavite se in prejmite 500 brezplačnih kompresij na mesec; nato se vam bo račun izstavil glede na število uspešnih kompresij, brez obvezne naročnine.

V enem stavku povzemite razumevanje programa TinyPNG:
Računamo kredite; več kot imate velikosti sličic in več kot imate vklopljenih WebP/AVIF, hitreje se porabijo krediti.

Pregledni primeri kreditov TinyPNG

Recimo, da vaše spletno mesto ustvari 8 velikosti sličic za vsako sliko:

• Samo stiskanje: izvirnik + 8 sličic → potrebnih je 9 kreditov
• Če je vklopljena pretvorba WebP/AVIF: ena dodatna točka na velikost → verjetno skoraj dvojna!
  To se ujema z opisom na strani vtičnika: po vklopu se brezplačna količina spremeni s približno “100 kartic/mesec” na “50 kartic/mesec”.

Najpogostejše pasti TinyPNG

1. Mislil sem, da 500 kreditov = 500 slik
   Ni. Porabi se z “velikostjo slike/variante”. Stran vtičnika jasno opozarja, da “pretvorbe odštejejo dodaten 1 kredit za vsako velikost slike”.
2. Teme / vtičniki za e-trgovino ustvarjajo preveč velikosti in brezplačni krediti se znatno zmanjšujejo
   Več kot je velikosti, lažje je kredite povečati in porabiti.
3. Ko omogočite pretvorbo, ugotovite, da so krediti nenadoma neporabljeni.
   Ne gre za napako, temveč za mehanizem za obračunavanje.
   Strateški nasveti:

• Če se brezplačna faza uporablja predvsem za stiskanje in zmanjšanje teže, lahko začnete samo s stiskanjem in nato vključite pretvorbo, ko ste prepričani, da je struktura vašega spletnega mesta stabilna in da resnično potrebujete novo generacijo.

4. Priporočilo za podcenarij: kako izbrati različne vrste lokacij

Tudi WordPress, spletna mesta z vsebino, spletna mesta za e-trgovino, portfelji in članska spletna mesta nimajo enakih “točk pritiska” za slike.

4.1 Vsebinska spletna mesta/blogi (veliko grafičnih člankov, srednje pogoste posodobitve)

Prednostna priporočila:

1. Strategija določanja velikosti (korak 1)
2. Kompresija (korak 2)
3. WebP (korak 3)

Primernejša pot:

• Želite shraniti: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Če želite brezplačno: pot A (Plus WebP + EWWW), vendar je priporočljivo začeti s “konzervativnim načinom (brez brisanja izvirne slike)”, da ocenite tveganje.

Tipična jama:

• Prva slika na strani s člankom je zelo velika, nepravilna strategija lenobnega nalaganjaUpočasni prvi zaslon

4.2 Spletna stran e-trgovine/izdelkov (veliko sličic, veliko različic slik, najprej stabilnost)

E-trgovina je najverjetneje problem ni “učinek stiskanja ni dober”, ampak “optimizirana velikost nekaterih ni prava, manjkajo sličice, sprednje komponente ne morejo dobiti slike”.

Prednostna priporočila:

1. Najprej stabilnost: konzervativna strategija stiskanja, ne izvajajte takojšnje zamenjave celotne knjižnice
2. Ocenjevanje velikosti sličic: teme za e-trgovino običajno ustvarjajo več velikosti, kar povečuje porabo kvot (ShortPixel/TinyPNG je še posebej opazno).
3. Izvedite validacijo v majhnem obsegu pred serijo (zelo pomembno).

Primernejša pot:

• Pot B je običajno bolj enostavna: ShortPixel/Imagify/TinyPNG lahko vsi uporabljajo serije, pri čemer je ključnega pomena, da razumete mehanizem kvot in vnaprej ocenite stroške.
• Pot A je v redu, vendar bodite bolj previdni pri obnašanju Plus WebP “prepiši ID-je/izbriši izvirne slike/spremeni URL-je”: gre za migracijo sredstev, zato ni priporočljivo takoj zamenjati celotne stvari.

4.3 Portfolio/fotografska postaja (občutljiva na kakovost posamezne slike, velike slike, visoke zahteve glede pregledovanja)

Prednostna priporočila:

1. Strategija velikosti (nadzor območja prikaza)
2. Strategija stiskanja (bolje je biti večji, kot da bi uničili podrobnosti)
3. WebP/AVIF (dobički pri velikih slikah so očitni, vendar preverite pogled)

Primernejša pot:

• Imagify: Odštejte kvoto glede na “velikost izvirne slike”, to mesto je lažje narediti “proračunsko nadzorovano” (veste, koliko je treba odšteti za vsako veliko sliko), vendar da bi se izognili ponavljajočim se represijam.
• ShortPixel: Če velikost sličice ni velika, so krediti tudi zelo intuitivni; če pa ustvarite veliko velikosti +next-gen, se bo poraba kreditov povečala, zato morate načrtovati vnaprej.

5. Primerjava kvot in zaračunavanja: kako razumeti “brezplačno ni dovolj”

Katera ponudba je ugodnejša in kako dolgo bo brezplačna?

5.1 Trije modeli povračila stroškov

• ShortPixel(krediti): Krediti temeljijo na “izvirni sliki + številu sličic”; dodatni krediti se odštejejo za vsako ustvarjeno ustrezno različico WebP/AVIF.
• Imagify(kvota MB): Kvoto odštejte glede na “velikost izvirne datoteke”; več kot je sličic, več je odbitkov; pri ponovnem stiskanju se odbitki ponovno izvedejo.
• TinyPNG(krediti): 500 kreditov na mesec; če omogočite pretvorbo WebP/AVIF, odštejete dodatne kredite za vsako velikost slike.

5.2 Metode hitrega ocenjevanja

To lahko ocenite takole:

1. Poiščite naključno “izvirno sliko, ki jo pogosto nalagate” in preverite, kako velika je (npr. 300KB / 1MB / 3MB).
2. Odvisno od tega, koliko velikosti sličic ustvari vaše spletno mesto (npr. 5 / 10 / 20).
3. Odločite se, ali želite ustvariti WebP/AVIF (da/ne)

Za razumevanje porabe uporabite naslednjo “miselno matematiko”:

• ShortPixel: ≈ (1 + število sličic) kreditov na sliko; če generirate WebP/AVIF, se ≈ spet podvoji (ker tudi različica naslednje generacije upošteva kredite)
• Imagify: Vsaka slika ≈ (velikost izvirnika + velikost vsake sličice) odšteje kvoto; ob spremembi stopnje stiskanja in ponovnem stiskanju se kvota ponovno odšteje.
• TinyPNG: 500 brezplačnih kreditov; če vaše spletno mesto ustvari veliko velikosti na sliko in je omogočeno pretvarjanje, se število brezplačnih kreditov znatno zmanjša (stran vtičnika daje vizualno pričakovanje “~100 kreditov/mesec” proti “~50 kreditov/mesec”)

6. Opozorila o tveganjih

Tveganje 1: Ne dovolite, da več vtičnikov vedno znova počne isto stvar

To je najpogostejši “vir nesreče”.”

• Pot A:Plus WebP ali AVIF + EWWWW(Razdelite delo med obema, ne izvajajte istočasnih pretvorb in dostave ali namestite le eno od njiju)
• Pot B: ShortPixel / Imagify / TinyPNG izberite tri.(izberite eno za stiskanje in novo generacijo)

Tveganje 2: Plus WebP-jeva funkcija “Overwrite ID / Delete Original Image / Replace URL” je migracija sredstev.

Poudarek dodan:Plus WebP V opisu je jasno navedeno, da polno generiranje prepiše izvirni ID slike, izbriše izvirno datoteko in nadomesti URL vsebine.
To pomeni, da ne gre za “majhno nastavitev, ki jo je mogoče kadar koli umakniti”, temveč za spremembo na ravni sredstev.

Predlagana strategija bi morala biti:

• Najprej majhen test (od nekaj deset do nekaj sto)
• Potrdite, da prikaz v ospredju, sličice in posodobitve predpomnilnika delujejo pravilno.
• Ponovna preučitev popolne obdelave knjižnice

Tveganje 3: Dejanska poraba “brezplačnih kreditov” za stiskanje v oblaku je odvisna od števila sličic in izbire naslednje generacije.

• ShortPixel: Miniature in next-gen bistveno vplivajo na kredite.
• TinyPNG: Če omogočite WebP/AVIF, se za vsako velikost slike odšteje dodaten kredit.
• Imagify: odšteto glede na velikost izvirne slike, več sličic odšteto več, močan pritisk bo ponovil odbitek!

Tveganje 4: “Ustvarjen WebP/AVIF” ne pomeni, da “sprednja pisarna dostavlja WebP/AVIF”.”

Veliko ljudi se po pretvorbi počuti “ne hitreje”, ker frontend še vedno izpisuje JPG/PNG (predpomnilnik/prepisovanje/označevanje/spogajanja z brskalnikom niso na pravem mestu).

7. Kako preveriti, ali je po opravljenem dejanju začelo učinkovati?

4 zelo preproste točke potrjevanja:

1. ali se ista stran osveži drugič in se nalaga bolj dosledno in hitreje.(Predpomnilnik in optimizacija fizičnega občutka, ali deluje)
2. Ali se velikosti slik, naloženih na mobilnih telefonih in namiznih računalnikih, bistveno razlikujejo?(odzivno) srcset/size (ne glede na to, ali delujejo ali ne)
3. Nekaj slik preverite na kraju samem: ali so prisotne datoteke/viri WebP ali AVIF(Ali spletno mesto dejansko uporablja naslednja generacija）
4. Vzorčite nekaj slik: povečajte jih in preverite, ali so vidno zabrisane, ali je besedilo nejasno.(stisnjena masa ni prevelika)

Če se vsi štirje podatki ujemajo, je bila izbrana pot opravljena. Naslednji korak. CDN “Dostavna plast”, bo celoten sistem bolj stabilen.

8. Priporočila za ukrepanje

1. Najprej izberite pot:

• Poskušam biti čim bolj svoboden.: Plus WebP ali AVIF + EWWWW (ali samo eden od njih)
• Želite prihraniti strežniške vire, plačati na kredit za večjo varnost: ShortPixel / Imagify / TinyPNG - izberite enega!

2. Najprej naredite majhen test (nekaj deset)
3. Pred pošiljanjem se prepričajte, da je vse v redu
4. Potrebne so nadaljnje izboljšave stabilnosti dostave:Preberite CDN Pospeševanje

pogoste težave

1. Koliko vtičnikov moram namestiti? Ali jih lahko namestim vse?

Poskusite izbrati le eno pot.

• Pot A: Plus WebP ali AVIF + EWWWW Image Optimizer (ali samo eden od njih)
• Pot B: ShortPixel / Imagify / TinyPNG - izberite enega!
  V isti postaji ob istem času naj več kot en vtičnik za “stiskanje / prenos WebP / AVIF / sprememba URL / dostava prepisovanje”, najverjetneje dobili več in bolj kaotično, ampak tudi najtežje preveriti.

2. Ali WordPress že ne podpira WebP/AVIF? Ali še vedno potrebujem vtičnik?

Treba ga je ločiti:
“Podpora za nalaganje/uporabo” ≠ “Samodejna pretvorba/avtomatska dostava”.
WordPress 6.5 prav tako ne pretvori starih JPG/PNG v WebP/AVIF samodejno, niti samodejno ne opravi celotnega postopka “izvoza AVIF/WebP v brskalnik, ki je zmožen in rezervni” namesto vas. Običajno je potreben vtičnik ali storitev, da zgodovinska medijska knjižnica deluje.

3. Kateri korak pri optimizaciji slik je najbolj koristen?

Običajno je Najprej pravilno nastavite “velikosti” (srcset/sizes).。
Številna spletna mesta niso počasna, ker nimajo kompresije, temveč ker je stran velika le 900px, uporabnik pa mora prenesti sliko velikosti 3000px. Stiskanje prihrani kilobajte, vendar boste zaradi “napačne velikosti” prenesli nekajkrat več podatkov za nič.

4. Kako sem lahko prepričan, da nalagam “manjšo” sliko in ne originalne slike za vedno?

Oglejte si dva pojava:

• Ko stran odprete v mobilnem telefonu, je velikost prenesene slike občutno manjša kot na namiznem računalniku.
• Enaka slika se v različnih napravah naloži z različnimi velikostmi virov
  Če se izvirna slika prenese za vedno, je pogost razlog, da tema/ustvarjalec obravnava sliko kot sliko ozadja CSS ali izpis po meri, pri čemer zaobide več velikosti medijske knjižnice s srcset.

5. Ali “WebP/AVIF generated” pomeni, da mora sprednji del ustvarjati WebP/AVIF?

Ni enako.
Ustvarjanje je samo “datotečni sloj”; ali prednji del dejansko zagotavlja WebP/AVIF, je odvisno od prepisovanja, politik označevanja slik, zadetkov predpomnilnika, veljavnih pogajanj brskalnika itd. Ko končate, ne pozabite “preveriti nekaj slik za vrste virov”.

6. Plus Kaj je tako nevarnega pri WebP ali AVIF? Ali lahko z enim klikom zaženem celotno knjižnico?

Njegova točka tveganja ni “stiskanje”, temvečSpremembe ravni migracije sredstev：

• Popolna generacija lahko prepiše ID izvirne slikovne datoteke, izbriše izvirno datoteko in nadomesti URL v vsebini.
  razlog, zakajNi priporočljivo takoj zamenjati celotne knjižnice.: Najprej preizkusite v majhnem obsegu (deset ~ sto) + imejte na voljo varnostne kopije, nato pa razmislite o obdelavi celotne knjižnice.

7. Kakšna je izbira med dvema načinoma Plus WebP: ohranitev izvirne slike in zamenjava ter brisanje izvirne slike?

Enostavno razumevanje:

• Način 1: ohrani izvirno sliko + ustvari kopijo WebP/AVIF (bolj stabilno): Priročno za povratne kopije, vendar se disk poveča (izvirna slika + nova oblika + več velikosti sličic).
• Način 2: Zamenjava in brisanje izvirne slike (bolj agresivno): diski so manj nagnjeni k napihovanju, vendar “spreminjate sredstva + spreminjate reference”, zaradi česar je dražje odpravljati težave z združljivostjo.
  Bolj kot je spletno mesto kompleksno (e-trgovina/več vtičnikov/več velikosti), bolj priporočljivo je začeti s stabilnejšim modelom.

8. Ali je brezplačno lokalno stiskanje EWWW Image Optimizer dovolj? Ali bo preobremenilo strežnik?

EWWW je bolj “lokalni kompresor”: poje CPU/IO.
Običajno se obremenitev med paketno optimizacijo poveča, kar ne pomeni, da “ne deluje”, temveč da mora biti strategija pravilna: paketna optimizacija, nizke konice in po potrebi možnosti raztovarjanja/oblaka.
Če želite prihraniti ali če imate premalo strežniških virov, je pot B prijaznejša do strežnika.

9. ShortPixelovih 100 brezplačnih kreditov/mesec, zakaj se mi zdi, da jih ni več na nekaj slikah?

zaradi krediti niso “število slik”.”Naslednja generacija bo povečana s sličico z naslednjo generacijo:

• Originalna slika + vsaka sličica šteje kot kredit
• Če se ustvari WebP/AVIF, se za vsako ustrezno različico porabi dodaten kredit.
  Tako lahko tisto, kar se vam zdi “1 slika”, dejansko porabi skoraj “dvomestno število kreditov”. shortPixel

10. Imagifyjev brezplačni 20MB/mesec, zakaj ga tudi hitro zmanjka?

Imagify je bolj podoben “prometnemu paketu”:

• Kot ste ga poslali.Velikost izvirne datotekeodbitek kvot
• Več kot imate sličic, več porabite
• Sprememba stopnje stiskanja za ponovno optimizacijo bo ponovno porabila kvoto
• Isti ključ API za več spletnih mest, souporaba kvot
  Tako je “20MB kmalu zmanjka” pogosto posledica prevelikih slik, prevelikega števila sličic ali ponavljajočih se poskusov in napak.

11. TinyPNG je brezplačen za 500 kreditov/mesec, zakaj vtičnik pravi, da je le približno 100 kreditov/mesec in nato 50 kreditov/mesec z WebP/AVIF?

Ker so krediti TinyPNG povečani tudi s “size/variant”:

• Običajna namestitev WordPressa verjetno stisne približno 100 listov/mesec.
• Omogočite pretvorbo AVIF ali WebP:Za vsako velikost slike se porabi dodatno dobroimetjeTako lahko verjetno stisnete in pretvorite le približno 50 slik na mesec (odvisno od števila velikosti sličic).
  Torej 500 kreditov ≠ 500 slik.

12. Koliko sličic je na mojem spletnem mestu? Zakaj je to tako pomembno?

WordPress ustvari več velikosti za nalaganje slik; teme/vtičniki (zlasti e-trgovine) lahko dodajo več velikosti.
Krediti/kvote za stiskanje v oblaku so običajno “izvirnik + sličice skupaj”, zato več kot imate sličic, manj brezplačnih kreditov lahko uporabite.

13. Ali je leno nalaganje vedno hitrejše? Zakaj nekateri pravijo, da leno nalaganje upočasnjuje delo?

Leno nalaganje je primerno za vire zunaj zaslona.
Če je prvi zaslon najbolj kritične velike slike tudi zakasnjeno nalaganje, lahko upočasni prvo zaslonsko izkušnjo. WordPress 5.5, saj je privzeto leno nalaganje v redu, vendar ne “ena velikost ustreza vsem”.

14. Potujem na poti A ali B. Kdaj potrebujem CDN / sliko CDN?

Stiskanje, določanje velikosti in oblikovanje rešujejo problem “manjših datotek, ki se prilegajo”;
CDN rešuje problem zagotavljanja tesnejših in stabilnejših。
Kadar se slike vlečejo z oddaljenega izvornega spletnega mesta, kar povzroča znatno zakasnitev, bo dopolnitev CDN/slike z CDN (npr. Cloudflare Polish / Jetpack Site Accelerator) na splošno stabilnejša, preberite WordPress CDN Pospeševanje。

15. Kako najlažje preverim, ali “to res deluje”, ko končam?

Časovno najučinkovitejša metoda preverjanja:

• ali se ista stran osveži drugič in se nalaga bolj dosledno in hitreje.
• Ali se velikosti slik, naloženih na mobilnih telefonih in namiznih računalnikih, opazno razlikujejo (ali je pomemben srcset/size)?
• Nekaj slik preverite na kraju samem: ali so prisotne datoteke/viri WebP ali AVIF
• Vzorčite nekaj slik: povečajte jih in preverite, ali so vidno zabrisane, ali je besedilo nejasno.