WordPress vaizdų optimizavimas

Paveikslėlių optimizavimas yra vienas iš labiausiai “apdovanojančių” "WordPress" našumo aspektų: jei ta pati puslapio struktūra ir tema yra tinkama, jei paveikslėlio dydis, matmenys, formatavimas ir pateikimas yra teisingi, įkėlimo patirtis iš karto pagerėja.

Tačiau būtent vaizdų optimizavimas lengviausiai gali viską “dar labiau sujaukti” — ne todėl, kad technologija per sudėtinga, o todėl, kad informacija pernelyg išskaidyta:
Perskaitėte kelis straipsnius ir sužinojote apie “suspaudimą”, “WebP/AVIF”, “tingųjį įkėlimą”, o tada, skaitydami įskiepių aprašymus, dar pamatėte “100 nemokamų kreditų per mėnesį”, “nemokama 20MB”, “1 kreditas už kiekvieną paveikslėlį” — ir kuo daugiau skaitote, tuo labiau painu: ar to nemokamo limito iš tiesų pakanka? Kaip tiksliai nuskaičiuojami mokesčiai? Ar tikrai neteisingai supratote, kas yra “tas pats dalykas”? Ir svarbiausia:Kai baigėte, ar tai iš tikrųjų įsigaliojo?

Šiame straipsnyje daromi tik trys dalykai:

1. Pateikiama vykdytina komandaPlanas(Ką daryti pirma, ką po to)
2. Aiškiai paaiškink pasirinktus planus (kuo tiksliai skiriasi nemokamas ir mokamas, kam kiekvienas tinka)
3. Iš anksto surašykite dažniausias klaidas, kad atlikus darbą nereikėtų visur ieškoti ir šalinti problemų

1. Pagrindai: ką „WordPress“ turi, o ko neturi

Jei pirmiausia neišsiaiškinsite, ką jau daro "WordPress" branduolys, lengva padaryti vieną iš dviejų dalykų:

• Užuot naudojęsi “laisvais pajėgumais”, kuriais turėtumėte mėgautis, jūs gaištate laiką ir (arba) išleidžiate pinigus, kad vėl ir vėl sukurtumėte ratą.
• Maniau, kad “WordPress” automatiškai konvertuos visus senus vaizdus į WebP/AVIF, bet paaiškėjo, kad ne

„WordPress“ branduolyje jau integruotos šios pagrindinės galimybės:

• Prisitaikantys paveikslėliai (srcset/sizes): Nuo "WordPress 4.4" branduolys išves vaizdus, skirtus srcset 与 sizes, ir naudoja daugialypio dydžio vaizdus, sukurtus siuntimo metu, kad naršyklė galėtų pasirinkti tinkamesnį išteklių, kurį reikia įkelti pagal ekrano sąlygas.
• Įtaisytas tingusis įkėlimasNuo „WordPress 5.5“ vaizdams pagal numatytuosius nustatymus įjungtas vietinis tingusis įkėlimas, naudojant HTML standartą loading Savybės įgyvendinimas.
• Palaiko WebP įkėlimą: Nuo "WordPress 5.8" galite įkelti ir naudoti "WebP" kaip JPEG/PNG (jei prieglobos aplinka palaiko "WebP").
• AVIF įkėlimo palaikymas: "WordPress 6.5" ir vėlesnės versijos gali įkelti ir naudoti AVIF kaip JPEG/PNG (taip pat priklauso nuo prieglobos palaikymo).

Tačiau atkreipkite dėmesį:
“Įkėlimo / naudojimo palaikymas” ≠ “Automatinis konvertavimas / automatinis pristatymas”.
Tai reiškia: net jei jau naudojate WP 6.5, jūsų medijos bibliotekoje esantys JPG/PNG failai patys savaime netaps WebP/AVIF; taip pat automatiškai negausite visos grandinės “pateikti AVIF/WebP pagal naršyklės galimybes ir naršyklėms, kurios to nepalaiko, grąžinti originalų vaizdą” — šią dalį paprastai reikia papildyti įskiepiu arba paslauga.

2. Veiksmų planas: vaizdų optimizavimas 5 etapais

Ką ir kodėl reikia daryti, ką daryti, kad atitiktų reikalavimus, ir kokia yra tipinė duobė.

2.1 Pirmiausia teisingai parinkti “dydį” (labiausiai nepastebimas, bet labiausiai naudingas dalykas)

Daugelis stočių veikia lėtai ne dėl to, kad suspaudimas neatliekamas, bet dėl to, kadAtsisiųstas didelis vaizdas, kuris gerokai viršija ekrano sritį：
Pavyzdžiui, jei puslapis iš tikrųjų rodo tik 900 px plotį, o jūs verčiate lankytoją atsisiųsti 3000 px originalų vaizdą, naršyklė tiesiog “atsisiunčia ir tada sumažina rodymą”. Tai eikvoja duomenų srautą, pailgina dekodavimo laiką ir lėtina pirmojo ekrano įkėlimą.

WordPress 4.4+"Responsive Image" mechanizmas（srcset/sizes) skirta būtent šiai problemai spręsti.

Atlikite tai, kas laikoma perdavimu:

• Atidarant puslapį telefone, atsisiunčiami vaizdai turėtų būti akivaizdžiai mažesni nei darbalaukyje
• Tas pats paveikslėlis įkeliamas skirtingo dydžio ištekliais skirtinguose įrenginiuose (vietoj to, kad visada būtų atsisiunčiamas originalus paveikslėlis).

Dažniausiai pasitaikantys spąstai:

• Yra temų ir (arba) konstruktorių, kurie diagramas traktuoja kaip CSS fono paveikslėlius arba išveda juos pasirinktiniu būdu, kuris gali apeiti srcsetRezultatas - didelis paveikslas
• Galite naudoti išoriškai susietus vaizdų klodus, trečiųjų šalių vaizdų blokus ir apeiti daugialypės terpės bibliotekos sukurtą sistemą.

---

2.2 Suspaudimas (sumažinkite KB, bet nesumažinkite kokybės)

Suspaudimo esmė yra ne “kuo mažesnis, tuo geresnis”, o “skirtumas plika akimi vos pastebimas, bet apimties sumažėjimas akivaizdus”.

