Svetainės vaizdų optimizavimas

Vaizdų optimizavimas yra viena iš “didžiausią grąžą” duodančių WordPress našumo priemonių: esant tai pačiai puslapio struktūrai ir tai pačiai temai, jei tik teisingai parinkti vaizdų failų dydis, matmenys, formatas ir pateikimo būdas, įkėlimo patirtis dažnai pagerėja iš karto.

Tačiau paveikslėlių optimizavimas taip pat lengviausiai gali sukelti “visišką sumaištį”, priežastis yra ne technologinis sunkumas, o informacijos fragmentiškumas:
Perskaitėte kelis straipsnius ir sužinojote apie “suspaudimą”, “WebP/AVIF” ir “tingųjį įkėlimą”, o tada, skaitydami papildinio aprašymą, pamatėte “100 nemokamų kreditų per mėnesį”, “nemokamai 20MB” ir “1 kreditas už kiekvieną paveikslėlį”, todėl kuo daugiau skaitote, tuo labiau susipainiojate — ar to nemokamo kiekio iš tiesų pakanka? Kaip nuskaičiuojamas mokestis? Ar tikrai neteisingai supratote “tą patį dalyką”? Ir svarbiausia:Kai baigėte, ar tai iš tikrųjų įsigaliojo?

Šiame straipsnyje daromi tik trys dalykai:

1. Pateiksiu jums vykdomąjąGairės(ką daryti pirmiausia, ką po to)
2. Aiškiai paaiškink pasirinktą planą (kuo tiksliai skiriasi nemokamas ir mokamas, kam kuris tinka)
3. Iš anksto surašykite dažniausias problemas (kad baigę nereikėtų visur ieškoti ir tikrinti)

1. Pagrindas: ką „WordPress“ turi iš karto, o ko neturi

Jei pirmiausia nesuprasi, ką jau padarė „WordPress“ branduolys, labai lengva susidurti su dviem situacijomis:

• Nepasinaudota nemokamomis galimybėmis, o vietoj to gaištamas laikas ir pinigai kuriant tą patį iš naujo
• Maniau, kad “WordPress” automatiškai konvertuos visus senus paveikslėlius į WebP/AVIF, bet paaiškėjo, kad ne

„WordPress“ branduolyje jau yra įdiegtos šios pagrindinės galimybės:

• Prisitaikantys vaizdai (srcset/sizes)Nuo „WordPress“ 4.4 versijos branduolys išves vaizdams srcset 与 sizesir naudoti įkėlimo metu sugeneruotus įvairių dydžių vaizdus, kad naršyklė, atsižvelgdama į ekrano sąlygas, pasirinktų įkelti tinkamesnį išteklių.
• Vietinis tingusis įkėlimasNuo „WordPress 5.5“ vaizdams pagal numatytuosius nustatymus įjungiamas vietinis tingusis įkėlimas, naudojant HTML standartą loading Atributų įgyvendinimas.
• Palaiko WebP įkėlimąNuo WordPress 5.8 galima įkelti ir naudoti WebP, kaip JPEG/PNG (jei hostingo aplinka palaiko WebP).
• Palaikomas AVIF įkėlimasNuo „WordPress 6.5“ galima įkelti ir naudoti AVIF kaip JPEG/PNG (taip pat priklauso nuo hostingo aplinkos palaikymo).

Tačiau atkreipkite dėmesį:
“Palaiko įkėlimą/naudojimą” ≠ “automatinis konvertavimas/automatinis pristatymas”.
Tai reiškia: net jei jau naudojate WP 6.5, jūsų medijos bibliotekoje esantys JPG/PNG patys 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 pradinį vaizdą” — šiai daliai paprastai reikia papildinių ar paslaugų.

2. Vaizdų optimizavimo veiksmų planas – 5 žingsniai

Ką daryti, kodėl, ką laikyti pasiekimu, kokios yra tipinės kliūtys.

2.1 Pirmiausia tinkamai nustatykite “dydį” (tai lengviausia praleisti, bet nauda didžiausia)

Daugelis svetainių lėtos ne todėl, kad nėra suspaudimo, o todėl, kadAtsisiųstas gerokai didesnis paveikslas nei rodymo sritis：
Pavyzdžiui, jei puslapyje iš tikrųjų rodoma tik 900 px pločio nuotrauka, bet vis tiek verčiate lankytoją atsisiųsti 3000 px originalą, naršyklė tiesiog “pirmiausia atsisiunčia, o tada sumažina rodymui”. Tai eikvoja srautą, pailgina iškodavimo laiką ir lėtina pirmąjį ekrano vaizdą.

WordPress 4.4+Prisitaikančių vaizdų mechanizmas（srcset/sizes) Būtent tam, kad ši problema būtų išspręsta.

Kaip suprasti, kad atitinka reikalavimus:

• Atidarant puslapį telefonu, atsisiunčiamų vaizdų dydis turėtų būti aiškiai mažesnis nei kompiuteryje
• To paties vaizdo įkeliamų išteklių dydis skiriasi skirtinguose įrenginiuose (vietoje to, kad visada būtų atsisiunčiamas originalus vaizdas)

Dažniausia klaida:

