Optimalizácia obrázkov na webovej lokalite

Optimalizácia obrázkov je jedným z najviac “odmeňovaných” aspektov výkonu WordPress: pri rovnakej štruktúre stránky a téme, ak sú veľkosť, rozmery, formátovanie a doručenie obrázkov správne, sa načítanie často okamžite zlepší.

Optimalizácia obrázkov je však zároveň najjednoduchším spôsobom, ako urobiť neporiadok, nie preto, že by to bolo technicky príliš náročné, ale preto, že informácie sú príliš roztrieštené:
Prečítate si niekoľko článkov, viete, že “kompresia”, “WebP/AVIF”, “lenivé načítanie”, a potom sa pozrite na úvod pluginu a povedal “zadarmo každý mesiac! 100 kreditov mesačne”, “zadarmo 20MB”, “1 kredit za obrázok”, ale čím viac čítam, tým viac som zmätený-- Je to dosť zadarmo? Ako odpočítať poplatok? Nepochopili ste nesprávne “to isté”? A hlavne:Prejavilo sa to po tom, čo ste to urobili, alebo nie?

Tento článok sa venuje len trom veciam:

1. Poskytnúť spustiteľný súborplán (aj obr.)(Čo urobiť ako prvé, čo urobiť ako druhé)
2. Ujasnite si, pre akú možnosť sa rozhodnete (aký je rozdiel medzi bezplatnými a platenými službami a pre koho sú vhodné).
3. Dopredu si napíšte najčastejšie úskalia (aby ste po skončení nemuseli hľadať a riešiť problémy).

1. Záver: Čo WordPress obsahuje a čo nie

Ak najprv nezistíte, čo už jadro WordPress robí, ľahko urobíte jednu z dvoch vecí:

• Namiesto toho, aby využívali “voľnú kapacitu”, ktorú by mali využívať, trávia čas/platia peniaze na to, aby kolo stavali znova a znova.
• Myslel som si, že WordPress “automaticky prevedie všetky staré obrázky do formátu WebP/AVIF”, ale ukázalo sa, že nie!

Jadro WordPress má tieto kľúčové funkcie zabudované:

• Responzívne obrázky (srcset/sizes): Od verzie WordPress 4.4 bude jadro vytvárať obrázky pre srcset 与 sizesa využíva obrázky viacerých veľkostí vytvorené počas nahrávania, aby umožnil prehliadaču vybrať vhodnejší zdroj na načítanie podľa podmienok obrazovky.
• Natívne lenivé načítanie: WordPress od verzie 5.5 umožňuje natívne lenivé načítanie obrázkov pomocou štandardov HTML. loading implementácia atribútu.
• Podpora nahrávania WebP: Od verzie WordPress 5.8 môžete nahrávať a používať WebP ako JPEG/PNG (za predpokladu, že vaše hostingové prostredie podporuje WebP).
• Podpora nahrávania súborov AVIF: WordPress od verzie 6.5 môže nahrávať a používať AVIF ako JPEG/PNG (závisí aj od podpory hostingu).

Ale dávajte pozor:
“Podpora nahrávania/používania” ≠ “Automatická konverzia/automatické doručenie”.
To znamená, že aj keď už používate WP 6.5, tieto súbory JPG/PNG v knižnici médií sa samé od seba nezmenia na WebP/AVIF; nedostanete automaticky plnú funkciu “výstup AVIF/WebP podľa možností prehliadača a vrátenie pôvodného obrázka pre nepodporované prehliadače”! --Túto časť je zvyčajne potrebné opraviť pomocou zásuvného modulu alebo služby.

2. Plán: Optimalizácia obrazu v 5 krokoch

Čo robiť, prečo, čo robiť, aby ste sa kvalifikovali, a čo je typická jama.

2.1 Najskôr správne určiť “veľkosť” (najprehliadanejšie, ale najvýnosnejšie)

Mnoho staníc je pomalých nie preto, že by kompresia nebola vykonaná, ale preto.Stiahnutý veľký obrázok, ktorý výrazne presahuje oblasť zobrazenia：
Ak je napríklad stránka v skutočnosti široká len 900px a vy požiadate návštevníka, aby si stiahol pôvodný obrázok s veľkosťou 3000px, prehliadač ho jednoducho “stiahne a potom zmenší”. Tým sa plytvá šírkou pásma, predlžuje sa čas dekódovania a spomaľuje sa prvá obrazovka.

WordPress 4.4+Mechanizmus citlivého obrazu（srcset/sizes) je určený práve na riešenie tohto problému.

Urobte to, čo sa považuje za priepustku:

• Pri otvorení stránky v mobilnom telefóne by mala byť veľkosť stiahnutého obrázka výrazne menšia ako na počítači.
• Rovnaký obrázok sa na rôznych zariadeniach načíta s rôznymi veľkosťami zdrojov (namiesto toho, aby sa vždy sťahoval pôvodný obrázok)

Najčastejšie nástrahy:

• Existujú témy/stavitelia, ktoré s diagramami zaobchádzajú ako s obrázkami na pozadí CSS alebo ich vytvárajú vlastným spôsobom, ktorý môže obísť srcsetVýsledkom bol veľký obraz
• Používate externe prepojené obrazové lôžka, obrazové bloky tretích strán a môžete tiež obísť systém viacerých veľkostí generovaný knižnicou médií.

---

2.2 Kompresia (znížte veľkosť KB, ale neznížte kvalitu)

Podstatou kompresie nie je “čím menšia, tým lepšia”, ale “rozdiel je sotva viditeľný voľným okom, ale pokles objemu je zrejmý”.

Pravidlá sú nasledovné:

• Fotografie/živé zábery (ľudia, produkty, krajiny): Prioritná stratová kompresia (maximálny zisk)
• Snímky obrazovky rozhrania / obrázky s veľkým množstvom textu: Pri kompresii buďte konzervatívnejší, aby ste sa vyhli rozmazanému textu
• Logo/ikona: Priorita SVG alebo diskrétne bezstratové (stratové je ľahké vložiť na okraj)

Urobte to, čo sa považuje za priepustku:

• Výrazné zmenšenie veľkosti obrázkov na väčšine stránok
• Žiadny viditeľný šum, zašumené okraje, farebné bloky, rozmazaný text

---

2.3 WebP / AVIF (stratégia formátu: menší pre rovnakú definíciu)

WordPress už podporuje nahrávanie WebP (5,8) vs. AVIF (6,5)。
Aby však formát novej generácie skutočne fungoval, je zvyčajne potrebné vyriešiť dve veci:

1. Ako hromadne konvertovať historické knižnice médií(V opačnom prípade optimalizujete len pre “nové obrázky nahrané neskôr”)
2. Či sa má vytvoriť kópia alebo nahradiť pôvodný obrázok(Toto je riskantný krok; na funkciu “Nahradiť a odstrániť pôvodný obrázok” v programe Plus WebP sa zameriame neskôr)

Odporúčaný štýl písania:

• WebP: všeobecne sa uprednostňuje ako predvolené nastavenie (stabilnejšia kompatibilita)
• AVIF: ďalší smer kompresie, vhodný pre veľké obrázky/veľké obrázky na prvej obrazovke/obrázky v albume (ale viacZávislosť na podpore životného prostredia）

---

2.4 Lenivé nakladanie by sa malo používať správne (nie je univerzálne)

WordPress 5.5 a vyššiePredvolené lenivé načítanieObrázok.
Znižuje využitie šírky pásma počas počiatočného vykresľovania:

• Lenivé načítanie pre “zdroje mimo obrazovky”
• Najdôležitejší veľký obrázok na prvej obrazovke (a v mnohých prípadoch kľúčový obrázok na prvej obrazovke) je často nevhodný na oneskorené načítanie

---

2.5 Dodávacia vrstva: CDN / Image CDN

Problém “menších súborov, ktoré sa zmestia”, sa rieši kompresiou, určením veľkosti a formátovaním.
Ak sa však obrázky vždy sťahujú zo vzdialenosti od zdroja, oneskorenie siete bude stále výrazne ovplyvňovať zážitok. Tu prichádza na rad riešenie “doručovacej vrstvy” (CDN/Image CDN).

Dva typické smery:

• Cloudflare Poľština：Dokumentácia CloudflarePredstavujú sa poľské metódy kompresie (bezstratová/bezstratová/WebP) a uvádza sa, že kompresia pomocou format=auto Formát WebP/AVIF je povolený.
• Jetpack Site Accelerator：Dokumentácia JetpackVysvetlite, že bude optimalizovať obrázky a distribuovať ich prostredníctvom svojej siete spolu so statickými zdrojmi.

Optimalizácia obrázkov je zodpovedná za ich zmenšovanie a prispôsobovanie.CDN Zodpovedá za bližšie a stabilnejšie

3. Výber: len dve hlavné trasy

Najčastejším zlyhaním pri optimalizácii obrázkov nie je “žiadny zásuvný modul”, ale príliš veľa zásuvných modulov, ktoré vedú k duplicitnému spracovaniu:
A komprimuje, B komprimuje, A konvertuje do formátu WebP/AVIF, B konvertuje, A mení adresy URL, B prepisuje - ani neviete, čo sa v stanici deje.

Pravidlá:

Existuje len jedna cesta: buď všetky tri bezplatné lokálne alebo cloudové kompresie.

• Trasa A (všetky bezplatné miestne trasy):Plus WebP alebo AVIF + EWWWW Image Optimizer(alebo len jeden)
• Trasa B (trojitá možnosť kompresie cloudu):ShortPixel / Imagify / TinyPNG

---

3.1 Trasa A: Úplne bezplatné miestne (plus WebP alebo AVIF alebo EWWW)

Táto trasa sa vyznačuje:

• Nespoliehate sa na kompresné služby tretích strán “za mesiac/za hárok” (hoci niektoré funkcie môžu byť ponúkané ako voliteľné služby).
• Náklady: dávkové spracovanie môže byť náročnejšie na server CPU/IO, čo si vyžaduje, aby ste venovali viac pozornosti “stratégii a riziku”.”

3.1.1 Plus WebP alebo AVIF: jadrom je “generovanie/nahrádzanie”, nie je to tradičný “kompresný nástroj”.”

• Pri generovaní celozväzkových obrázkov:ID pôvodného súboru obrázka sa prepíše súborom WebP/AVIF, pôvodný súbor sa odstráni a adresa URL v obsahu sa nahradí.。
• Zásuvný modul poskytuje príkazy WP-CLI a pripomína: WP-CLI je spoľahlivejší, keď existuje veľa súborov.

To znamená, že namiesto “tichého generovania WebP pre vás” by to mohol byťMigrácia aktív(Najmä ak zapnete možnosť “Nahradiť a odstrániť pôvodný obrázok”).

Rozdiely medzi týmito dvoma modelmi

Režim 1: Zachovanie pôvodného obrázka + generovanie kópie WebP/AVIF (stabilnejšie)

• Výhody: Jednoduchšie sa vrátiť späť v prípade problémov s kompatibilitou
• Náklady: spotreba disku sa zvýši (pôvodný obrázok + nový formát + viacnásobne zväčšené miniatúry)

Režim 2: Nahradenie a vymazanie pôvodného obrázka (agresívnejší)

• Výhody: disky sa nerozširujú tak rýchlo; odkazy na stanice prechádzajú priamo na nový formát
• Riziko: “meníte aktíva + meníte odkazy”, čo predražuje riešenie problémov s kompatibilitou (najmä ak niektoré externé systémy alebo logika témy závisia od pôvodného názvu/cesty/formátu súboru).

Typické úskalia formátu Plus WebP alebo AVIF

1. Po nahradení celej knižnice sa niektoré obrázky stránok zobrazujú abnormálne.
   Dôvodom zvyčajne nie je to, že obrázok je “pokazený”, ale že niektoré spojenie v reťazci nahrádzania adresy URL, ukladania do vyrovnávacej pamäte, politiky miniatúr atď. nie je správne.
2. Čím väčší je počet miniatúr, tým väčší je rozsah zmeny
   WordPress generuje viacero veľkostí pri nahrávaní obrázku; témy/pluginy môžu pridať aj ďalšie veľkosti. Úplné nahradenie znamená, že môžete zmeniť veľmi veľkú zbierku súborov.
3. Samotná migrácia formátu nemusí nevyhnutne znamenať, že zväzok je vždy najmenší.
   WebP/AVIF sú vo všeobecnosti menšie, ale “stratégia veľkosti” a “stratégia kompresie” sú stále rozhodujúce. Nepovažujte formát Plus WebP za “o jedno kliknutie rýchlejší”.

---

3.1.2 EWWW Image Optimizer: predstaviteľ voľnej lokálnej kompresie

Stránka so zásuvnými modulmi EWWW je veľmi dobre umiestnená:

• Na serveri ho môžete optimalizovať pomocou rôznych nástrojov (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp atď.)
• Ak potrebujete vyššiu kompresiu alebo väčšiu úsporu CPU, môžete spracovanie náročné na CPU preniesť na jeho server (voliteľné).

Aká by mala byť úloha EWWW na trase A?

Ak používate formát Plus WebP ako “stratégiu migrácie/náhrady formátu”, potom je vhodnejší formát EWWW:

• Kompresia a optimalizácia objemu(najmä zníženie hmotnosti surových zdrojov, ako sú JPG/PNG)
• Dávková optimalizácia knižnice historických médií(zameranie na “zníženie objemu” namiesto “nahradenia URL”)

Typická jama EWWW

1. Zvýšené zaťaženie servera počas dávkovej optimalizácie
   Pretože lokálna kompresia spotrebuje CPU/IO, riešením nie je “nepoužívajte ju”, ale “dávka, nízka špička, možnosť offloadu/cloudu v prípade potreby”.
2. “WebP je generovaný” neznamená, že frontend musí vytvárať WebP.
   Mnohé zásuvné moduly trpia týmto nedorozumením: generovanie je jedna vec, stratégie doručovania (prepisovanie, obrázkové značky, zásahy do vyrovnávacej pamäte atď.) sú druhá vec.
3. Opakované vykonávanie rovnakej činnosti s inými zásuvnými modulmi
   Ak zvolíte cestu A, snažte sa neprekrývať kompresiu typu ShortPixel/Imagify/TinyPNG; ak zvolíte cestu B, nezapínajte logiku náhrady Plus WebP. Základný princíp:Jedna cesta k cieľu.

---

3.2 Trasa B: Trojitá voľba cloudovej kompresie (ShortPixel / Imagify / TinyPNG)

Táto cesta je vhodná pre ľudí, ktorí “chcú ušetriť prostriedky servera, chcú robiť dávky s menším úsilím a akceptovať fakturáciu za kredit/objem”.
Najzavádzajúcejší bod o kompresii cloudu však je:Bezplatné kredity nie sú také jednoduché ako “bezplatné listy”!.. Počet veľkostí miniatúr, generovanie alebo negenerovanie formátu WebP/AVIF a opakované pretláčanie môžu výrazne ovplyvniť spotrebu.

V nasledujúcom texte sa dozviete, čo sa deje v prípade bezplatných a spoplatnených stránok, ako sa odpočítavajú kredity, do akých nástrah sa dá najčastejšie šliapnuť a aké typy stránok sú vhodné.

---

3.2.1 ShortPixel100 bezplatných kreditov/mesiac, ale kredity sa spotrebúvajú na miniatúry a zväčšeniny WebP/AVIF.

Čo sa deje s bezplatným/plateným

V popise doplnku ShortPixel sa jasne uvádza:

• 100 bezplatných kreditov mesačne
• K dispozícii sú aj “Extra neobmedzené mesačné kredity” (na stránke zásuvného modulu sú uvedené informácie o príslušných cenách)
• K dispozícii aj ako “jednorazové balíky kreditov, ktorých platnosť nikdy nekončí” (s informáciami o počiatočnej cene)

Tip:

• Zadarmo: poskytnite určité množstvo kreditov mesačne na ľahké stránky alebo testovanie
• Jednorazové balenia: vhodné pre stránky s veľkými knižnicami médií, ktoré chcú naraz vyčistiť svoje zásoby (kúpite raz a spotrebujete, zvyčajne nevyprší ich platnosť).
• Mesačne/neobmedzene: vhodné pre stránky s priebežne aktualizovanými obrázkami a dlhodobou stabilnou optimalizáciou

Oficiálna KB spoločnosti ShortPixel tiež poskytla aktualizáciu “Jednorazový balík vs. neobmedzený mesačný balík”.explicitné vysvetlenie: Neobmedzená mesačná platba je mesačná (alebo ročná) platba, ktorá ponúka neobmedzený počet kreditov s pevne stanoveným prídelom CDN; jednorazové kredity, ktorých platnosť nevyprší, čo vám dáva väčšiu kontrolu nad používaním na požiadanie.

Záver: ako sa vypočítavajú kredity ShortPixel?

Oficiálna dokumentácia ShortPixel KB to povedala veľmi otvorene:

• WordPress pri nahrávaní obrázka generuje viacero miniatúr;
• Každá optimalizácia miniatúry sa počíta ako kredit；
• Ak sa rozhodnete vygenerovať formát WebP alebo AVIF.Každá verzia WebP/AVIF pôvodného obrázka a miniatúry spotrebuje ďalší kredit.；
• Niektoré miniatúry môžete z optimalizácie vylúčiť, aby sa znížila spotreba kreditov.

Príklad kreditov：

Povedzme, že nahráte 1 obrázok a téma/plugin vygeneruje 8 miniatúr:

• Optimalizujte iba originálny obrázok + miniatúry: 1 (originál) + 8 (miniatúry) = 9 kreditov
• Ak chcete generovať aj WebP/AVIF: ešte jedna verzia novej generácie pre každú z vyššie uvedených 9 → +9 kreditov.
  Inými slovami, to, čo považujete za “1 obrázok”, môže v skutočnosti spotrebovať takmer “dvojciferné kredity”.

Takže:“100 kreditov zadarmo” nie je to isté ako “100 obrázkov zadarmo”.

Najčastejšie nástrahy aplikácie ShortPixel

1. Bezplatných 100 kreditov sa rýchlo minie
   Hlavná príčina: veľa miniatúr + extra kredity za generovanie WebP/AVIF.
   návrh：

• Najskôr vyhodnoťte počet miniatúr stránok
• Vylúčte nepotrebné veľkosti miniatúr (optimalizujte len veľkosti, ktoré sa budú skutočne používať)
• Určite stratégiu kompresie pred hromadným spustením, aby ste sa vyhli opakovanej spotrebe metódou pokus-omyl.

2. Súčasné stohovanie iných zásuvných modulov konvertora
   Ak máte náhrady Plus WebP a ShortPixel generujúci/vkladajúci značky novej generácie, logika sa hromadí a je ťažšie riešiť problémy. Pri ceste B nechajte ShortPixel, aby to robil sám.
3. Myslel som si, že ak ho nainštalujem, bude to “WebP/AVIF v popredí”.”
   Stránka zásuvného modulu ShortPixelSpomenul, že konvertuje WebP/AVIF a dokáže pridávať obrázky novej generácie na titulnú stránku (napr. pomocou označovania).
   Napriek tomu je však dôležité overiť výsledky aj po tomto úkone.

---

3.2.2 ImagifyZadarmo: 20MB/mesiac; kvóta sa odpočítava podľa “veľkosti pôvodného obrázka + počtu miniatúr”, opakované odpočítanie pri veľkom nápore.

Voľné množstvo a umiestnenie

Oficiálna cenová stránka ImagifyPísmo je jasné:Bezplatný účet Mesačná kvóta 20MB。
Na stránke zásuvného modulu je tiež jasne uvedené, že dokáže komprimovať, meniť veľkosť a konvertovať súbory WebP/AVIF.

Ako sa odpočítava kvóta?

Oficiálna dokumentácia Imagify “V časti ”Ako sa vypočítava využitie kvóty?" je mechanizmus odpočítavania veľmi jasne popísaný:

• Počet miniatúr ovplyvňuje spotrebuAk máte napríklad 10 veľkostí miniatúr, optimalizáciou 1 obrázka sa optimalizuje 11 obrázkov (originál + 10 miniatúr), ktoré všetky prispievajú k spotrebe kvóty.
• Odpočítanie kvóty podľa veľkosti pôvodného dokumentu: Ak napríklad odošlete do služby Imagify obrázok s veľkosťou 100 kB, z kvóty sa odpočíta 100 kB.
• Zmena úrovne kompresie a opätovná optimalizácia opäť spotrebuje kvótu。
• Ten istý kľúč API možno použiť pre viacero lokalít, ale kvóty sa medzi nimi zdieľajú.

Toto je “základný spôsob chápania” spoločnosti Imagify:
Je to skôr ako dopravný balíček: odpočíta toľko, koľko pošlete; čím viac miniatúr máte, tým viac odpočíta; a odpočítanie sa opakuje, ak ho opakovane stlačíte.

Prehľadný príklad kvóty Imagify

Povedzme, že nahráte originálny obrázok s veľkosťou 800 KB a stránka vygeneruje 8 miniatúr.

• Imagify optimalizuje tak, aby zahŕňal “pôvodný obrázok + 8 miniatúr” (ak sa rozhodnete optimalizovať všetky), čo znamená, že táto jediná akcia spotrebuje kvótu blízku “pôvodnej veľkosti všetkých týchto súborov spolu”.
  Preto majú niektoré stránky pocit, že “20MB sa rýchlo vyčerpá”: nie je to tým, že Imagify nestačí, ale tým, že nahrávate príliš veľa obrázkov naraz, príliš veľa miniatúr a pravdepodobne stále skúšate úrovne kompresie.

Najčastejšie nástrahy služby Imagify

1. Bezplatne 20MB Nestačí na vykonanie “úplnej inventúry histórie lokality”
   20MB je zvyčajne vhodnejší na testovanie s ľahkými aktualizáciami; ak je vaša knižnica médií už veľká, jednorazové prečistenie si pravdepodobne vyžiada aktualizáciu.
2. Opakované nastavenie úrovní kompresie vedie k zdvojeniu spotreby kvót
   Spoločnosť Imagify jasne uvádza, žeOpätovná optimalizácia opäť spotrebuje kvótu.
   Navrhujem, aby ste na tejto stránke objasnili “stratégiu”:

• Začnite s malým počtom obrázkov, aby ste určili úroveň kompresie a vzhľad.
• Určite stratégiu a potom ju spustite hromadne
  Vyhnite sa opakovaným pokusom a omylom v úplnej knižnici

3. Zdieľanie kľúča API viacerými lokalitami vedie k “nevysvetliteľnému zníženiu kvóty”.”
   Ak používate rovnaký kľúč API pre viac ako jednu stanicu, kvóta sa zdieľa.
   V tímových scenároch/ scenároch s viacerými stanicami je preto najlepšie mať jasno: ktoré stanice sú spoločné a ktoré sa používajú individuálne, aby sa predišlo nekontrolovateľným rozpočtom.

---

3.2.3 TinyPNG(Tiny Compress Images): bezplatných 500 kreditov/mesiac; pri prechode na WebP/AVIF sa “odpočíta 1 kredit navyše za každú veľkosť”.”

Bezplatné kredity a ich fakturačné nápady

Stránka doplnku WordPress TinyPNG je veľmi prehľadná:

• 500 kreditov mesačne zadarmo
• V časti “Všeobecná inštalácia WordPress” môžete pravdepodobne komprimovať Približne 100 obrázkov/mesiac
• Ak je však povolená konverzia AVIF alebo WebP:Každá veľkosť obrázka spotrebuje ďalší kreditPravdepodobne sa teda dá iba komprimovať a konvertovať Približne 50 obrázkov/mesiac(v závislosti od toho, koľko veľkostí miniatúr máte).

Medzitým spoločnosť Tinify (vývojári TinyPNG/TinyJPG) tiež Stránka s cenami APIPopis: Zaregistrujte sa a získajte 500 bezplatných kompresií mesačne; potom vám budú účtované podľa počtu úspešných kompresií, bez povinného predplatného.

Zhrňte spôsob, akým je TinyPNG chápaný v jednej vete:
Počíta kredity; čím viac veľkostí miniatúr máte a čím viac WebP/AVIF máte zapnutých, tým rýchlejšie sa kredity spotrebujú.

Ľahko čitateľné príklady kreditov TinyPNG

Predpokladajme, že vaša stránka generuje 8 veľkostí miniatúr pre každý obrázok:

• Iba kompresia: originál + 8 miniatúr → vyžaduje sa 9 kreditov
• Ak je zapnutá konverzia WebP/AVIF: jeden kredit navyše za veľkosť → pravdepodobne takmer dvojnásobok!
  To zodpovedá popisu na stránke doplnku: po zapnutí sa bezplatná suma zmení z približne “100 kariet/mesiac” na “50 kariet/mesiac”.

Najčastejšie nástrahy TinyPNG

1. Myslel som, že 500 kreditov = 500 obrázkov
   Nie je. Spotrebuje sa podľa “veľkosti/varianty obrazu”. Stránka zásuvného modulu jasne upozorňuje, že “konverzie odpočítajú dodatočný 1 kredit za každú veľkosť obrázka”.
2. Témy/e-commerce pluginy generujú príliš veľa veľkostí a voľné kredity výrazne klesajú
   Čím viac veľkostí existuje, tým ľahšie sa kredity zväčšujú a spotrebúvajú.
3. Po zapnutí konverzie zistíte, že kredity sú zrazu nevyužité.
   Nie je to chyba, je to jej fakturačný mechanizmus.
   Strategické poradenstvo:

• Ak sa bezplatná fáza používa hlavne na kompresiu a zníženie hmotnosti, môžete začať len s kompresiou a potom zapnúť konverziu, keď si budete istí, že štruktúra vášho webu je stabilná a naozaj potrebujete next-gen.

4. Odporúčanie čiastkového scenára: ako vybrať rôzne typy lokalít

Aj WordPress, obsahové stránky, stránky elektronického obchodu, portfóliá a členské stránky nemajú rovnaké “tlakové body” pre obrázky.

4.1 Obsahové stránky/blogy (veľa grafických článkov, stredná frekvencia aktualizácií)

Prioritné odporúčania:

1. Stratégia určovania veľkosti (krok 1)
2. Kompresia (krok 2)
3. WebP (krok 3)

Vhodnejšia cesta:

• Chcete uložiť: Trasa B Trojitý výber (ShortPixel / Imagify / TinyPNG)
• Ak chcete ísť zadarmo: Trasa A (Plus WebP + EWWW), ale odporúča sa začať s “konzervatívnym režimom (bez odstránenia pôvodného obrázka)”, aby ste posúdili riziko.

Typická jama:

• Prvý obrázok na stránke článku je veľmi veľký, nesprávna stratégia lenivého načítaniaSpomalenie prvej obrazovky

4.2 Elektronický obchod/produktová stránka (veľa miniatúr, veľa variantov obrázkov, stabilita na prvom mieste)

E-obchod je s najväčšou pravdepodobnosťou problém nie je “kompresný účinok nie je dobrý”, ale “optimalizované niektoré veľkosti nie je v poriadku, chýbajúce miniatúry, predné komponenty nemôžu dostať obrázok”.

Prioritné odporúčania:

1. Stabilita na prvom mieste: konzervatívna stratégia kompresie, nevykonávajte hneď úplnú výmenu knižnice
2. Vyhodnotenie veľkosti miniatúr: témy elektronického obchodu zvyčajne generujú viac veľkostí a spotreba sa zväčší (obzvlášť viditeľné sú ShortPixel/TinyPNG)
3. Validácia v malom meradle pred šaržou (veľmi dôležité)

Vhodnejšia cesta:

• Trasa B býva bezproblémovejšia: ShortPixel/Imagify/TinyPNG môžu byť dávkové a je veľmi dôležité, aby ste rozumeli mechanizmu kvót a vopred posúdili náklady.
• Trasa A je v poriadku, ale buďte opatrnejší pri správaní Plus WebP “prepísať ID/vymazať pôvodné obrázky/nahradiť URL”: ide o migráciu aktív a neodporúča sa nahradiť celú vec hneď na začiatku.

4.3 Portfólio/fotografická stanica (citlivé na kvalitu jednotlivých obrázkov, veľké obrázky, vysoké nároky na zobrazenie)

Prioritné odporúčania:

1. Stratégia veľkosti (ovládanie plochy displeja)
2. Stratégia kompresie (lepšie je byť väčší ako rozdrviť detaily)
3. WebP/AVIF (zisky z veľkej scény sú zrejmé, ale overte si zobrazenie)

Vhodnejšia cesta:

• Imagify: Odpočítajte kvótu podľa “veľkosti pôvodného obrázka”, tento druh stránky je jednoduchšie urobiť “rozpočet kontrolovateľný” (viete, koľko odpočítať za každý veľký obrázok), ale vyhnúť sa opakovaným represiám.
• ShortPixel: Ak veľkosť miniatúry nie je veľká, kredity sú tiež veľmi intuitívne; ale ak generujete veľa veľkostí +next-gen, spotreba kreditov sa zväčší a musíte plánovať dopredu.

5. Porovnanie kvót a fakturácie: z pohľadu “zadarmo je málo”

Ktorá z nich je výhodnejšia a ako dlho bude bezplatná?

5.1 Tri modely spätného účtovania

• ShortPixel(kredity): Kredity na základe “pôvodného obrázka + počtu miniatúr”; ďalšie kredity sa odpočítajú za každú zodpovedajúcu verziu WebP/AVIF.
• Imagify(kvóta MB): Odpočítajte kvótu podľa “pôvodnej veľkosti súboru”; čím viac miniatúr, tým viac odpočtov; opätovným stlačením sa odpočítajú znova.
• TinyPNG(kredity): 500 kreditov mesačne; povolenie konverzie WebP/AVIF odpočíta ďalšie kredity za každú veľkosť obrázka.

5.2 Metódy rýchleho odhadu

Môžete to odhadnúť takto:

1. Nájdite náhodný “pôvodný obrázok, ktorý často nahrávate” a zistite, aký je veľký (napr. 300KB / 1MB / 3MB).
2. V závislosti od toho, koľko veľkostí miniatúr vaša stránka generuje (napr. 5 / 10 / 20)
3. Rozhodnite sa, či chcete generovať WebP/AVIF (áno/nie)

Potom použite nasledujúcu “mentálnu matematiku”, aby ste pochopili spotrebu:

• ShortPixel: ≈ (1 + počet miniatúr) kreditov na obrázok; ak sa generuje WebP/AVIF, ≈ sa opäť zdvojnásobí (keďže verzia novej generácie si tiež berie kredit)
• Imagify: Každý obrázok ≈ (pôvodná veľkosť + každá veľkosť miniatúry) odpočíta kvótu; zmena úrovne kompresie a opätovná kompresia opäť odpočíta kvótu.
• TinyPNG: 500 kreditov zadarmo; ak vaša stránka generuje veľa veľkostí na obrázok a je povolená konverzia, počet kreditov zadarmo výrazne klesne (stránka pluginu poskytuje vizuálne očakávanie “~100 kreditov/mesiac” vs. “~50 kreditov/mesiac”)

6. Upozornenia na riziká

Riziko 1: Nedovoľte viacerým zásuvným modulom robiť stále to isté

Je to najčastejší “zdroj katastrofy”.”

• Trasa A:Plus WebP alebo AVIF + EWWW(Rozdeľte si prácu medzi tieto dve činnosti, nevykonávajte podobné konverzie a dodávky súčasne alebo nainštalujte len jednu z nich)
• Trasa B: ShortPixel / Imagify / TinyPNG vyberte tri(vyberte jeden pre kompresiu a next-gen)

Riziko 2: Plus WebP “Prepísať ID / Odstrániť pôvodný obrázok / Nahradiť URL” je migrácia aktív.

Zvýraznenie pridané:Plus WebP V popise sa jasne uvádza, že úplné generovanie prepíše pôvodné ID obrázka, odstráni pôvodný súbor a nahradí obsah URL.
To znamená, že nejde o “malé nastavenie, ktoré možno kedykoľvek stiahnuť”, ale o zmenu na úrovni aktív.

Odporúčaná stratégia by mala byť:

• Najprv malý test (niekoľko desiatok až niekoľko stoviek)
• Skontrolujte, či správne funguje zobrazenie na prednej strane, miniatúry a aktualizácie vyrovnávacej pamäte.
• Prehodnotiť úplné spracovanie knižnice

Riziko 3: Skutočná spotreba “voľných kreditov” kompresie cloudu závisí od počtu miniatúr a výberu novej generácie.

• ShortPixel: Miniatúry a next-gen výrazne ovplyvňujú kredity.
• TinyPNG: Ak zapnete WebP/AVIF, odpočíta sa dodatočný kredit za každú veľkosť obrázka.
• Imagify: odpočítané podľa veľkosti pôvodného obrázka, čím viac miniatúr odpočítaných viac, veľký tlak sa bude opakovať odpočítanie!

Riziko 4: “WebP/AVIF generovaný” neznamená “WebP/AVIF je dodávaný front office”

Mnohí ľudia majú po konverzii pocit, že “nie sú rýchlejší”, pretože frontend stále vytvára JPG/PNG (caching/prepisovanie/označovanie/vyjednávanie s prehliadačom atď. nie sú v súlade).

7. Ako overiť, či sa po vykonaní úpravy stala účinnou

4 veľmi jednoduché body validácie:

1. Či sa tá istá stránka obnoví druhýkrát a načíta sa konzistentnejšie a rýchlejšie(ukladanie do vyrovnávacej pamäte a optimalizácia fyzického zmyslu, či funguje)
2. Či sa veľkosti obrázkov načítaných na mobilných telefónoch a stolových počítačoch výrazne líšia(citlivý) srcset/sizes (či fungujú alebo nie)
3. Kontrola niekoľkých grafov: či sú prítomné súbory/zdroje WebP alebo AVIF(Je stránka skutočne používa nová generácia）
4. Ukážka niekoľkých obrázkov: priblížte ich a zistite, či nie sú viditeľne zašumené, či je text rozmazaný.(stlačená hmotnosť nie je nadmerná)

Ak sa všetky štyri z nich zhodujú, zvolená trasa bola vykonaná. Nasleduje. CDN “Dodávacia vrstva”, bude celkovo stabilnejší.

8. Odporúčania pre opatrenia

1. Najprv si vyberte trasu:

• Snažíme sa byť čo najslobodnejší.: Plus WebP alebo AVIF + EWWW (alebo len jeden z nich)
• Chcete ušetriť prostriedky servera, platte podľa výšky viac znepokojujúce: ShortPixel / Imagify / TinyPNG - vyberte si!

2. Najprv urobte malý test (niekoľko desiatok)
3. Pred dávkou sa uistite, že je v poriadku
4. Je potrebné ďalšie zlepšenie stability dodávok:prečítajte si CDN Zrýchlenie

bežné problémy

1. Koľko zásuvných modulov musím nainštalovať? Môžem ich nainštalovať všetky?

Snažte sa ísť len jednou cestou.

• Trasa A: Plus WebP alebo AVIF + EWWWW Image Optimizer (alebo len jeden z nich)
• Trasa B: ShortPixel / Imagify / TinyPNG - vyberte si jednu!
  V tej istej stanici súčasne nechajte viac ako jeden plug-in vykonať “kompresiu / prenos WebP / AVIF / zmenu URL / prepísanie dodávky”, s najväčšou pravdepodobnosťou sa dostane viac a viac chaotické, ale aj najťažšie kontrolovať.

2. Nepodporuje WordPress už WebP/AVIF? Potrebujem ešte nejaký doplnok?

Je potrebné ho oddeliť:
“Podpora nahrávania/používania” ≠ “Automatická konverzia/automatické doručenie”.
WordPress 6.5 tiež automaticky nekonvertuje staré súbory JPG/PNG na súbory WebP/AVIF a nerobí automaticky celú vec “exportovať AVIF/WebP do prehliadača, ktorý je schopný a spätný chod” za vás. Na sprevádzkovanie historickej knižnice médií je zvyčajne potrebný zásuvný modul alebo služba.

3. Aký je “najvýnosnejší” krok pri optimalizácii obrazu?

Zvyčajne je to Najskôr správne nastavte “veľkosti” (srcset/sizes).。
Mnohé stránky sú pomalé nie preto, že nemajú kompresiu, ale preto, že stránka má iba 900px a používateľ má stiahnuť obrázok s rozlohou 3000px. Kompresia šetrí kB, ale “nesprávna veľkosť” spôsobí, že stiahnete niekoľkokrát viac dát zbytočne.

4. Ako si môžem byť istý, že načítavam “menší” a nie pôvodný obrázok navždy?

Pozrite sa na dva javy:

• Pri otvorení stránky v mobilnom telefóne je veľkosť stiahnutého obrázka výrazne menšia ako na počítači.
• Rovnaký obrázok sa na rôznych zariadeniach načíta s rôznymi veľkosťami zdrojov
  Ak je pôvodný obrázok stiahnutý navždy, častým dôvodom je, že téma/staviteľ považuje obrázok za obrázok na pozadí CSS alebo vlastný výstup a obchádza viacnásobnú veľkosť knižnice médií pomocou srcset.

5. Znamená “WebP/AVIF generated”, že frontend musí vytvárať WebP/AVIF?

Nie sú rovnaké.
Generovanie je len “súborová vrstva”; to, či frontend skutočne dodá WebP/AVIF, závisí od prepisov, zásad označovania obrázkov, zásahov do vyrovnávacej pamäte, platných rokovaní prehliadača atď. Po dokončení nezabudnite “na mieste skontrolovať niekoľko obrázkov na typy zdrojov”.

6. Plus Čo je také nebezpečné na WebP alebo AVIF? Môžem spustiť celú knižnicu jedným kliknutím?

Jeho rizikovým bodom nie je “kompresia”, aleZmeny v úrovni migrácie aktív：

• Úplné generovanie môže prepísať pôvodné ID súboru obrázka, odstrániť pôvodný súbor a nahradiť adresu URL v obsahu.
  dôvod, prečoNeodporúča sa nahradiť celú knižnicu hneď na začiatku: Pred zvážením úplného spracovania knižnice vykonajte test v malom rozsahu (desiatky až stovky) + majte k dispozícii zálohy.

7. Aký je výber medzi dvoma režimami Plus WebP: zachovať pôvodný obrázok vs. nahradiť a odstrániť pôvodný obrázok?

Jednoduché na pochopenie:

• Režim 1: Zachovanie pôvodného obrázka + generovanie kópie WebP/AVIF (stabilnejšie): Pohodlné pre spätné obnovenie, ale disk sa zväčší (pôvodný obrázok + nový formát + viacnásobné miniatúry).
• Režim 2: Nahradenie a vymazanie pôvodného obrázka (agresívnejší): Disky sú menej náchylné na rozrastanie, ale “meníte aktíva + meníte referencie”, čo predražuje riešenie problémov s kompatibilitou.
  Čím je stránka zložitejšia (elektronický obchod/viacero doplnkov/viacero veľkostí), tým viac sa odporúča začať so stabilnejším modelom.

8. Je bezplatná lokálna kompresia programu EWWW Image Optimizer dostatočná? Nezaťaží to server?

EWWW je skôr “miestny kompresor”: konzumuje CPU/IO.
Počas dávkovej optimalizácie bežne dochádza k nárastu zaťaženia, čo neznamená, že “nefunguje”, ale skôr to, že stratégia by mala byť správna: dávka, nízke špičky a v prípade potreby možnosti offloadingu/cloudu.
Ak hľadáte úspory alebo ak nemáte dostatok zdrojov na serveri, trasa B je vhodnejšia pre server.

9. ShortPixel je 100 kreditov mesačne zadarmo, prečo mám pocit, že je to preč v niekoľkých obrázkoch?

z dôvodu kreditov nie je “počet obrázkov”.”Next-gen sa zväčší o miniatúru s next-gen:

• Pôvodný obrázok + každá miniatúra sa počíta ako kredit
• Ak sa vygeneruje WebP/AVIF, za každú zodpovedajúcu verziu sa spotrebuje dodatočný kredit.
  Takže to, čo považujete za “1 obrázok”, môže v skutočnosti spotrebovať takmer “2-miestne kredity”.

10. Imagify je zadarmo 20MB/mesiac, prečo sa tiež rýchlo vyčerpá?

Imagify je skôr “dopravný balík”:

• Ako ste ju poslali.Pôvodná veľkosť súboruodpočet kvót
• Čím viac miniatúr máte, tým viac spotrebujete
• Zmena úrovne kompresie na opätovnú optimalizáciu opäť spotrebuje kvótu
• Rovnaký kľúč API pre viacero lokalít, zdieľanie kvót
  Takže “20MB čoskoro dôjde” je často spôsobené príliš veľkými obrázkami, príliš veľkým počtom miniatúr alebo opakovaným pokusom a omylom.

11. TinyPNG je zadarmo za 500 kreditov/mesiac, prečo plugin hovorí, že je to len asi 100 kreditov/mesiac a potom 50 kreditov/mesiac s WebP/AVIF?

Pretože kredity TinyPNG sa tiež zväčšujú podľa “size/variant”:

• Bežná inštalácia WordPress pravdepodobne komprimuje približne 100 listov/mesiac.
• Povolenie konverzie AVIF alebo WebP:Každá veľkosť obrázka spotrebuje ďalší kreditTakže pravdepodobne môžete komprimovať a konvertovať len približne 50 obrázkov mesačne (v závislosti od počtu veľkostí miniatúr).
  Takže 500 kreditov ≠ 500 obrázkov.

12. Koľko miniatúr je na mojej stránke? Prečo na tom tak veľmi záleží?

WordPress generuje viacero veľkostí pri nahrávaní obrázku; témy/pluginy (najmä e-commerce) môžu pridať ďalšie veľkosti.
Kredity/kvóty kompresie cloudu sú zvyčajne “originál + miniatúry spolu”, takže čím viac miniatúr máte, tým menej voľných kreditov musíte použiť.

13. Je lenivé načítanie vždy rýchlejšie? Prečo niektorí ľudia tvrdia, že lenivé načítanie spomaľuje?

Lenivé načítanie je vhodné pre “zdroje mimo obrazovky”.
Ak je prvá obrazovka najkritickejšieho veľkého obrázka tiež oneskorené načítanie, môže spomaliť zážitok z prvej obrazovky. WordPress 5.5 od predvoleného lenivého načítania je v poriadku, ale nie je “jedna veľkosť vhodná pre všetkých”.

14. Cestujem na trase A alebo B. Kedy potrebujem CDN / obrázok CDN?

Problém “menších súborov, ktoré sa zmestia”, sa rieši kompresiou, určením veľkosti a formátovaním;
CDN rieši problém poskytovania bližších a stabilnejších。
Ak sú obrázky ťahané zo vzdialenosti od zdrojového webu, čo má za následok výrazné oneskorenie, potom bude doplnenie CDN/obrázkov pomocou CDN (napr. Cloudflare Polish / Jetpack Site Accelerator) celkovo stabilnejšie, čítajte WordPress CDN Zrýchlenie。

15. Akým spôsobom si môžem najjednoduchšie overiť, že “to naozaj funguje”, keď som hotový?

Časovo najefektívnejšia metóda overovania:

• Či sa tá istá stránka obnoví druhýkrát a načíta sa konzistentnejšie a rýchlejšie
• Sú veľkosti obrázkov načítaných na mobilných telefónoch a stolných počítačoch výrazne odlišné (či do hry vstupuje srcset/sizes)
• Kontrola niekoľkých grafov: či sú prítomné súbory/zdroje WebP alebo AVIF
• Ukážka niekoľkých obrázkov: priblížte ich a zistite, či nie sú viditeľne zašumené, či je text rozmazaný.