Taisyklės yra tokios:

• Nuotraukos ir (arba) gyvi kadrai (žmonės, produktai, kraštovaizdžiai): Prioritetinis nuostolingas suspaudimas (didžiausias pelnas)
• Sąsajos ekrano nuotraukos / teksto vaizdai: Konservatyviau suspauskite, kad išvengtumėte neaiškaus teksto
• Logotipas / piktograma: Prioritetas SVG arba diskretiškas be nuostolių (be nuostolių lengva įklijuoti kraštus)

Atlikite tai, kas laikoma perdavimu:

• Ženkliai sumažintas daugumos puslapių vaizdo dydis
• Nėra akivaizdaus triukšmo, susiliejusių kraštų, spalvų perėjimo juostų ar sulieto teksto

---

2.3 WebP / AVIF (formatų strategija: toks pats aiškumas, mažesnis dydis)

"WordPress" jau palaiko įkėlimą WebP (5,8) ir AVIF (6,5)。
Tačiau norint, kad naujos kartos formatas iš tikrųjų veiktų, paprastai reikia išspręsti du dalykus:

1. Kaip partijos būdu konvertuoti istorines medijos bibliotekas(Priešingu atveju optimizuojate tik “vėliau įkeltiems naujiems vaizdams”).
2. Sukurti kopiją ar pakeisti originalų vaizdą(Tai yra rizikos riba; toliau daugiausia kalbėsime apie Plus WebP parinktį “pakeisti ir ištrinti originalų vaizdą”)

Rekomenduojamas rašymo stilius:

• WebP: paprastai kaip numatytasis pirmasis pasirinkimas (suderinamumas stabilesnis)
• AVIF: dar pažangesnis glaudinimas, tinka dideliems vaizdams / pirmo ekrano dideliems vaizdams / albumo nuotraukoms (tačiau darPriklausomybė nuo aplinkos paramos）

---

2.4 Tingus krovimas turi būti naudojamas teisingai (ne vienas dydis tinka visiems)

WordPress 5.5 ir vėlesnės versijosNumatytasis tingus krovimasPaveikslėlyje.
Tai sumažina pralaidumo naudojimą pradinio atvaizdavimo metu:

• Lėtas “neekraninių išteklių” krovimas”
• Svarbiausias didelis vaizdas pirmajame ekrane (o daugeliu atvejų - pagrindinis vaizdas pirmajame ekrane) dažnai netinka uždelstam įkėlimui.

---

2.5 Pristatomasis sluoksnis: CDN / vaizdas CDN

Suspaudimas, dydžio nustatymas ir formatavimas išsprendžia “mažesnių, bet tinkamų failų” problemą.
Tačiau jei vaizdai visada įkeliami iš pirminės svetainės per didelį atstumą, tinklo delsa vis tiek akivaizdžiai paveiks patirtį. Tokiu atveju reikia “pateikimo sluoksnio” sprendimo (CDN / vaizdai CDN).

Dvi tipinės kryptys:

• "Cloudflare" lenkų kalba：Cloudflare dokumentacijaPristatomi lenkiški glaudinimo metodai (be nuostolių, su nuostoliais ir WebP), taip pat minima, kad glaudinimas naudojant format=auto Leidžiama naudoti WebP/AVIF formatą.
• "Jetpack Site Accelerator："Jetpack" dokumentacijaPaaiškinkite, kad ji optimizuos vaizdus ir platins juos savo tinkle kartu su statiniais ištekliais.

Vaizdų optimizavimas sumažina ir pritaiko dydįCDN Atsakingas už glaudesnį ir stabilesnį

3. Pasirinkimas: tik du pagrindiniai keliai

Dažniausiai pasitaikanti vaizdo optimizavimo nesėkmė yra ne “nėra įskiepių”, o per daug įskiepių, dėl kurių dubliuojasi apdorojimas:
A suspaudžia, B suspaudžia, A konvertuoja į WebP/AVIF, B konvertuoja, A keičia URL, B perrašo - net negalite pasakyti, kas vyksta stotyje.

Taisyklės:

Galima rinktis tik vieną kelią: arba visas nemokamas vietos, arba debesų suspaudimas iš trijų.

• Maršrutas A (visiškai nemokamas vietinis):Plius WebP arba AVIF + EWWWW vaizdo optimizatorius(arba tik vienas)
• Maršrutas B (debesų glaudinimas: pasirinkite vieną iš trijų)"ShortPixel" / "Imagify" / "TinyPNG

---

3.1 Maršrutas A: visiškai nemokamas vietinis (ir WebP arba AVIF, arba EWWWW)

Šiam maršrutui būdinga:

• Nepriklausote nuo trečiųjų šalių suspaudimo paslaugų, teikiamų “už mėnesį / už lapą” (nors kai kurios funkcijos gali būti siūlomos kaip papildomos paslaugos).
• Kaina: paketinis apdorojimas gali būti labiau imlus CPU/IO serveriui, todėl reikia daugiau dėmesio skirti “strategijai ir rizikai”.”

3.1.1 Plius WebP arba AVIF: pagrindas yra “generuoti / pakeisti”, tai nėra tradicinis “suspaudimo įrankis”.”

• Generuojant visos apimties vaizdus:Originalaus vaizdo failo ID perrašomas WebP/AVIF, originalus failas ištrinamas, o turinio URL pakeičiamas.。
• Įskiepis pateikia WP-CLI komandas ir primena: WP-CLI yra patikimesnis, kai yra daug failų.

Tai reiškia: tai nėra “slaptai sugeneruojamas WebP”, o gali būti vienas karto.Turto perkėlimas(ypač kai įjungiate susijusias parinktis “Pakeisti ir ištrinti originalų vaizdą”).

Dviejų režimų skirtumai

1 režimas: išsaugokite originalų vaizdą + sukurkite WebP/AVIF kopiją (stabilesnis)

• Privalumas: kilus suderinamumo problemoms, lengviau grįžti atgal
• Kaina: padidės disko vietos naudojimas (originalūs vaizdai + naujas formatas + kelių dydžių miniatiūros)

2 režimas: pakeiskite ir ištrinkite originalų vaizdą (agresyvesnis)

• Privalumai: diskai neišsiplečia taip greitai; stoties nuorodos tiesiogiai perkeliamos į naują formatą
• Rizika: jei keisite ir išteklius, ir nuorodas, suderinamumo problemų šalinimo sąnaudos bus didesnės, ypač jei kai kurios išorinės sistemos ar temos logika priklauso nuo pradinio failo pavadinimo, kelio ar formato

Tipiniai "Plus WebP" arba AVIF trūkumai

1. Pakeitus visą biblioteką, kai kurie puslapių vaizdai rodomi neįprastai.
   Paprastai taip nutinka ne dėl to, kad paveikslėlis “sugadintas”, bet dėl to, kad kuri nors URL pakeitimo, spartinančiosios atminties, miniatiūrų politikos ir kt. grandinės grandis yra netinkama.
2. Kuo didesnis miniatiūrų skaičius, tuo didesnė pakeitimo apimtis
   Įkėlus vieną vaizdą į WordPress, sugeneruojami keli dydžiai; tema ar įskiepis gali pridėti dar daugiau. Visiškas pakeitimas reiškia, kad galite keisti labai didelį failų rinkinį.
3. Vien tik formato perkėlimas nebūtinai reiškia, kad tomas visada bus mažiausias.
   WebP/AVIF paprastai yra mažesni, tačiau dydžio strategija ir suspaudimo strategija vis tiek yra labai svarbios. Negalvokite, kad “Plus WebP” yra “vienu spustelėjimu greitesnis”.

---

3.1.2 EWWW vaizdo optimizatorius: laisvo vietinio suspaudimo atstovas

EWWW įskiepių puslapis yra labai gerai išdėstytas:

• Jį galima optimizuoti jūsų serveryje naudojant įvairius įrankius (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp ir kt.)
• Jei reikia didesnio glaudinimo arba mažesnių CPU sąnaudų, daug CPU naudojantį apdorojimą taip pat galima perkelti į jo serverį (pasirinktinai).

Kokį vaidmenį A maršrute turėtų atlikti EWWW?

Jei “Plus WebP” naudojate kaip "formato perkėlimo ir (arba) pakeitimo strategiją", EWWWW yra tinkamesnis sprendimas:

• Suspaudimas ir tūrio optimizavimas(ypač JPG/PNG ir kitų originalių išteklių dydžio mažinimas)
• Istorinės medijos bibliotekos paketinis optimizavimas(siekiama ne URL pakeitimo, o “apimties mažinimo”)

Tipinės EWWW klaidos

1. Masinio optimizavimo metu serverio apkrova padidėja
   Kadangi vietinis glaudinimas eikvoja CPU/IO. Sprendimas yra ne “nenaudoti”, o “vykdyti dalimis, ne piko metu ir prireikus rinktis iškrovimo / debesijos sprendimą”.
2. “Sukuriamas WebP” nereiškia, kad priekinė dalis turi sukurti WebP.
   Daugelis įskiepių kenčia nuo šio nesusipratimo: generavimas yra vienas dalykas, o pristatymo strategijos (perrašymai, paveikslėlių žymos, talpyklos paspaudimai ir t. t.) - kitas.
3. To paties dalyko darymas vis su kitais įskiepiais
   Jei pasirinksi A maršrutą, stenkitės nebedėti papildomo debesijos glaudinimo, pvz., ShortPixel/Imagify/TinyPNG; jei pasirinksi B maršrutą, nebeįjunk Plus WebP pakeitimo logikos. Pagrindinis principas:Vienu maršrutu iki galo.

---

3.2 Maršrutas B: pasirinkite vieną debesijos glaudinimo sprendimą (ShortPixel / Imagify / TinyPNG)

Šis būdas tinka žmonėms, kurie “nori taupyti serverio išteklius, nori atlikti paketinį darbą su mažesnėmis pastangomis ir priima atsiskaitymą už kreditą arba kiekį”.
Tačiau labiausiai klaidinantis dalykas apie debesų suspaudimą yra šis:Nemokami kreditai nėra tokie paprasti kaip “nemokami lapai”!.. Miniatiūrų dydžių skaičius, tai, ar generuojamas WebP/AVIF, ir tai, ar jis pakartotinai spaudžiamas, gali turėti didelės įtakos suvartojimui.

Toliau bus paaiškinta: kas vyksta su nemokamais ir mokamais kreditais, kaip išskaičiuojami kreditai, į kokius spąstus dažniausiai patenkama ir kokie svetainių tipai yra tinkami.

---

3.2.1 ShortPixel100 nemokamų kreditų per mėnesį, tačiau kreditai naudojami miniatiūroms ir WebP/AVIF padidinimams.

Kas yra nemokama/mokama

„ShortPixel“ įskiepio aprašyme aiškiai parašyta:

• 100 nemokamų kreditų per mėnesį
• Taip pat yra papildomų neribotų mėnesinių kreditų (papildinio puslapyje pateikta atitinkama kainos informacija)
• Taip pat siūlomi vienkartiniai kreditų paketai, kurie niekada nesibaigia, su pradine kaina

Patarimas:

• Nemokamai: suteikiamas tam tikras kreditų kiekis per mėnesį lengvosioms svetainėms arba bandymams
• Vienkartinės pakuotės: tinka svetainėms, turinčioms dideles medijos bibliotekas ir norinčioms iš karto atsikratyti atsargų (pirkite vieną kartą ir sunaudokite, paprastai jų galiojimo laikas nesibaigia).
• Mėnesinis / neribotas: tinka svetainėms su nuolat atnaujinamais vaizdais ir ilgalaikiu stabiliu optimizavimu.

ShortPixel oficialioje žinių bazėje taip pat pateikiama informacija apie “vienkartinį paketą ir neribotą mėnesinį planą”aiškus paaiškinimas: Neribotas mėnesinis planas apmokamas kas mėnesį (arba kasmet), suteikia neribotus kreditus ir fiksuotą CDN kvotą; vienkartiniai kreditai negalioja be termino, todėl galite juos lanksčiau naudoti pagal poreikį.

Esmė: kaip apskaičiuojami "ShortPixel" kreditai?

Oficiali "ShortPixel" dokumentacija KB buvo labai tiesmukas:

• Kai įkeliate paveikslėlį, "WordPress" sukuria kelias miniatiūras;
• Kiekvienas miniatiūros optimizavimas skaičiuojamas kaip kreditas；
• Jei pasirinksite kurti WebP arba AVIF,Už kiekvieną originalaus vaizdo ir miniatiūros WebP/AVIF versiją suteikiamas papildomas kreditas.；
• Galite neleisti optimizuoti tam tikrų miniatiūrų, kad sumažintumėte kreditų suvartojimą.

kreditai pavyzdys：

Tarkime, įkeliate 1 paveikslėlį, o tema / papildinys sukuria 8 miniatiūras:

• Optimizuoti tik originalų vaizdą ir miniatiūras: 1 (originalas) + 8 (miniatiūros) = 9 kreditai
• Jei dar reikia generuoti WebP/AVIF: kiekvienam iš 9 aukščiau pridėkite dar po vieną next-gen versiją → dar +9 kreditai
  Kitaip tariant, tai, kas jums atrodo “1 paveikslėlis”, iš tikrųjų gali būti beveik 2 skaitmenų kreditai.

Taigi:“Nemokami 100 kreditų” nėra tas pats, kas “nemokami 100 vaizdų”.

Dažniausiai pasitaikantys "ShortPixel" spąstai

1. Nemokami 100 kreditų greitai baigiasi
   Priežastis: daugiau miniatiūrų + papildomi kreditai už WebP/AVIF generavimą
   pasiūlymas：

• Pirmiausia įvertinkite svetainės miniatiūrų skaičių
• Neįtraukite nereikalingų miniatiūrų dydžių (optimizuokite tik tuos dydžius, kurie iš tikrųjų bus naudojami)
• Prieš pradėdami masinį suspaudimą nustatykite suspaudimo strategiją, kad išvengtumėte pakartotinių bandymų ir klaidų.

2. Taip pat pridėti kitus formato keitimo įskiepius
   Jei vienu metu įjungsite Plus WebP pakeitimą ir leisite ShortPixel generuoti / įterpti next-gen žymas, logika persidengs ir trikčių šalinimas taps sunkesnis. B variante leiskite ShortPixel veikti savarankiškai.
3. Maniau, kad jei jį įdiegsiu, jis bus “WebP/AVIF pirmame plane”.”
   ShortPixel įskiepio puslapisPaminėta, kad jis gali konvertuoti į WebP/AVIF ir pridėti next-gen vaizdus į svetainės puslapius (pvz., naudojant žymas).
   Tačiau atlikus vis tiek reikia patikrinti rezultatą.

---

3.2.2 ĮsivaizduokiteNemokamai: 20MB/mėn; kvota išskaičiuojama pagal “originalaus paveikslėlio dydį + miniatiūrų skaičių”, pakartotinai išskaičiuojama už pakartotinį spaudimą.

Laisvas kiekis ir padėtis

"Imagify" oficialus kainų puslapisRaštas aiškus:Nemokamos paskyros mėnesio kvota 20MB。
Įskiepio puslapyje taip pat aiškiai nurodoma, kad jis gali suspausti, keisti dydį ir konvertuoti WebP/AVIF.

Kaip nuskaičiuojama kvota?

Oficiali „Imagify“ dokumentacija “Kaip apskaičiuojamas kvotos naudojimas?” labai aiškiai paaiškinamas išskaičiavimo mechanizmas:

• Miniatiūrų skaičius turi įtakos sąnaudomsPavyzdžiui, jei turite 10 miniatiūrų dydžių, optimizuojant 1 paveikslėlį bus optimizuota 11 paveikslėlių (originalas + 10 miniatiūrų), ir visi jie bus įskaičiuoti į kvotos sunaudojimą.
• Kvaiota pagal pradinį failo dydįPavyzdžiui, jei nusiųsite 100 KB dydžio vaizdą į „Imagify“, iš jūsų limito bus išskaičiuota 100 KB.
• Pakeitus glaudinimo lygį ir optimizavus iš naujo, kvota bus sunaudota dar kartą。
• Tą patį API raktą galima naudoti keliose svetainėse, tačiau kvota bus bendra tarp jų.

Štai “Imagify” „pagrindinis supratimo būdas“:
Tai labiau panašu į duomenų paketą: kuo daugiau nusiunti, tuo daugiau nuskaičiuoja; kuo daugiau miniatiūrų, tuo daugiau nuskaičiuoja; jei pakartotinai stipriai suglaudini, mokestis bus nuskaičiuotas pakartotinai.

Lengvai suprantamas „Imagify“ kvotos pavyzdys

Tarkime, įkeliate 800 KB dydžio originalų vaizdą, o svetainė sugeneruoja 8 miniatiūras.

• “Imagify” optimizuoja taip, kad būtų įtrauktas “originalus vaizdas + 8 miniatiūros” (jei pasirinksite optimizuoti visus), o tai reiškia, kad atliekant šį veiksmą sunaudojama kvota, artima "visų šių failų originaliam dydžiui kartu".
  Todėl kai kurioms svetainėms atrodo, kad “20MB” labai greitai išsenka: problema ne ta, kad „Imagify“ nepakanka, o ta, kad kiekvieną kartą įkeliate per didelius vaizdus, sukuriama per daug miniatiūrų ir, galbūt, dar pakartotinai bandote skirtingus glaudinimo lygius.

Dažniausios Imagify klaidos

1. Nemokama 20MB nepakanka atlikti visos svetainės istorinių duomenų išvalymo“
   20MB paprastai labiau tinka bandymams ir lengviems atnaujinimams; jei jūsų mediateka ir taip jau didelė, vienkartiniam visos bibliotekos išvalymui greičiausiai prireiks atnaujinimo.
2. Pakartotinis suspaudimo lygio keitimas lemia pakartotinį kvotos sunaudojimą
   Aiškiai nurodytaPakartotinis optimizavimas vėl sunaudos kvotą.
   Siūlome šiame puslapyje aiškiai aprašyti “strategiją”:

• Pirmiausia nustatykite glaudinimo lygį ir vaizdo kokybę su keliais paveikslėliais
• Nustatykite strategiją ir vykdykite masinį paleidimą
  Venkite pakartotinių bandymų ir klaidų visoje duomenų bazėje

3. Kelios svetainės, besidalijančios API raktą, lemia “nepaaiškinamą kvotos sumažinimą”.”
   Jei tą patį API raktą naudosite keliose svetainėse, limitas bus bendras.
   Todėl komandos / kelių svetainių scenarijuje geriausia aiškiai nustatyti, kurios svetainės naudojamos bendrai, o kurios atskirai, kad biudžetas netaptų nevaldomas.

---

3.2.3 TinyPNG“Tiny Compress Images”: 500 kreditų per mėn. nemokamai; konvertuojant į WebP/AVIF iš kiekvieno dydžio papildomai nuskaičiuojamas 1 kreditas”

Nemokamas limitas ir jo apmokestinimo logika

TinyPNG „WordPress“ įskiepio puslapyje viskas parašyta labai aiškiai:

• 500 kreditų per mėnesį nemokamai
• Standartiniame “WordPress” diegime galima suspausti maždaug Apie 100 vaizdų per mėnesį
• Tačiau jei įjungsite konvertavimą į AVIF arba WebP:Kiekvienas paveikslėlio dydis papildomai sunaudos 1 kreditątodėl tikriausiai galima tik suspausti ir konvertuoti Apie 50 vaizdų per mėnesį(priklausomai nuo to, kiek miniatiūrų dydžių turite).

Tuo pat metu „Tinify“ („TinyPNG“ / „TinyJPG“ kūrėja) taip pat savo API kainodaros puslapisNurodykite: užsiregistravę gausite 500 nemokamų suspaudimų per mėnesį; viršijus šį skaičių, mokama pagal sėkmingų suspaudimų skaičių, jokios privalomos prenumeratos.

Vienu sakiniu apibendrinkite, kaip suprantate „TinyPNG“ veikimo principą:
Skaičiuojama kreditais; kuo daugiau miniatiūrų dydžių ir kuo daugiau įjungsite WebP/AVIF, tuo greičiau bus sunaudojami kreditai.

Lengvai suprantamas TinyPNG kreditų pavyzdys

Tarkime, kad jūsų svetainė kiekvienam vaizdui sugeneruoja 8 miniatiūrų dydžius:

• Tik suspaudimas: originalus vaizdas + 8 miniatiūros → reikia 9 kreditų
• Jei įjungtas WebP/AVIF konvertavimas: už kiekvieną dydį bus papildomai nuskaičiuotas 1 kreditas → gali beveik padvigubėti
  Tai tiksliai atitinka papildinio puslapio aprašymą: įjungus konvertavimą, nemokama kvota maždaug sumažėja nuo “100 vnt./mėn.” iki “50 vnt./mėn.”

Dažniausiai pasitaikantys "TinyPNG" spąstai

1. Manoma, kad 500 kreditų = 500 vaizdų
   Ne. Kreditas nurašomas pagal vaizdo dydį / variantą. Įskiepio puslapyje jau aiškiai nurodyta: “už konvertavimą papildomai nurašomas 1 kreditas už kiekvieną vaizdo dydį”.
2. Temai / el. prekybos įskiepis sugeneruoja per daug dydžių, nemokama kvota akivaizdžiai sumažėjo
   Kuo daugiau dydžių, tuo lengviau padidinamas credits sunaudojimas.
3. Įjungus konvertavimą limitas staiga greitai išnaudojamas
   Tai ne klaida, o atsiskaitymo mechanizmas.
   Strategijos patarimai:

• Jei nemokamas etapas daugiausia skirtas glaudinimui ir dydžio mažinimui, pirmiausia galite tik suglaudinti, o kai patvirtinsite, kad svetainės struktūra stabili ir tikrai reikia next-gen, įjunkite konvertavimą

4. Rekomendacijos pagal scenarijų: kaip pasirinkti skirtingų tipų svetainėms

Tas pats “WordPress”, bet turinio svetainių, el. prekybos, portfolio ir narių svetainių „vaizdų apkrovos taškai“ nėra vienodi.

4.1 Turinio svetainė / tinklaraštis (daug iliustracijų, vidutinis atnaujinimo dažnis)

Prioriteto rekomendacija:

1. Dydžio strategija (1 žingsnis)
2. Suspausti (2 žingsnis)
3. WebP（3 žingsnis）

Tinkamesnis maršrutas:

• Norite paprasčiau: rinkitės vieną iš 3 B maršruto variantų (ShortPixel / Imagify / TinyPNG)
• Norite nemokamai: A maršrutas (“Plus WebP + EWWW”), bet rekomenduojama pirmiausia pradėti nuo „konservatyvaus režimo (neištrinant originalių vaizdų)“ ir įvertinti riziką

Dažna klaida:

• Straipsnio puslapio viršelio vaizdas per didelis, netinkama tingiojo įkėlimo strategijaLėtina pirmo ekrano įkėlimą

4.2 Elektroninė parduotuvė ir (arba) produktų svetainė (daug miniatiūrų, daug paveikslėlių variantų, pirmiausia stabilumas)

Labiausiai tikėtina, kad elektroninės prekybos problema yra ne “suspaudimo poveikis nėra geras”, o “optimizuotas kai kurių dydžių dydis nėra tinkamas, trūksta miniatiūrų, priekiniai komponentai negali gauti paveikslėlio”.

Prioriteto rekomendacija:

1. Pirmiausia stabilumas: rinkitės kiek konservatyvesnę glaudinimo strategiją ir iš karto nepradėkite visos duomenų bazės pakeitimo
2. Įvertinkite miniatiūrų dydžius: el. prekybos temos paprastai generuoja daugiau dydžių, todėl kvotos sunaudojimas padidėja (ypač pastebima su ShortPixel/TinyPNG)
3. Pirmiausia atlikite nedidelio masto patvirtinimą, tada vykdykite masiškai labai svarbu

Tinkamesnis maršrutas:

• B variantas dažnai kelia mažiau rūpesčių: „ShortPixel“, „Imagify“ ir „TinyPNG“ palaiko paketinį apdorojimą, svarbiausia suprasti limitų mechanizmą ir iš anksto įvertinti kainą
• Maršrutas A taip pat tinka, bet su Plus WebP “perrašyti ID / ištrinti originalą / pakeisti URL” veiksmais reikia elgtis atsargiau: tai išteklių migravimas, todėl nerekomenduojama iškart visko pakeisti.

4.3 Portfolio / fotografijos svetainė (jautru vieno vaizdo kokybei, dideli vaizdai, aukšti vizualiniai reikalavimai)

Prioriteto rekomendacija:

1. Dydžio strategija (rodymo srities valdymas)
2. Suspaudimo strategija (geriau kiek didesnis, nei sugadintos detalės)
3. WebP/AVIF (nauda dideliems vaizdams akivaizdi, bet reikia patikrinti vaizdo kokybę)

Tinkamesnis maršrutas:

• Įsivaizduokite: kvota nurašoma pagal “pradinio vaizdo dydį”, todėl tokiose svetainėse lengviau užtikrinti “kontroliuojamą biudžetą” (žinote, kiek maždaug nurašoma už kiekvieną didelį vaizdą), bet reikia vengti pakartotinio stipraus glaudinimo.
• ShortPixelJei miniatiūrų dydžių nedaug, kreditų sunaudojimas gana aiškus; tačiau jei sugeneruosite daug dydžių ir next-gen, kreditų sąnaudos išaugs, todėl planuokite iš anksto.

5. Kvotų ir atsiskaitymų palyginimas: “nemokamai nepakanka” perspektyva

Kurį pasirinkti, kad būtų apsimokėtų labiau, ir kiek laiko užteks nemokamos versijos?

5.1 Trys grįžtamojo apmokestinimo modeliai

• ShortPixel(kreditai)Kreditai skaičiuojami pagal “originalą + miniatiūrų skaičių”; už WebP/AVIF generavimą kiekvienai atitinkamai versijai papildomai nuskaičiuojamas kreditas.
• Įsivaizduokite(MB kvota)Skaičiuojama pagal “pradinio failo dydį”; kuo daugiau miniatiūrų, tuo daugiau nuskaičiuojama; pakartotinis suglaudinimas bus nuskaičiuotas dar kartą.
• TinyPNG(kreditai)Kas mėnesį 500 kreditų; įjungus WebP/AVIF konvertavimą, už kiekvieną paveikslėlio dydį papildomai nuskaičiuojamas kreditas.

5.2 Greitojo vertinimo metodai

Tai galima apskaičiuoti taip:

1. Suraskite atsitiktinį “originalų vaizdą, kurį dažnai įkeliate” ir pažiūrėkite, kokio jis dydžio (pvz., 300 KB / 1MB / 3MB).
2. Apytiksliai kiek miniatiūrų dydžių sugeneruoja jūsų svetainė (pvz., 5 / 10 / 20)
3. Nuspręskite, ar generuoti WebP/AVIF (taip / ne)

Tuomet naudokite šią “mintinę matematiką”, kad suprastumėte vartojimą:

• ShortPixelKiekvienam vaizdui ≈ (1 + miniatiūrų sk.) kreditų; jei generuojamas WebP/AVIF, ≈ dar dvigubai daugiau (nes next-gen versijai irgi reikia kreditų)
• Įsivaizduokite: už kiekvieną paveikslą nuo kvotos nuskaitoma ≈ (pradinio paveikslo dydis + visų miniatiūrų dydis); pakeitus glaudinimo lygį ir suglaudinus iš naujo, bus nuskaičiuota dar kartą
• TinyPNGNemokama: 500 kreditų; jei jūsų svetainėje iš kiekvieno paveikslėlio sukuriama daug dydžių ir įjungtas konvertavimas, nemokamų paveikslėlių skaičius gerokai sumažės (papildinio puslapyje pateiktas aiškus lūkestis: “apie 100 pav./mėn.” ir “apie 50 pav./mėn.”)

6. Įspėjimas apie riziką

Rizika 1: neleiskite keliems papildiniams kartoti to paties darbo

Tai dažniausias “nelaimių šaltinis”

• Maršrutas A៖Plus WebP arba AVIF + EWWWPasidalykite užduotis: neatlikite abiejų tos pačios rūšies konvertavimo ir pristatymo darbų vienu metu arba įdiekite tik vieną
• 2 maršrutas: ShortPixel / Imagify / TinyPNG Pasirinkite vieną iš trijųPasirinkite vieną, atsakingą už glaudinimą ir next-gen

Rizika 2: “Perrašyti ID / Ištrinti originalų vaizdą / Pakeisti URL” Plus WebP sistemoje yra išteklių perkėlimas

Dar kartą pabrėžiame:Plius WebP Apraše aiškiai nurodyta, kad visiškai generuojant perrašomas pradinis vaizdo ID, ištrinamas pradinis failas ir pakeičiamas turinio URL.
Tai reiškia, kad tai nėra “mažas nustatymas, kurį galima bet kada atšaukti”, o vienkartinis turto lygmens pakeitimas.

Rekomenduojama strategija turėtų būti:

• Pirmiausia išbandykite nedideliu mastu (kelios dešimtys–keli šimtai)
• Patvirtinkite, kad pagrindinis rodymas, miniatiūros ir talpyklos atnaujinimas veikia tinkamai
• Iš naujo apsvarstyti visos bibliotekos apdorojimą

Rizika 3: tikrasis debesijos glaudinimo “nemokamos kvotos” sunaudojimas priklauso nuo miniatiūrų skaičiaus ir next-gen pasirinkimo

• ShortPixelMiniatiūros ir next-gen labai paveiks kreditus
• TinyPNGĮjungus WebP/AVIF, už kiekvieną paveikslėlio dydį bus papildomai nuskaičiuoti kreditai
• Įsivaizduokite: atskaitoma pagal originalaus vaizdo dydį; kuo daugiau miniatiūrų, tuo daugiau nuskaitoma; stiprus paspaudimas gali nuskaičiuoti pakartotinai

Rizika 4: “Sugeneruotas WebP/AVIF” nereiškia, kad “svetainei pateikiamas WebP/AVIF”

Daugelis po konvertavimo mano, kad “nepagreitėjo”, nes svetainė vis dar pateikia JPG/PNG failus (dėl talpyklos, perrašymo, žymų, naršyklės derybų ir pan. neatitikimų).

7. Kaip patikrinti, ar jis įsigaliojo po to, kai buvo atliktas

4 labai paprasti patvirtinimo punktai:

1. Ar antrą kartą atnaujinus tą patį puslapį įkėlimas stabilesnis ir greitesnisAr jaučiamas spartinimo ir optimizavimo poveikis
2. Ar mobiliajame ir staliniame įrenginyje įkeliamų paveikslėlių dydžiai akivaizdžiai skiriasiPrisitaikantis srcset/sizes Ar veikia）
3. Atsitiktinai patikrinkite kelis vaizdus: ar yra WebP arba AVIF failų / ištekliųAr svetainė tikrai naudojama naujos kartos）
4. Patikrinkite kelias nuotraukas atsitiktinai: priartinkite ir pažiūrėkite, ar jos nėra akivaizdžiai neryškios, ar tekstas nėra išplaukęsAr suspaudimo kokybė nėra per didelė

Jei visi šie keturi punktai atitinka, vadinasi, tavo pasirinktas maršrutas jau veikia. Toliau gali imtis tolesnių veiksmų Pristatymo sluoksnis“, apskritai bus stabiliau.

8. Veiksmų rekomendacijos

1. Pirmiausia pasirinkite maršrutą:

• Kiek įmanoma nemokamai: Plus WebP arba AVIF + EWWW (arba įdiekite tik vieną iš jų)
• Norite taupyti serverio išteklius ir mokėti pagal naudojimą be rūpesčiųPasirinkite vieną: ShortPixel / Imagify / TinyPNG

2. Pirmiausia atlikite nedidelės apimties testą (keliasdešimt vaizdų)
3. Patvirtinę, kad viskas gerai, vykdykite masinį veiksmą
4. Reikia toliau gerinti pristatymo stabilumą:skaityti CDN pagreitinimas

Dažniausiai pasitaikančios problemos

1. Kiek papildinių man iš tiesų reikia įdiegti? Ar galima įdiegti juos visus?

Stenkitės eiti tik vienu maršrutu.

• A maršrutas: plius WebP arba AVIF + EWWWW vaizdo optimizatorius (arba tik vienas iš jų)
• B maršrutas: pasirinkite vieną iš ShortPixel / Imagify / TinyPNG
  Toje pačioje stotyje tuo pačiu metu tegul daugiau nei vieną papildinį daryti “suspaudimo / perdavimo WebP / AVIF / pakeisti URL / pristatymo perrašyti”, labiausiai tikėtina, kad gauti daugiau ir daugiau chaotiškas, bet taip pat sunkiausia patikrinti.

2. Ar „WordPress“ jau nepalaiko „WebP/AVIF“? Ar man dar reikia įskiepio?

Reikia atskirti:
“Įkėlimo / naudojimo palaikymas” ≠ “Automatinis konvertavimas / automatinis pristatymas”.
“WordPress 6.5” taip pat automatiškai masiškai nekonvertuos senų JPG/PNG į „WebP“ / „AVIF“, taip pat automatiškai nesutvarkys visos grandinės „pateikti AVIF/WebP pagal naršyklės galimybes ir prireikus grąžinti atsarginį formatą“. Jei norite, kad ir senoji medijos biblioteka būtų atnaujinta, paprastai reikia papildinio arba paslaugos.

3. Kuris vaizdų optimizavimo žingsnis duoda didžiausią grąžą?

Paprastai Pirmiausia sutvarkykite “dydį” (srcset/sizes)。
Daugelis svetainių lėtos ne todėl, kad vaizdai nesuspausti, o todėl, kad puslapyje rodomi tik 900 px, bet naudotojas verčiamas atsisiųsti 3000 px originalų vaizdą. Suspaudimas gali sutaupyti KB, bet “netinkamas dydis” priverčia be reikalo atsisiųsti kelis kartus daugiau duomenų.

4. Kaip patikrinti, ar dabar įkeliama “mažesnė nuotrauka”, o ne visada atsisiunčiamas originalus vaizdas?

Pažvelkime į du reiškinius:

• Atidarant puslapį telefone, atsisiųsto paveikslėlio dydis yra akivaizdžiai mažesnis nei kompiuteryje
• Skirtinguose įrenginiuose tam pačiam vaizdui įkeliami skirtingo dydžio ištekliai
  Jei visada atsisiunčiamas originalus vaizdas, dažniausia priežastis ta, kad tema ar kūrimo įrankis naudoja vaizdą kaip CSS fono paveikslėlį arba išveda jį nestandartiškai, apeidamas medijos bibliotekos kelių dydžių versijas ir srcset.

5. Ar sugeneruotas WebP/AVIF reiškia, kad svetainėje tikrai rodomas WebP/AVIF?

Nelygu.
Generavimas užbaigtas tik “failų lygmeniu”; ar priekinėje dalyje iš tiesų pateikiami WebP / AVIF, dar priklauso nuo perrašymo, picture žymos strategijos, ar pataikoma į podėlį, ar įsigalioja naršyklės derybos ir pan. Baigęs būtinai “patikrink kelių paveikslėlių išteklių tipą”.

6. Kuo tiksliai pavojingi „Plus WebP“ arba „AVIF“? Ar galiu vienu spustelėjimu paleisti juos visai bibliotekai?

Rizikos taškas yra ne “suspaudimas”, oTurto perkėlimo lygio pakeitimai：

• Visiškai generuojant gali būti perrašytas pradinio paveikslėlio failo ID, ištrintas pradinis failas ir pakeisti turinyje esantys URL.
  TodėlNerekomenduojama iš karto keisti visoje duomenų bazėjePirmiausia išbandykite nedideliu mastu (keliasdešimt–kelis šimtus nuotraukų) + turėdami tinkamą atsarginę kopiją, tik tada svarstykite visos bibliotekos apdorojimą.

7. Kaip pasirinkti vieną iš dviejų „Plus WebP“ režimų: išsaugoti originalų vaizdą ar pakeisti ir ištrinti originalų vaizdą?

Trumpai tariant:

• 1 režimas: išsaugokite originalų vaizdą + sukurkite WebP/AVIF kopiją (stabilesnis)Patogu grįžti atgal, bet didės disko vietos sąnaudos (originalus vaizdas + naujas formatas + kelių dydžių miniatiūros).
• 2 režimas: pakeiskite ir ištrinkite originalų vaizdą (agresyvesnis): Disk usage doesn’t tend to balloon, but when you’re “changing assets + changing references”, troubleshooting compatibility issues becomes more costly.
  Kuo sudėtingesnė svetainė (el. prekyba / daug įskiepių / daug dydžių), tuo labiau rekomenduojama pradėti nuo stabilesnio režimo.

8. Ar pakanka nemokamo EWWW Image Optimizer vietinio glaudinimo? Ar tai neperkraus serverio?

EWWW labiau panašus į “vietinį glaudinimo darbininką”: naudoja CPU/IO។
Dažna situacija: atliekant masinį optimizavimą apkrova padidėja. Tai nereiškia, kad tai neveikia – svarbu tinkama strategija: dalimis, ne piko metu, o prireikus rinktis iškrovimo arba debesijos sprendimą.
Jei norite mažiau rūpesčių arba serverio ištekliai riboti, B maršrutas mažiau apkrauna serverį.

9. Kodėl atrodo, kad „ShortPixel“ 100 nemokamų kreditų per mėnesį dingsta jau po kelių paveikslėlių?

Nes Kreditai nėra “paveikslėlių skaičius”Bus padidina miniatiūra ir next-gen

• Originalus vaizdas + kiekviena miniatiūra taip pat skaičiuojama kaip kreditas
• Jei generuojamas WebP/AVIF, kiekviena atitinkama versija papildomai sunaudos kreditų
  Taigi manote, kad “1 paveikslėlis” gali iš tikrųjų sunaudoti beveik dviženklį kreditų skaičių. ShortPixel

10. Kodėl „Imagify“ nemokamas 20MB/mėn. limitas taip greitai išnaudojamas?

“Imagify” labiau panaši į „duomenų paketą“:

• Pagal jūsų išsiųstusOriginalaus failo dydisIšskaityti kvotą
• Kuo daugiau miniatiūrų, tuo didesnės sąnaudos
• Pakeitus suspaudimo lygį ir optimizavus iš naujo, kvota bus sunaudota dar kartą
• Tas pats API raktas naudojamas keliose svetainėse, kvota bendra
  Todėl “20MB greitai baigiasi” dažnai nutinka dėl per didelių paveikslėlių, per daug miniatiūrų arba pasikartojančių bandymų ir klaidų.

11. TinyPNG nemokamai 500 kreditų per mėnesį, kodėl įskiepis rodo, kad tai tik apie 100 vaizdų per mėnesį, o įjungus WebP/AVIF lieka 50 vaizdų per mėnesį?

Nes TinyPNG kreditai taip pat padidėja dėl “dydžio / variantų”:

• Įprasta „WordPress“ instaliacija glaudina apie 100 vaizdų per mėnesį
• Įjungti AVIF arba WebP konvertavimą:Kiekvienas paveikslėlio dydis papildomai sunaudos 1 kreditąTodėl tikriausiai galima suglaudinti ir konvertuoti apie 50 vaizdų per mėnesį (priklauso nuo miniatiūrų dydžių skaičiaus).
  Todėl 500 kreditų ≠ 500 vaizdų.

12. Kiek miniatiūrų iš viso yra mano svetainėje? Kodėl tai turi tokią didelę įtaką?

Įkėlus vieną paveikslėlį į WordPress, sukuriami keli jo dydžiai; tema ir įskiepiai (ypač el. prekybos) gali pridėti dar daugiau dydžių.
Debesijos glaudinimo kreditai / kvota paprastai skaičiuojami kartu už originalius ir miniatiūrų vaizdus, todėl kuo daugiau miniatiūrų, tuo greičiau išnaudojamas nemokamas limitas.

13. Ar tingusis įkėlimas būtinai pagreitina? Kodėl kai kas sako, kad tingusis įkėlimas vietoj to sulėtina?

Lėtasis įkėlimas tinka “už ekrano ribų esantiems ištekliams”.
Jei svarbiausias didelis vaizdas pirmame ekrane taip pat bus įkeltas vėliau, tai gali sulėtinti pirmojo ekrano įspūdį. Nuo “WordPress 5.5” numatytasis tingusis įkėlimas yra tinkamas, tačiau nereikėtų taikyti jo viskam vienodai.

14. Einu A arba B maršrutu, kada reikia CDN / CDN nuotraukos?

Suspaudimas, dydis ir formatas sprendžia “failas mažesnis ir tinkamesnis”;
CDN padeda užtikrinti artimesnį ir stabilesnį pristatymą。
Kai vaizdai dėl didelio atstumo traukiami iš pirminio serverio ir delsimas tampa akivaizdus, papildomai įdiegus CDN / CDN paveikslėliams (pvz., Cloudflare Polish / Jetpack Site Accelerator), bendras veikimas bus stabilesnis ir skaitymas sklandesnis. WordPress CDN spartinimas。

15. Koks paprasčiausias būdas, baigus, patikrinti, ar tai tikrai veikia?

Laiką taupantis patvirtinimo būdas:

• Ar antrą kartą atnaujinus tą patį puslapį įkėlimas stabilesnis ir greitesnis
• Ar labai skiriasi telefone ir kompiuteryje įkeliami vaizdų dydžiai (ar veikia srcset/sizes)
• Atsitiktinai patikrinkite kelis vaizdus: ar yra WebP arba AVIF failų / išteklių
• Patikrinkite kelias nuotraukas atsitiktinai: priartinkite ir pažiūrėkite, ar jos nėra akivaizdžiai neryškios, ar tekstas nėra išplaukęs