• Kai kurios temos/kūrėjai naudoja paveikslėlius kaip CSS fono paveikslėlius arba išveda juos pasitelkdami nestandartinius būdus, galintys apeiti srcsettodėl visada rodomi dideli vaizdai
• Naudodami išorinį vaizdų talpinimą ar trečiųjų šalių vaizdų blokus, taip pat galite apeiti medijos bibliotekos generuojamą kelių dydžių sistemą

---

2.2 Suspaudimas (sumažinti KB, bet nepažeisti kokybės)

Suspaudimo esmė yra ne “kuo mažesnis, tuo geriau”, o “beveik nematomas skirtumas akiai, bet tūris žymiai sumažėja”.

Taisyklės yra šios:

• Nuotraukos/nufotografuoti (žmonės, produktai, kraštovaizdžiai)：pirmenybė turi būti teikiama nuostolingam suspaudimui (didžiausia nauda)
• sąsajos ekrano vaizdas / paveikslėlis su daug teksto: glaudinti atsargiau, kad tekstas netaptų neryškus
• Logotipas / piktograma: Pirmenybė teikiama SVG arba atsargiam be nuostolių glaudinimui (naudojant nuostolingą glaudinimą kraštai lengvai susilieja)

Kaip suprasti, kad atitinka reikalavimus:

• Daugumos puslapių paveikslėlių dydis akivaizdžiai sumažėjo
• Be akivaizdaus triukšmo, sulietų kraštų, spalvinių juostų ar susiliejusio teksto

---

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

WordPress jau palaiko įkėlimą WebP (5.8) ir AVIF (6.5)。
Tačiau norint iš tikrųjų pradėti naudoti “naujos kartos formatus”, paprastai reikia išspręsti du dalykus:

1. Kaip masiškai konvertuoti istorinių medijų bibliotekoje(Kitaip optimizuosite tik “naujus paveikslėlius, įkeltus vėliau”)
2. ar generuoti kopiją, ar pakeisti originalų paveikslėlį(Tai yra rizikos takoskyra; toliau daugiausia kalbėsime apie Plus WebP funkciją “pakeisti ir ištrinti originalų vaizdą”)

Rekomenduojama formuluotė:

• WebP: paprastai naudojamas kaip numatytasis pasirinkimas (stabilesnis suderinamumas)
• AVIF: tolesnė suspaudimo kryptis, tinka dideliems paveikslėliams / pagrindinio ekrano dideliems paveikslėliams / albumo paveikslėliams (bet daugiauPriklausomos aplinkos palaikymas）

---

2.4 Tingusis įkėlimas turi būti naudojamas teisingai (ne viską vienu metu)

Nuo WordPress 5.5Numatytasis tingusis įkėlimasPaveikslėliai.
Tai gali sumažinti pradinio atvaizdavimo metu naudojamą pralaidumą:

• Atidėtinis įkėlimas tinka “už ekrano esančius išteklius”
• Pirmojo ekrano svarbiausias didelis vaizdas (dažnai tai yra pagrindinis pirmojo ekrano vaizdas) dažnai netinka vėlesniam įkėlimui

---

2.5 Pristatymo sluoksnis: CDN / Paveikslėlis CDN

Suspaudimas, dydis ir formatas sprendžia klausimą, kaip padaryti failą mažesnį ir tinkamesnį;
Bet jei vaizdai visada traukiami iš tolimo šaltinio serverio, tinklo delsos vis tiek pastebimai paveiks patirtį. Tokiu atveju reikalingas “pristatymo sluoksnio” sprendimas (1TP

Du tipiškos kryptys:

• "Cloudflare" lenkų kalba：Cloudflare dokumentacijaPateikiama informacija apie Lenkijos suspaudimo būdus (be nuostolių/su nuostoliais/WebP) ir paminėta, kad naudojant format=auto Leisti naudoti WebP/AVIF formatą.
• Jetpack svetainės greitintuvas：Jetpack dokumentacijaPaaiškinama, kad jis optimizuoja vaizdus ir kartu su statiniais ištekliais paskirsto per savo tinklą.

Vaizdų optimizavimas atsakingas už sumažinimą ir pritaikymą,CDN atsakingas už pristatymą arčiau ir stabiliau

3. Pasirinkimas: eikite tik dviem pagrindiniais maršrutais

Dažniausia vaizdų optimizavimo nesėkmės priežastis yra ne “neįdiegtas įskiepis”, o tai, kad jų įdiegta per daug, todėl vaizdai apdorojami pakartotinai:
A suspaudžia, B taip pat suspaudžia; A konvertuoja į WebP/AVIF, B taip pat konvertuoja; A keičia URL, B daro perrašymą – galiausiai pats nebesupranti, kas iš tik

Taisyklės:

Tik vienas kelias: arba visiškai nemokamai vietoje, arba vienas iš trijų debesijos glaudinimo variantų.

• Maršrutas A (visiškai nemokamas vietinis):„Plus WebP“ arba „AVIF“ + „EWWW Image Optimizer“(arba pasirinkite tik vieną)
• Maršrutas B (pasirinkite vieną iš trijų debesies glaudinimo variantų):"ShortPixel" / "Imagify" / "TinyPNG

---

3.1 Maršrutas A: visiškai nemokama vietinė versija (Plus WebP arba AVIF arba EWWW)

Šios maršruto ypatybės:

• Jūs nesikliaujate trečiųjų šalių suspaudimo paslaugomis, pagrįstomis “mėnesine kvota arba mokėjimu už paveikslėlį” (nors kai kurios funkcijos gali bū
• Kaina: paketinis apdorojimas gali labiau apkrauti serverio CPU/IO, todėl reikia labiau atsižvelgti į strategiją ir riziką“

3.1.1 Plius WebP arba AVIFPagrindas – “generuoti / pakeisti”, tai nėra tradicinis “suspaudimo įrankis”

• Generuojant visas nuotraukas:Pradinio vaizdo failo ID bus perrašytas WebP/AVIF, pradinis failas bus ištrintas, o turinyje esantys URL taip pat bus pakeisti。
• Įskiepis pateikia WP-CLI komandą ir primena: kai failų daug, patikimiau naudoti WP-CLI.

Tai reiškia: tai nėra “tyliai sugeneruoti jums WebP”, o veikiau tai gali būti vienas kartasTurto perkėlimas(ypač jei įjungsite parinktį “Pakeisti ir ištrinti originalų vaizdą”).

Dviejų režimų skirtumas

1 režimas: išlaikyti originalą + sukurti WebP/AVIF kopijas (stabiliau)

• Privalumai: lengviau atsitraukti susidūrus su suderinamumo problemomis
• Kaina: padidės disko vietos naudojimas (originalūs vaizdai + naujas formatas + kelių dydžių miniatiūros)

2 režimas: pakeisti ir ištrinti originalų vaizdą (agresyviau)

• Privalumai: disko vieta neužsipildys taip greitai; vidinės nuorodos tiesiogiai taps nauju formatu
• Rizika: keisdami turtą ir nuorodas, susidursite su didesnėmis suderinamumo problemų tyrimo sąnaudomis (ypač kai kai kurios išorinės sistemos ar temos logika priklauso nuo pirminio fail

Dažnos „Plus WebP“ arba AVIF klaidos

1. Atlikus visos bibliotekos pakeitimą, kai kurių puslapių paveikslėliai rodomi netinkamai
   Priežastis paprastai nėra “sugedęs paveikslėlis”, o tai, kad URL pakeitimo, talpyklos, miniatiūrų strategijos ir pan. grandinėje kažkuris etapas nesutapo.
2. Kuo daugiau miniatiūrų, tuo didesnis pakeitimų mastas
   Įkėlus vieną vaizdą į „WordPress“, sukuriami keli dydžiai; tema ar įskiepis gali pridėti dar daugiau. Visiškas pakeitimas reiškia, kad galite keisti didelį failų rinkinį.
3. Tik formato perkėlimas nebūtinai reiškia mažiausią dydį
   WebP/AVIF paprastai yra mažesni, tačiau “dydžio strategija” ir “suspaudimo strategija” vis tiek yra svarbios. Nelaikykite Plus WebP “vieno mygtuko spartinimo” priemone.

---

3.1.2 EWWW vaizdų optimizavimo priemonė: nemokamo vietinio glaudinimo pavyzdys

EWWW įskiepio puslapio pozicionavimas yra labai aiškus:

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

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

Jei “Plus WebP” naudojate kaip formato perkėlimo / keitimo strategiją, tuomet EWWW labiau tinka šiai paskirčiai៖

• Suspaudimas ir dydžio optimizavimas(ypač JPG/PNG ir kitų pradinių išteklių dydžio mažinimas)
• Masinio medijos bibliotekos optimizavimo istorija(Tikslas – “sumažinti apimtį”, o ne “pakeisti URL”)

Tipinės EWWW klaidos

1. Partinio optimizavimo metu padidėja serverio apkrova
   Kadangi vietinis glaudinimas naudoja CPU/IO. Sprendimas nėra “nenaudoti”, o “vykdyti paketais, ne piko metu ir prireikus rinktis iškrovimo / debesijos sprendimus”.
2. “Sukurtas WebP nebūtinai reiškia, kad svetainėje tikrai rodomas WebP
   Daugelis papildinių remiasi šiuo klaidingu supratimu: generavimas yra viena, o pateikimo strategija (perrašymas, „picture“ žyma, talpyklos pataikymas ir pan.) – visai kas kita.
3. Dubliuoja kitų papildinių funkcijas
   Jei renkiesi A maršrutą, stenkitės papildomai nebejungti ShortPixel/Imagify/TinyPNG tipo debesų glaudinimo; jei renkiesi B maršrutą, daugiau nebeįjunk Plus WebP pakeitimo logikos. Pagrindinis principas:Vienas maršrutas iki galo.

---

3.2 Maršrutas B: Vienas iš trijų debesų suspaudimo pasirinkimų (ShortPixel / Imagify / TinyPNG)

Šis maršrutas tinka tiems, kurie nori taupyti serverio išteklius, patogiau vykdyti masinius veiksmus ir sutinka su apmokestinimu pagal limitą arba naudojimą.
Tačiau debesų suspaudimas lengviausiai sukelia nesusipratimų taškas yra:Nemokama kvota nėra tik “nemokamų nuotraukų skaičius”Miniatiūrų dydžio kiekis, WebP/AVIF generavimas ir pakartotinis suspaudimas žymiai įtakoja suvartojimą.

Žemiau bus paaiškinta: kaip veikia nemokama/mokama versija, kaip skaičiuojamos kvotos, kokios klaidos dažniausiai daromos ir kokio tipo svetainėms tinka.

---

3.2.1 ShortPixel100 nemokamų kreditų/mėn., bet kreditai bus sunaudoti miniatiūrų ir WebP/AVIF didinimui

Nemokama / mokama versija

„ShortPixel“ papildinio aprašyme aiškiai parašyta:

• 100 nemokamų kreditų per mėnesį
• taip pat yra “papildomi neriboti mėnesiniai kreditai” (įskiepio puslapyje pateikta atitinkama kainos informacija)
• Taip pat siūlome “nebegaliojančius vienkartinius kreditų paketus” (ir pateikiame pradinės kainos informaciją)

Patarimas:

• Nemokama: kas mėnesį suteikiamas tam tikras kreditų kiekis, skirtas paprastoms svetainėms arba testavimui
• Vienkartinis paketas: tinka svetainėms, kurių “medijos biblioteka labai didelė ir norima ją išvalyti vienu kartu” (perkama vieną kartą ir naudojama, kol baigiasi; paprastai negalioja ribotą laiką)
• Mėnesinis/neribotas: tinka nuolat atnaujinantiems paveikslėlius, ilgalaikiam stabiliai optimizavimui

Oficialus ShortPixel KB taip pat pateikiaaiškų paaiškinimą apie „vienkartinius paketus vs neribotą mėnesinį“Neribotas mėnesinis planas yra mokamas kas mėnesį (arba kasmet), suteikiantis neribotą kreditų skaičių su fiksuota CDN kvota; vienkartiniai kreditai nenustoja galioti, leisdami jums lanksčiau naudotis pagal poreikius.

Svarbiausia: kaip skaičiuojami „ShortPixel“ kreditai?

ShortPixel oficiali dokumentacija KB kalba labai tiesiogiai:

• WordPress įkeliant vieną paveikslėlį sugeneruoja kelias miniatiūras;
• Kiekvienas miniatiūros optimizavimas skaičiuojamas kaip vienas kreditas；
• Jei pasirinksite generuoti WebP arba AVIF,Kiekvienas originalo ir miniatiūros WebP/AVIF versijai papildomai sunaudoja vieną kreditą；
• Galite neįtraukti tam tikrų miniatiūrų, kad sumažintumėte kreditų suvartojimą.

kreditai Pavyzdys：

Tarkime, įkėlėte 1 paveikslėlį, o tema / įskiepis sugeneravo 8 miniatiūras:

• Tik optimizuoti originalą + miniatiūrą: 1 (originalas) + 8 (miniatiūra) = 9 kreditai
• Jei reikia generuoti WebP/AVIF: kiekvienam iš 9 aukščiau esančių dar viena next-gen versija → dar +9 kreditai
  Tai reiškia, kad jūs manote, kad tai yra “1 paveikslėlis”, bet iš tikrųjų gali būti sunaudota beveik “2 skaitmenų kreditai”.

Taigi:“Nemokama 100 kreditų” nereiškia “nemokamai 100 paveikslėlių”.

ShortPixel dažniausios spąstai

1. Nemokami 100 kreditai greitai baigsis
   Pagrindinė priežastis: daug miniatiūrų + papildomi kreditai už WebP/AVIF generavimą
   pasiūlymas：

• Pirmiausia įvertinkite svetainės miniatiūrų skaičių
• Neįtraukti nereikalingų miniatiūrų dydžių (optimizuoti tik tikrai naudojamus dydžius)
• Pirmiausia nustatykite suspaudimo strategiją, tada vykdykite masinį apdorojimą, kad išvengtumėte klaidų bandymų

2. Kartu 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 sudėtingesnis. B variantu už tai atsako tik ShortPixel.
3. Manėte, kad įdiegus būtinai “priekinėje dalyje rodomi WebP/AVIF”
   ShortPixel įskiepio puslapisPalaiko WebP/AVIF konvertavimą ir next-gen vaizdų įtraukimą į puslapio priekinę dalį (pvz., per žymas)
   Tačiau baigus vis tiek reikia patikrinti rezultatą.

---

3.2.2 ĮsivaizduokiteNemokama 201 TP234T/mėn.; kvota skaičiuojama pagal “originalaus vaizdo dydį + miniatiūrų skaičių”, pakartotinis glaudinimas kvotą nuskaičiuoja dar kartą

Nemokamas limitas ir pozicionavimas

Oficialus „Imagify“ kainų puslapisParašyta labai aiškiai:Nemokama paskyra: 20MB kvota per mėnesį。
Jo papildinio puslapyje taip pat aiškiai nurodyta, 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škina apmokestinimo mechanizmą:

• Miniatiūrų skaičius turi įtakos sąnaudomsPavyzdžiui, jei turite 10 miniatiūrų dydžių, optimizuojant 1 paveikslėlį bus optimizuojama 11 paveikslėlių (originalas + 10 miniatiūrų), ir visi jie prisidės prie kvotos sunaudojimo.
• Pagal originalaus failo dydį atimti kvotąPavyzdžiui, jei išsiųsite 100 KB dydžio vaizdą į Imagify, iš limito bus nuskaič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 bendrinama tarp jų.

Tai yra “Imagify” „pagrindinis supratimo būdas“:
Tai labiau panašu į duomenų paketą: kiek išsiųsi, tiek nuskaitys; kuo daugiau miniatiūrų, tuo daugiau nuskaitys; jei pakartotinai smarkiai suglaudinsi, mokestis bus nuskaičiuotas dar kartą.

Lengvai suprantamas „Imagify“ kvotos pavyzdys

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

• Kai Imagify optimizuoja, jis įtraukia ir “originalų vaizdą + 8 miniatiūras” (jei pasirinksite optimizuoti viską), o tai reiškia, kad šis veiksmas sunaudos kvotos kiekį, artimą “viso šių failų pradinio dydžio sumai”.
  Štai kodėl kai kurios svetainės mano, kad “20MB” labai greitai išsenka: problema ne ta, kad „Imagify“ nepakanka, o ta, kad kiekvieną kartą įkeliate per didelius paveikslėlius, sukuriama per daug miniatiūrų ir, tikėtina, dar ne kartą bandote skirtingus glaudinimo lygius.

Dažniausios „Imagify“ klaidos

1. Nemokamas 20MB nepakanka “visos svetainės istorijos ištrynimui”
   20MB paprastai labiau tinka testavimui ir lengviems atnaujinimams; jei tavo medijos biblioteka ir taip jau didelė, vienkartinis visiškas jos išvalymas greičiausiai pareikalaus atnaujinimo.
2. Pakartotinai keičiant suspaudimo lygį kvota sunaudojama pakartotinai
   Aiškiai nurodoPeroptimizavimas vėl sunaudos kvotą.
   Siūlome šiame puslapyje aiškiai aprašyti “strategiją”:

• Pradėkite nuo nedidelio skaičiaus vaizdų, kad nustatytumėte suspaudimo lygį ir išvaizdą.
• Patvirtinus strategiją, vykdyti paketais
  Venkite pakartotinių bandymų ir klaidų visoje duomenų bazėje

3. Naudojant tą patį API raktą keliose svetainėse, kvota “neaiškiai sumažėja”
   Jei tą patį API raktą naudosite keliose svetainėse, kvota bus bendra.
   Todėl komandų ar kelių svetainių atveju geriausia aiškiai nustatyti, kurios svetainės naudojasi bendrai, o kurios – atskirai, kad biudžetas netaptų nekontroliuojamas.

---

3.2.3 TinyPNG(Tiny Compress Images): Nemokamai 500 kreditų/mėn.; konvertavimas į WebP/AVIF “papildomai atims 1 kreditą už kiekvieną dydį”

Nemokama kvota ir jos apmokestinimo logika

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

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

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

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

Lengvai suprantamas TinyPNG kreditų pavyzdys

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

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

Dažniausios TinyPNG klaidos

1. Manoma, kad 500 kreditų = 500 vaizdų
   Ne. Jis sunaudojamas pagal vaizdo dydį / variantą. Papildinio puslapyje jau aiškiai nurodyta: “už konvertavimą papildomai nuskaitomas 1 kreditas už kiekvieną vaizdo dydį”.
2. Temų / el. prekybos įskiepiuose sugeneruojama per daug dydžių, nemokama kvota akivaizdžiai sumažėjo
   Kuo daugiau dydžių, tuo lengviau padidėja credits sunaudojimas.
3. Įjungus konvertavimą limitas staiga pradėjo greitai išsekti
   Tai ne klaida, o jo apmokestinimo mechanizmas.
   Strategijos patarimai:

• Jei nemokamas etapas daugiausia skirtas suspaudimui ir dydžio mažinimui, pirmiausia galite tik suspausti, o kai patvirtinsite, kad svetainės struktūra stabili ir tikrai reikia naujos kartos formato, įjungti konvertavimą

4. Rekomendacijos pagal scenarijų: kaip pasirinkti skirtingų tipų svetaines

Nors tai vis dar WordPress, turinio svetainių, el. prekybos, portfolio ir narių svetainių “vaizdų apkrovos taškai” nėra vienodi.

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

Prioriteto pasiūlymas:

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

Tinkamesnis maršrutas:

• Norite paprasčiau: 1 iš 3 variantų (ShortPixel / Imagify / TinyPNG)
• Norite nemokamai: A maršrutas (“Plus WebP + EWWW”), bet rekomenduojama pirmiausia pradėti nuo „atsargaus režimo (nešalinant originalių vaizdų)“ ir įvertinti riziką

Dažna klaida:

• Straipsnio puslapio pagrindinis vaizdas per didelis, netinkama tingaus įkėlimo strategijaSulėtins pirmą ekraną

4.2 El. prekybos / produktų svetainė (daug miniatiūrų, daug vaizdų variantų, svarbiausia – stabilumas)

Elektroninėje prekyboje dažniausiai problemų kyla ne dėl “prasto suspaudimo rezultato”, o dėl to, kad “po optimizavimo kai kurie dydžiai būna neteisingi, trūksta miniatiūrų arba svetainės priekinės dalies komponentai negali gauti paveikslėlių”.

Prioriteto pasiūlymas:

1. Pirmiausia stabilumas: pasirinkite kiek konservatyvesnę glaudinimo strategiją ir nuo pat pradžių nedarykite visos duomenų bazės pakeitimo.
2. Įvertinkite miniatiūrų dydžius: el. prekybos temos paprastai sugeneruoja daugiau dydžių, todėl sunaudojama daugiau limito (ypač pastebima su ShortPixel/TinyPNG)
3. Pirmiausia atlikite nedidelės apimties patvirtinimą, tada vykdykite masiškai（labai svarbu）

Tinkamesnis maršrutas:

• B variantas dažnai paprastesnis: ShortPixel / Imagify / TinyPNG leidžia apdoroti paketais, svarbiausia suprasti limitų mechanizmą ir iš anksto įvertinti kainą
• Maršrutas A irgi tinka, bet su Plus WebP “perrašyti ID / ištrinti originalų vaizdą / pakeisti URL” elgsena reikia elgtis atsargiau: tai yra išteklių migravimas, todėl nerekomenduojama iš karto visko pakeisti.

4.3 Portfelio / fotografijos svetainė (jautri vienos nuotraukos kokybei, dideli vaizdai, aukšti estetikos reikalavimai)

Prioriteto pasiūlymas:

1. Dydžių strategija (rodymo srities valdymas)
2. Suspaudimo strategija (geriau šiek tiek didesnis failas nei prarastos detalės)
3. WebP/AVIF (nauda ypač akivaizdi didelių vaizdų scenarijuose, bet reikia patikrinti vaizdo kokybę)

Tinkamesnis maršrutas:

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

5. Limitų ir kainodaros palyginimas: aiškiai paaiškinkite, ar nemokamo plano pakanka

Kurį pasirinkti labiau apsimoka ir kiek laiko užteks nemokamos versijos?

5.1 Trys mokesčių modeliai

• ShortPixelKreditaiKreditai skaičiuojami pagal originalų vaizdą ir miniatiūrų skaičių; už kiekvieną sugeneruotą WebP/AVIF versiją papildomai nuskaičiuojamas kreditas.
• Įsivaizduokite(MB kvota): pagal “pradinį failo dydį” nuskaičiuojama iš kvotos; kuo daugiau miniatiūrų, tuo daugiau nuskaičiuojama; pakartotinis glaudinimas bus nuskaičiuotas dar kartą.
• TinyPNGKreditaiKas mėnesį 500 kreditų; įjungus WebP/AVIF konvertavimą, už kiekvieną vaizdo dydį bus papildomai nuskaičiuotas kreditas.

5.2 Greito įvertinimo metodas

Galite taip apskaičiuoti:

1. Atsitiktinai pasirinkite vieną dažnai įkeliamą originalų vaizdą ir pažiūrėkite, maždaug kokio jis dydžio (pvz., 300 KB / 1MB / 3MB)
2. Patikrinkite, kiek maždaug miniatiūrų dydžių sugeneruoja jūsų svetainė (pvz., 5 / 10 / 20)
3. Nuspręskite, ar norite generuoti WebP/AVIF (taip/ne)

Tada, naudodamiesi toliau pateiktais “mintiniais skaičiavimais”, supraskite sąnaudas:

• ShortPixelKiekvienas paveikslėlis ≈ (1 + miniatiūrų skaičius) kreditų; jei generuojamas WebP/AVIF, ≈ dar dvigubai daugiau (nes next-gen versijai taip pat reikia kredito)
• Įsivaizduokite: iš kiekvieno paveikslėlio kvota nuskaitoma maždaug pagal (originalo dydį + visų miniatiūrų dydį); pakeitus glaudinimo lygį ir suglaudinus iš naujo, kvota bus nuskaičiuota dar kartą
• TinyPNGNemokami 500 kreditų; jei jūsų svetainėje kiekvienas paveikslėlis generuoja daug dydžių ir įjungta konversija, nemokamų paveikslėlių skaičius žymiai sumažės (

6. Rizikos įspėjimas

Rizika 1: Neleiskite, kad keli įskiepiai kartotų tą patį veiksmą.

Tai dažniausias “nelaimės šaltinis”

• Maršrutas A:Plius WebP arba AVIF + EWWW(Abi dalyvauja, bet nedaro to paties tipo konversijos ir pristatymo vienu metu, arba įdiegiama tik viena iš jų)
• 2 variantas: ShortPixel / Imagify / TinyPNG Pasirinkite vieną iš trijųPasirinkite vieną atsakingą už glaudinimą ir naujos kartos formatą

Rizika 2: Plus WebP “padengimo ID / originalo ištrynimas / URL pakeitimas” priklauso išteklių perkėlimui

Dar kartą pabrėžiame:Plius WebP Aprašyme aiškiai nurodyta, kad atliekant pilną generavimą bus perrašytas pradinio vaizdo ID, ištrintas pradinis failas ir pakeistas turinio URL.
Tai reiškia, kad tai nėra “nedidelė nuostata, kurią galima bet kada atšaukti”, o turto lygio pakeitimas.

Siūloma strategija turėtų būti:

• Pirmiausia išbandykite mažu mastu (keliasdešimt iki kelių šimtų nuotraukų)
• Patikrinkite, ar priekinis rodymas, miniatiūros ir talpyklos atnaujinimas veikia normaliai
• Tada apsvarstykite visos duomenų bazės apdorojimą

Rizika 3: Tikrasis debesų suspaudimo “nemokamos kvotos” sunaudojimas priklauso nuo miniatiūrų skaičiaus ir next-gen pasirinkimo

• ShortPixel: Miniatiūros ir next-gen žymiai paveiks kreditus
• TinyPNGĮjungus WebP/AVIF, už kiekvieną paveikslėlio dydį bus papildomai nuskaičiuoti kreditai
• Įsivaizduokite: Skaičiuojama pagal originalaus paveikslėlio dydį, kuo daugiau miniatiūrų, tuo daugiau atimama, perkrovimas atims pakartotinai

Rizika 4: “Sugeneruotas WebP/AVIF” nereiškia “priekinėje dalyje pristatomas WebP/AVIF”

Daugelis žmonių atlikę konvertavimą jaučia, kad “nespagrėjo”, nes priekinis planas vis dar generuoja JPG/PNG (nesutampa kažkuris iš šių etapų: talpykla/perrašymas

7. Kaip patikrinti, ar pakeitimai įsigaliojo po atlikimo

4 labai paprasti patikrinimo taškai:

1. antrą kartą atnaujinus tą patį puslapį, ar įkėlimas yra stabilesnis ir greitesnis(ar jaučiama, kad veikia talpykla ir optimizavimas)
2. ar paveikslėlių dydžiai mobiliuosiuose ir staliniais įrenginiuose yra pastebimai skirtingiPrisitaikantis 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 kelis vaizdus atsitiktinai: priartinę pažiūrėkite, ar jie nėra akivaizdžiai neryškūs ir ar tekstas neatrodo išsiliejęsAr glaudinimo kokybė per aukšta

Jei visi šie keturi punktai atitinka, vadinasi, tavo pasirinktas maršrutas jau veikia. Toliau daryk tai dar kartą Pristatymo sluoksnis“, apskritai bus stabiliau.

8. Veiksmų rekomendacijos

1. Pirmiausia pasirinkite maršrutą:

• norėčiau kuo labiau nemokamai：Plus WebP arba AVIF + EWWW（arba įdiekite tik vieną）
• Norite sutaupyti serverio resursų, mokėti pagal kvotą yra patogiau：ShortPixel / Imagify / TinyPNG – pasirinkite vieną

2. Pirmiausia atlikite nedidelį testavimą (kelias dešimtis paveikslėlių)
3. Patvirtinkite, kad viskas veikia, tada vykdykite masinį apdorojimą
4. Reikia toliau didinti pristatymo stabilumą：skaityti CDN pagreitinimas

Dažniausiai pasitaikančios problemos

1. Kiek papildinių man iš tikrųjų reikia įdiegti? Ar galiu įdiegti visus?

Stenkit tik vienu maršrutu.

• 1 maršrutas: „Plus WebP“ arba AVIF + „EWWW Image Optimizer“ (arba įdiekite tik vieną iš jų)
• Maršrutas B: ShortPixel / Imagify / TinyPNG pasirinkite vieną
  Vienoje svetainėje vienu metu leisti keliems įskiepiams atlikti “suspaudimą / konvertavimą į WebP / AVIF / URL keitimą / pristatymo perrašymą” labiausiai gali

2. Ar WordPress jau nepalaiko WebP/AVIF? Ar man vis dar reikia papildinio?

Reikia atskirti:
“Palaiko įkėlimą/naudojimą” ≠ “automatinis konvertavimas/automatinis pristatymas”.
WordPress 6.5 taip pat automatiškai nepavers senų JPG/PNG į WebP/AVIF paketiniu būdu ir automatiškai neįgyvendins visos grandinės “pateikti AVIF/WebP pagal naršyklės galimybes ir prireikus grįžti prie ankstesnio formato”. Jei norite, kad ir senoji medijos biblioteka tai palaikytų, paprastai reikia papildinio arba paslaugos.

3. Kuriame paveikslėlio optimizavimo etape yra didžiausias “grąžos” santykis?

Įprastai Pirmiausia teisingai nustatykite “dydį” (srcset/sizes)。
Daugelis svetainių lėtai veikia ne todėl, kad vaizdai nesuspausti, o todėl, kad puslapyje rodoma tik 900 px, bet vartotojui vis tiek tenka atsisiųsti 3000 px originalų vaizdą. Suspaudimas gali sutaupyti KB, bet dėl “netinkamo dydžio” be reikalo atsisiunčiate kelis kartus daugiau duomenų.

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

Pažiūrėkime į du reiškinius:

• Atidarius puslapį telefone, atsisiųsto paveikslėlio dydis akivaizdžiai mažesnis nei kompiuteryje
• Tas pats paveikslėlis įkelia skirtingo dydžio išteklius skirtinguose įrenginiuose
  Jei visada atsisiunčiamas originalus vaizdas, dažniausia priežastis ta, kad tema ar kūrimo įrankis naudoja vaizdą kaip CSS foną arba pateikia jį pasirinktiniu būdu, apeidamas medijos bibliotekos kelių dydžių ir srcset funkcijas.

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

Nelygu.
Generavimas yra tik “failų lygmenyje” baigtas; ar priekinis planas iš tikrųjų pristato WebP/AVIF, priklauso nuo perrašymo, picture žymės strategijos, ar talpykla pataikė, ar naršyklės derybos veiksmingos ir kt. Baigę būtinai “atsitiktinai patikrinkite kelių paveikslėlių resursų tipą”.

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

Jo rizika nėra “suspaudimas”, o}Turto perkėlimo lygio pakeitimai：

• Atliekant visos apimties generavimą 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ėje: Pirmiausia išbandykite mažu mastu (keliasdešimt iki kelių šimtų nuotraukų) + turėkite prieinamą atsarginę kopiją, tada galvokite apie visos duomenų bazės apdorojimą.

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

Paprastai tariant:

• 1 režimas: išlaikyti originalą + sukurti WebP/AVIF kopijas (stabiliau)Patogu atšaukti, bet diskas bus labiau užpildytas (originalus vaizdas + naujas formatas + kelių dydžių miniatiūros).
• 2 režimas: pakeisti ir ištrinti originalų vaizdą (agresyviau): Diskas nėra linkęs sparčiai išsipūsti, tačiau kai “keiti išteklius + keiti nuorodas”, suderinamumo problemų šalinimo sąnaudos yra didesnės.
  Kuo sudėtingesnė svetainė (el. prekyba / daug įskiepių / daug dydžių), tuo labiau rekomenduojama pradėti nuo stabilesnio režimo.

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

EWWW labiau panašus į “vietinį glaudinimo darbininką”: sunaudos CPU/IO.
Dažna situacija – vykdant masinį optimizavimą apkrova padidėja; tai nereiškia, kad tai netinka, tiesiog reikia tinkamos strategijos: dalimis, ne piko metu, o prireikus rinktis iškrovimo ar debesijos sprendimą.
Jei siekiate 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į išsenka vos po kelių paveikslėlių?

Nes kreditai nėra “nuotraukų skaičius”Bus padidinta miniatiūros ir naujos kartos formato

• Originalas + kiekviena miniatiūra skaičiuoja kreditą
• Jei generuojate WebP/AVIF, kiekviena atitinkama versija papildomai sunaudos credit.
  Todėl tai, ką laikai “1 vaizdu”, iš tikrųjų gali sunaudoti beveik “dviženklį kreditų skaičių”. ShortPixel

10. Kodėl „Imagify“ nemokamo 20MB per mėnesį limito taip pat greitai nepakanka?

Imagify labiau primena “duomenų srauto paketą”:

• Pagal jūsų išsiųstusPradinis failo dydisAtimti kvotą
• Kuo daugiau miniatiūrų, tuo didesnės sąnaudos
• Pakeitus glaudinimo 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ų vaizdų, per daug miniatiūrų arba pasikartojančių bandymų ir klaidų.

11. TinyPNG nemokamai suteikia 500 kreditų per mėnesį, kodėl papildinys 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 / varianto“:

• Įprastas WordPress diegimas suspaudžia maždaug 100 nuotraukų per mėnesį.
• Įjungti konvertavimą į AVIF arba WebP:Kiekvienas vaizdo dydis papildomai sunaudos 1 kreditąTodėl tikriausiai bus galima suspausti ir konvertuoti apie 50 vaizdų per mėnesį (priklausomai nuo miniatiūrų dydžių skaičiaus).
  Taigi 500 kreditų ≠ 500 paveikslėlių.

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

Įkėlus vieną vaizdą į WordPress, sukuriami keli jo dydžiai; tema ar įskiepis (ypač el. prekybai) gali pridėti dar daugiau dydžių.
Debesijos glaudinimo kreditai ar kvota paprastai skaičiuojami “originalus vaizdas + miniatiūra kartu”, 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 kaip tik sulėtina?

Atidėtas įkėlimas tinka “už ekrano ribų esantiems ištekliams”.
Jei ir tas svarbiausias didelis paveikslas pirmame ekrane bus įkeltas vėliau, tai gali sulėtinti pirmojo ekrano rodymą. Nuo “WordPress 5.5” numatytasis tingusis įkėlimas yra gerai, bet nereikėtų taikyti jo viskam vienodai.

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

Suspaudimas, dydis ir formatas sprendžia klausimą, kaip padaryti failą mažesnį ir tinkamesnį;
CDN sprendžia arčiau ir stabiliau vykdomą pristatymą。
Kai vaizdai iš pradinės svetainės dėl tolimo paėmimo įkeliami su akivaizdžiu vėlavimu, papildomai pridėjus CDN / vaizdo CDN (pvz., Cloudflare Polish / Jetpack Site Accelerator), bendras veikimas bus stabilesnis, skaitymas „WordPress“ spartinimas。

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

Greičiausias patvirtinimo būdas:

• antrą kartą atnaujinus tą patį puslapį, ar įkėlimas yra stabilesnis ir greitesnis
• Ar mobiliajame ir darbalaukio įrenginyje įkeliamų vaizdų dydžiai aiškiai skiriasi (ar veikia srcset/sizes)
• Atsitiktinai patikrinkite kelis vaizdus: ar yra WebP arba AVIF failų / išteklių
• Patikrinkite kelis vaizdus atsitiktinai: priartinę pažiūrėkite, ar jie nėra akivaizdžiai neryškūs ir ar tekstas neatrodo išsiliejęs