Optimalizace obrázků na webových stránkách

Optimalizace obrázků je jedním z nejvíce “odměňujících” aspektů výkonu WordPressu: pokud jsou velikost, rozměry, formátování a doručení obrázků správné, načítání se při stejné struktuře stránky a tématu okamžitě zlepší.

Optimalizace obrázků je však také nejjednodušší způsob, jak udělat nepořádek, ne proto, že by byla technicky příliš náročná, ale proto, že informace jsou příliš roztříštěné:
Přečtete si pár článků, víte, že “komprese”, “WebP/AVIF”, “líné načítání”, a pak se podívejte na úvod pluginu a řekl “zdarma každý měsíc! 100 kreditů měsíčně”, “zdarma 20MB”, “1 kredit za obrázek”, ale čím víc čtu, tím víc jsem zmatený -... Je to dost zdarma? Jak odečíst poplatek? Nepochopili jste špatně “to samé”? A hlavně:Začalo to skutečně platit poté, co jste to udělali, nebo ne?

Tento článek se zabývá pouze třemi věcmi:

1. Poskytnout spustitelný souborplán (také obr.)(Co udělat jako první, co udělat jako druhé)
2. Ujasněte si, pro jakou možnost se rozhodnete (jaký je rozdíl mezi bezplatnou a placenou službou a pro koho je každá z nich vhodná).
3. Napište si dopředu nejčastější úskalí (abyste nemuseli po dokončení hledat, jak je vyřešit).

1. Podtrženo, sečteno: Co WordPress obsahuje a co ne

Pokud nejprve nezjistíte, co už jádro WordPressu umí, snadno uděláte jednu ze dvou věcí:

• Místo toho, abyste využívali “volnou kapacitu”, kterou byste měli využívat, utrácíte čas/platíte peníze za stavbu kola znovu a znovu.
• Myslel jsem, že WordPress “automaticky převede všechny staré obrázky do formátu WebP/AVIF”, ale ukázalo se, že ne!

Jádro WordPressu má tyto klíčové funkce zabudované:

• Responzivní obrázky (srcset/sizes): Od verze WordPress 4.4 bude jádro vypisovat obrázky pro srcset 与 sizes, a využívá více velikostí obrázků vytvořených během nahrávání, aby prohlížeč mohl vybrat vhodnější zdroj pro načtení podle podmínek obrazovky.
• Nativní líné načítání: WordPress od verze 5.5 umožňuje ve výchozím nastavení nativní líné načítání obrázků pomocí standardů HTML. loading implementace atributu.
• Podpora nahrávání WebP: Od verze WordPress 5.8 můžete nahrávat a používat WebP jako JPEG/PNG (za předpokladu, že vaše hostingové prostředí podporuje WebP).
• Podpora nahrávání souborů AVIF: Od verze WordPress 6.5 můžete nahrávat a používat AVIF jako JPEG/PNG (závisí také na podpoře hostingu).

Ale dávejte pozor:
“Podpora nahrávání/používání” ≠ “Automatická konverze/automatické doručení”.
To znamená, že i když již používáte WP 6.5, tyto soubory JPG/PNG ve vaší knihovně médií se samy od sebe nezmění na WebP/AVIF; nezískáte automaticky plný odkaz “výstup AVIF/WebP podle možností prohlížeče a návrat k původnímu obrázku pro nepodporované prohlížeče”! --tuto část je obvykle třeba opravit pomocí zásuvného modulu nebo služby.

2. Plán: Optimalizace obrazu v 5 krocích

Co dělat, proč, co dělat, abyste se kvalifikovali, a co je typický pit.

2.1 Nejdříve správná “velikost” (nejpřehlíženější, ale nejpřínosnější)

Mnoho stanic je pomalých ne proto, že by nebyla provedena komprese, ale proto.Stažený velký obrázek, který výrazně přesahuje oblast zobrazení.：
Pokud je například stránka ve skutečnosti široká pouze 900px a vy požádáte návštěvníka, aby stáhl původní obrázek o velikosti 3000px, prohlížeč ho prostě “stáhne a pak zmenší”. Tím se plýtvá šířkou pásma, prodlužuje se doba dekódování a zpomaluje se první obrazovka.

WordPress 4.4+Mechanismus citlivých obrázků（srcset/sizes) je určen právě k řešení tohoto problému.

Udělejte to, co se počítá jako průchod:

• Při otevření stránky na mobilním telefonu by měla být velikost staženého obrázku výrazně menší než na stolním počítači.
• Stejný obrázek se na různých zařízeních načítá s různými velikostmi zdrojů (místo toho, aby se vždy stahoval původní obrázek).

Nejčastější úskalí:

• Existují témata/programy, které s diagramy nakládají jako s obrázky na pozadí CSS nebo je zobrazují vlastním způsobem, který může obejít funkci. srcsetVýsledkem je velký obraz
• Můžete používat externě propojené obrazové lože, obrazové bloky třetích stran a také obejít systém více velikostí generovaný knihovnou médií.

---

2.2 Komprese (snižte počet KB, ale “nezničte” kvalitu)

Podstatou komprese není “čím menší, tím lepší”, ale “rozdíl je pouhým okem sotva viditelný, ale pokles objemu je zřejmý”.

Pravidla jsou následující:

• Fotografie/živé záběry (lidé, produkty, krajina): Prioritní ztrátová komprese (maximální zisk)
• Snímky obrazovky rozhraní / obrázky s velkým množstvím textu: Komprese by měla být konzervativnější, aby nedocházelo k rozmazávání textu.
• Logo/ikona: Priorita SVG nebo diskrétní bezeztrátové (ztrátové lze snadno vkládat na okraje)

Udělejte to, co se počítá jako průchod:

• Výrazné zmenšení velikosti obrázků na většině stránek
• Žádný viditelný šum, zašuměné okraje, přerušení barevných bloků, rozmazaný text

---

2.3 WebP / AVIF (strategie formátu: menší pro stejné rozlišení)

WordPress již podporuje nahrávání WebP (5,8) vs. AVIF (6,5)。
Aby však formát nové generace skutečně fungoval, je obvykle třeba vyřešit dvě věci:

1. Jak dávkově konvertovat historické knihovny médií(V opačném případě optimalizujete pouze pro “nové obrázky nahrané později”).
2. Zda se má vygenerovat kopie nebo nahradit původní obrázek.(Jedná se o riskantní úsek; na funkci “Nahradit a odstranit původní obrázek” v aplikaci Plus WebP se zaměříme později.)

Doporučený styl psaní:

• WebP: obecně preferovaný jako výchozí (stabilnější kompatibilita)
• AVIF: další směr komprese, vhodný pro velké obrázky/velké obrázky na první obrazovce/obrázky v albu (ale víceZávislost na podpoře životního prostředí）

---

2.4 Líné načítání by mělo být používáno správně (není univerzální).

WordPress od verze 5.5Výchozí líné načítáníObrázek.
Snižuje využití šířky pásma při počátečním vykreslování:

• Líné načítání pro “zdroje mimo obrazovku”
• Nejkritičtější velký obrázek na první obrazovce (a v mnoha případech klíčový obrázek na první obrazovce) je často nevhodný pro zpožděné načítání.

---

2.5 Úroveň doručení: CDN / obrázek CDN

Problém “menších souborů, které se vejdou” řeší komprese, úprava velikosti a formátování.
Pokud se ale obrázky stále načítají vzdáleně ze zdrojového serveru, latence sítě bude mít na uživatelský dojem stále znatelný vliv. V takovém případě je potřeba řešení na úrovni doručování (CDN / obrázek CDN).

Dva typické směry:

• Cloudflare Polština：Dokumentace CloudflareJsou představeny polské kompresní metody (bezeztrátová/ztrátová/WebP) a je zmíněno, že komprese pomocí format=auto Formát WebP/AVIF je povolen.
• Urychlovač stránek Jetpack：Dokumentace k aplikaci JetpackVysvětlete, že bude optimalizovat obrázky a distribuovat je prostřednictvím své sítě spolu se statickými zdroji.

Optimalizace obrázků je zodpovědná za jejich zmenšení a vhodnost.CDN zajišťuje bližší a spolehlivější doručení

3. Výběr: pouze dvě hlavní trasy

Nejčastějším selháním při optimalizaci obrázků není “žádný zásuvný modul”, ale příliš mnoho zásuvných modulů, které vedou k duplicitnímu zpracování:
A komprimuje, B komprimuje, A převádí do WebP/AVIF, B převádí, A mění adresy URL, B přepisuje - ani nelze říct, co se ve stanici děje.

Pravidla:

Existuje pouze jedna cesta: buď všechny tři zdarma lokálně, nebo cloudová komprese.

• Trasa A (všechny místní linky zdarma):Plus WebP nebo AVIF + EWWW Image Optimizer(nebo jen jeden)
• Trasa B (trojitá možnost komprese cloudu):ShortPixel / Imagify / TinyPNG

---

3.1 Trasa A: Úplně zdarma místní (plus WebP nebo AVIF nebo EWWW)

Tato trasa se vyznačuje:

• Nespoléháte se na kompresní služby třetích stran “za měsíc/za list” (i když některé funkce mohou být nabízeny jako volitelné služby).
• Cena je: dávkové zpracování může více zatěžovat server CPU/IO, takže je potřeba více řešit “strategie a rizika”

3.1.1 Plus WebP nebo AVIF: jádrem je “generování/nahrazování”, nejedná se o tradiční “kompresní nástroj”.”

• Při generování celoplošných snímků:ID původního souboru obrázku je přepsáno souborem WebP/AVIF, původní soubor je odstraněn a adresa URL v obsahu je nahrazena.。
• Zásuvný modul poskytuje příkazy WP-CLI a připomíná: WP-CLI je spolehlivější, když existuje mnoho souborů.

To znamená, že namísto “tichého generování WebP pro vás” by to mohlo být.Migrace aktiv(Zejména pokud zapnete možnost “Nahradit a odstranit původní obrázek”).

Rozdíly mezi oběma modely

Režim 1: Zachování původního obrázku + vytvoření kopie WebP/AVIF (stabilnější)

• Výhody: Snadnější návrat v případě problémů s kompatibilitou
• Náklady: Spotřeba disku se zvýší (původní obrázek + nový formát + náhledy ve více velikostech).

Režim 2: Nahrazení a odstranění původního obrázku (agresivnější)

• Výhody: disky se nerozšiřují tak rychle; odkazy na stanice přechází přímo na nový formát.
• Riziko: “měníte aktiva + měníte odkazy”, což prodražuje řešení problémů s kompatibilitou (zejména pokud některé externí systémy nebo logika tématu závisí na původním názvu souboru/cestě/formátu).

Typická úskalí formátu Plus WebP nebo AVIF

1. Po nahrazení celé knihovny se některé obrázky stránek zobrazují nestandardně.
   Důvodem obvykle není to, že je obrázek “rozbitý”, ale to, že některý článek v řetězci nahrazování adres URL, ukládání do mezipaměti, zásad miniatur atd. není správný.
2. Čím větší je počet miniatur, tím větší je rozsah změny.
   WordPress generuje více velikostí pro nahrání obrázku; témata/pluginy mohou také přidávat další velikosti. Úplné nahrazení znamená, že můžete měnit velmi rozsáhlou kolekci souborů.
3. Samotné provedení migrace formátu nemusí nutně znamenat, že svazek je vždy nejmenší.
   WebP/AVIF jsou obecně menší, ale “strategie velikosti” a “strategie komprese” jsou stále rozhodující. Nepřemýšlejte o WebP Plus jako o “rychlejším na jedno kliknutí”.

---

3.1.2 EWWW Image Optimizer: zástupce volné místní komprese

Stránka zásuvného modulu EWWW je velmi dobře umístěna:

• Na serveru jej lze optimalizovat pomocí řady nástrojů (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp atd.).
• Pokud potřebujete vyšší kompresi nebo větší úsporu CPU, můžete také přenést zpracování náročné na CPU na jeho server (volitelné).

Jaká by měla být role EWWW v trase A?

Pokud používáte Plus WebP jako “strategii migrace/nahrazení formátu”, pak je EWWW vhodnější:

• Komprese a optimalizace objemu(zejména snížení hmotnosti surových zdrojů, jako je JPG/PNG).
• Dávková optimalizace knihovny historických médií(zaměřené na “snížení objemu” spíše než na “nahrazení URL”)

Typická jáma EWWW

1. Zvýšené zatížení serveru při dávkové optimalizaci
   Protože lokální komprese spotřebovává CPU/IO. Řešení není “nepoužívat”, ale “po dávkách, mimo špičku a v případě potřeby zvolit offload/cloudové řešení”.
2. “WebP je generován” neznamená, že frontend musí vytvářet WebP.
   Mnoho zásuvných modulů trpí tímto nedorozuměním: generování je jedna věc, strategie doručování (přepisování, obrázkové značky, zásahy do mezipaměti atd.) jsou věc druhá.
3. Dělání stejné věci stále dokola s jinými zásuvnými moduly
   Pokud zvolíte cestu A, snažte se nepřekrývat kompresi mraků typu ShortPixel/Imagify/TinyPNG; pokud zvolíte cestu B, nezapínejte logiku nahrazení Plus WebP. Základní princip:Jedna cesta k cíli.

---

3.2 Trasa B: Trojí volba cloudové komprese (ShortPixel / Imagify / TinyPNG)

Tato cesta je vhodná pro lidi, kteří “chtějí ušetřit prostředky serveru, chtějí provádět dávkové zpracování s menším úsilím a přijímají účtování za kredit/objem”.
Nejvíce zavádějícím bodem komprese v cloudu je však:Volné kredity nejsou tak jednoduché jako “volné listy”!.. Počet velikostí miniatur, generování či negenerování formátu WebP/AVIF a opakované přetlačování mohou významně ovlivnit spotřebu.

V následujícím textu se dozvíte, jak je to s poplatky a zdarma, jak se odečítají kredity, na jaké nástrahy nejčastěji narazíte a jaké typy stránek jsou vhodné.

---

3.2.1 ShortPixel100 kreditů měsíčně zdarma, ale kredity se spotřebovávají na náhledy a zvětšeniny WebP/AVIF.

Co se děje s volným/placeným

Popis pluginu ShortPixel jasně uvádí:

• 100 kreditů měsíčně zdarma
• K dispozici jsou také “Extra neomezené měsíční kredity” (na stránce pluginu jsou uvedeny informace o příslušných cenách).
• K dispozici také jako “balíčky jednorázových kreditů, které nikdy nevyprší” (s informacemi o počáteční ceně).

Tip:

• Zdarma: poskytněte určité množství kreditů měsíčně pro lehké stránky nebo testování.
• Jednorázové balíčky: vhodné pro weby s velkými knihovnami médií, které chtějí najednou vyčistit své zásoby (koupíte jednou a spotřebujete, obvykle nevyprší jejich platnost).
• Měsíčně/neomezeně: vhodné pro stránky s průběžně aktualizovanými obrázky a dlouhodobou stabilní optimalizací.

Oficiální KB společnosti ShortPixel také poskytla aktualizaci “Jednorázový balíček vs. neomezený měsíční”.výslovné vysvětlení: Unlimited Monthly je měsíční (nebo roční) platba, která nabízí neomezený počet kreditů s pevným přídělem CDN; jednorázové kredity, které nevyprší, což vám dává větší kontrolu nad jejich použitím podle potřeby.

Závěr: jak se vypočítávají kredity ShortPixel?

Oficiální dokumentace ShortPixel KB byla velmi neomalená:

• WordPress při nahrávání obrázku generuje několik miniatur;
• Každá optimalizace miniatury se počítá jako kredit.；
• Pokud se rozhodnete vygenerovat formát WebP nebo AVIF.Každá verze WebP/AVIF původního obrázku a miniatury spotřebuje další kredit.；
• Některé miniatury můžete z optimalizace vyloučit, abyste snížili spotřebu kreditů.

Příklad kreditů：

Řekněme, že nahrajete 1 obrázek a téma/plugin vygeneruje 8 miniatur:

• Optimalizujte pouze originální obrázek + náhledy: 1 (originál) + 8 (náhledy) = 9 kreditů.
• Pokud chcete také generovat WebP/AVIF: jedna další verze nové generace pro každou z výše uvedených 9 → +9 kreditů.
  Jinými slovy, to, co považujete za “1 obrázek”, může ve skutečnosti spotřebovat téměř “dvoumístné kredity”.

Takže:“100 kreditů zdarma” není totéž co “100 obrázků zdarma”.

Nejčastější úskalí aplikace ShortPixel

1. 100 kreditů zdarma rychle dojde
   Hlavní příčina: spousta miniatur + kredity navíc za generování WebP/AVIF.
   návrh：

• Nejprve vyhodnoťte počet miniatur stránek
• Vyloučení nepotřebných velikostí miniatur (optimalizujte pouze velikosti, které budou skutečně použity).
• Před hromadným spuštěním určete strategii komprese, abyste se vyhnuli opakované spotřebě metodou pokus-omyl.

2. Současné stohování dalších zásuvných modulů konvertoru
   Pokud máte náhrady Plus WebP a ShortPixel generující/vkládající značky nové generace, logika se hromadí a je obtížnější řešit problémy. Pro cestu B nechte ShortPixel, ať to udělá sám.
3. Myslel jsem, že když to nainstaluji, bude to “WebP/AVIF v popředí”.”
   Stránka pluginu ShortPixelZmínil, že převádí WebP/AVIF a umí přidávat obrázky nové generace na titulní stránku (např. pomocí tagů).
   Přesto je důležité výsledky ověřit.

---

3.2.2 ImagifyZdarma: 20MB/měsíc; kvóta se odečítá podle “velikosti původního obrázku + počtu miniatur”, opakované odpočty se provádějí za opětovné vylisování.

Volné množství a umístění

Oficiální cenová stránka ImagifyPísmo je jasné:Bezplatný účet Měsíční kvóta 20MB。
Na stránce zásuvného modulu je také jasně uvedeno, že umí komprimovat, měnit velikost a převádět soubory WebP/AVIF.

Jak se odečítá kvóta?

Oficiální dokumentace Imagify “Jak se vypočítává využití kvóty?” velmi přehledně popisuje mechanismus odečtu:

• Počet miniatur ovlivňuje spotřebuNapříklad pokud máte 10 velikostí miniatur, optimalizací 1 obrázku se optimalizuje 11 obrázků (originál + 10 miniatur), které všechny přispívají ke spotřebě kvóty.
• Odpočet kvóty podle velikosti originálu dokumentu: Pokud například odešlete do služby Imagify obrázek o velikosti 100 KB, z kvóty se odečte 100 KB.
• Změna úrovně komprese a opětovná optimalizace opět spotřebuje kvótu.。
• Stejný klíč API lze použít pro více webů, ale kvóty se mezi nimi sdílejí.

To je “základní způsob chápání” společnosti Imagify:
Je to spíše jako dopravní balíček: odečítá tolik, kolik odešlete; čím více miniatur máte, tím více se odečítá; a pokud opakovaně stisknete tlačítko, odečítání se opakuje.

Přehledný příklad kvóty Imagify

Řekněme, že nahrajete originální obrázek o velikosti 800 KB a web vygeneruje 8 náhledů.

• Imagify optimalizuje tak, aby zahrnoval “původní obrázek + 8 miniatur” (pokud se rozhodnete optimalizovat všechny), což znamená, že tato jediná akce spotřebuje kvótu blízkou “původní velikosti všech těchto souborů dohromady”.
  To je důvod, proč se na některých webech zdá, že se “20MB rychle vyčerpá”: nejde o to, že by Imagify nestačilo, ale o to, že při každém nahrání jsou obrázky příliš velké, vytváří se příliš mnoho náhledů a možná také opakovaně zkoušíte různé úrovně komprese.

Nejčastější úskalí Imagify

1. Zdarma 20MB Nestačí na provedení “úplné inventarizace historie webu”
   20MB je obvykle vhodnější pro testování s nenáročnými aktualizacemi; pokud je vaše knihovna médií již rozsáhlá, jednorázové pročištění bude pravděpodobně vyžadovat aktualizaci.
2. Opakovaná úprava úrovní komprese vede k duplicitnímu čerpání kvót.
   Společnost Imagify jasně uvádí, žeOpětovnou optimalizací se kvóta opět spotřebuje.
   Navrhuji, abyste na této stránce objasnili “strategii”:

• Začněte s malým počtem obrázků, abyste zjistili úroveň komprese a vzhled.
• Určete strategii a poté ji hromadně spusťte.
  Vyhněte se opakovaným pokusům a omylům v celé knihovně.

3. Sdílení klíče API více webů vede k “nevysvětlitelnému snížení kvóty”.”
   Pokud používáte stejný klíč API pro více stanic, kvóta je sdílená.
   V případě týmových scénářů nebo scénářů s více stanicemi je proto nejlepší mít jasno: které stanice jsou sdílené a které se používají samostatně, aby se předešlo nekontrolovatelným rozpočtům.

---

3.2.3 TinyPNG(Tiny Compress Images): zdarma 500 kreditů/měsíc; při přechodu na WebP/AVIF se “odečte 1 kredit za velikost”.”

Volné kredity a jejich vyúčtování

Stránka pluginu TinyPNG pro WordPress je velmi přehledná:

• 500 kreditů měsíčně zdarma
• V části “Obecná instalace WordPressu” můžete pravděpodobně komprimovat Přibližně 100 snímků/měsíc
• Pokud je však povolena konverze AVIF nebo WebP:Každá velikost obrázku spotřebuje další kreditPravděpodobně je tedy možné jej pouze komprimovat a převádět Přibližně 50 snímků/měsíc(podle toho, kolik velikostí miniatur máte k dispozici).

Mezitím společnost Tinify (vývojáři TinyPNG/TinyJPG) také vytvořila své Stránka s cenami APIPopis: Zaregistrujte se a získejte 500 kompresí měsíčně zdarma; poté vám bude účtováno podle počtu úspěšných kompresí, bez povinného předplatného.

Shrňte způsob, jakým je TinyPNG chápán, v jedné větě:
Počítá kredity; čím více velikostí miniatur máte a čím více WebP/AVIF máte zapnuto, tím rychleji se kredity spotřebovávají.

Snadno čitelné příklady kreditů TinyPNG

Předpokládejme, že váš web generuje 8 velikostí miniatur pro každý obrázek:

• Pouze komprese: originál + 8 náhledů → požadováno 9 kreditů
• Pokud je zapnuta konverze WebP/AVIF: jeden kredit navíc za velikost → pravděpodobně téměř dvojnásobek!
  To odpovídá popisu na stránce pluginu: po zapnutí se bezplatná částka změní z přibližně “100 karet/měsíc” na “50 karet/měsíc”.

Nejčastější úskalí TinyPNG

1. Myšleno 500 kreditů = 500 obrázků
   Není. Spotřebovává se podle “velikosti/varianty obrázku”. Stránka zásuvného modulu jasně upozorňuje, že “Konverze odečítají další 1 kredit za každou velikost obrázku”.
2. Motivy/e-commerce pluginy generují příliš mnoho velikostí a volné kredity výrazně klesají.
   Čím více velikostí existuje, tím snadněji se kredity škálují a spotřebovávají.
3. Po povolení konverze zjistíte, že kredity jsou najednou nevyužité.
   Nejde o chybu, ale o mechanismus účtování.
   Strategické rady:

• Pokud je bezplatná fáze používána hlavně pro kompresi a snížení hmotnosti, můžete začít pouze s kompresí a poté zapnout konverzi, až si budete jisti, že struktura vašeho webu je stabilní a opravdu potřebujete next-gen.

4. Doporučení dílčího scénáře: jak vybrat různé typy lokalit

Také WordPress, stránky s obsahem, stránky elektronických obchodů, portfolia a členské stránky nemají stejné “tlakové body” pro obrázky.

4.1 Obsahové stránky/blogy (hodně grafických článků, střední frekvence aktualizací)

Prioritní doporučení:

1. Strategie dimenzování (krok 1)
2. Komprese (krok 2)
3. WebP (krok 3)

Vhodnější cesta:

• Chcete uložit: Trasa B Trojitý výběr (ShortPixel / Imagify / TinyPNG)
• Pokud chcete jít zdarma: Trasa A (Plus WebP + EWWW), ale doporučuje se začít s “konzervativním režimem (bez odstranění původního obrázku)”, abyste posoudili riziko.

Typická jáma:

• První obrázek na stránce článku je velmi velký, nevhodná strategie líného načítáníZpomaluje první obrazovku

4.2 E-commerce/produktové stránky (mnoho miniatur, mnoho variant obrázků, stabilita na prvním místě)

E-commerce je s největší pravděpodobností problém není “kompresní účinek není dobrý”, ale “optimalizované některé z velikosti není v pořádku, chybí miniatury, přední komponenty nelze získat obrázek”.

Prioritní doporučení:

1. Stabilita na prvním místě: konzervativní strategie komprese, neprovádějte ihned úplnou výměnu knihovny.
2. Vyhodnocování velikostí miniatur: témata pro e-commerce obvykle generují více velikostí a spotřeba se zvětšuje (zvláště patrné je to u ShortPixel/TinyPNG).
3. Proveďte validaci v malém měřítku před šarží (velmi důležité).

Vhodnější cesta:

• Cesta B bývá bezproblémovější: ShortPixel/Imagify/TinyPNG mohou všechny dávkovat a je důležité, abyste pochopili mechanismus kvót a předem posoudili náklady.
• Trasa A je v pořádku, ale buďte opatrnější s chováním Plus WebP “přepsat ID/vymazat původní obrázky/nahradit adresy URL”: jedná se o migraci aktiv a nedoporučuje se nahrazovat celou věc hned od začátku.

4.3 Portfolio/fotografická stanice (citlivé na kvalitu jednotlivých snímků, velké snímky, vysoké nároky na prohlížení)

Prioritní doporučení:

1. Strategie velikosti (ovládání plochy displeje)
2. Strategie komprese (lepší je být větší než rozdrtit detaily)
3. WebP/AVIF (zisky z velkého obrazu jsou zřejmé, ale ověřte si zobrazení)

Vhodnější cesta:

• Imagify: Odečtěte kvótu podle “velikosti původního obrázku”, tento druh stránek je jednodušší udělat “rozpočet kontrolovatelný” (víte, kolik odečíst za každý velký obrázek), ale vyhnout se opakovaným represím.
• ShortPixel: Pokud velikost miniatur není velká, jsou kredity také velmi intuitivní; pokud však generujete mnoho velikostí +next-gen, spotřeba kreditů se zvětší a je třeba plánovat dopředu.

5. Srovnání kvót a vyúčtování: z pohledu “zdarma je málo”

Který z nich je výhodnější a jak dlouho vydrží zdarma?

5.1 Tři modely zpětného účtování

• ShortPixel(kredity): Kredity na základě “původního obrázku + počtu náhledů”; další kredity budou odečteny za každou odpovídající vygenerovanou verzi WebP/AVIF.
• Imagify(Kvóta MB): Odečtení kvóty podle “původní velikosti souboru”; čím více miniatur, tím více odečtení; opětovné stisknutí se opět odečte.
• TinyPNG(kredity): 500 kreditů za měsíc; zapnutí převodu WebP/AVIF odečítá další kredity za každou velikost obrázku.

5.2 Metody rychlého odhadu

Můžete to odhadnout takto:

1. Najděte libovolný často nahrávaný originální obrázek a podívejte se, jak je přibližně velký (např. 300 KB / 1MB / 3MB)
2. V závislosti na tom, kolik velikostí miniatur váš web generuje (např. 5 / 10 / 20).
3. Rozhodněte, zda chcete generovat WebP/AVIF (ano/ne)

Pak použijte následující “mentální matematiku”, abyste pochopili spotřebu:

• ShortPixel: ≈ (1 + počet miniatur) kreditů na obrázek; pokud generujete WebP/AVIF, ≈ se opět zdvojnásobí (protože verze nové generace si také bere kredit).
• Imagify: Každý obrázek ≈ (původní velikost + velikost každé miniatury) odečte kvótu; změna úrovně komprese a opětovná komprese opět odečte kvótu.
• TinyPNG: 500 kreditů zdarma; pokud váš web generuje hodně velikostí na obrázek a je povolena konverze, počet kreditů zdarma výrazně klesne (stránka pluginu uvádí vizuální očekávání “~100 kreditů/měsíc” vs. “~50 kreditů/měsíc”)

6. Upozornění na rizika

Riziko 1: Nedovolte, aby více zásuvných modulů dělalo stále to samé.

Je to nejčastější “zdroj katastrofy”.”

• Trasa A:Plus WebP nebo AVIF + EWWWW(Rozdělte práci mezi obě zařízení, neprovádějte konverze a dodávky najednou nebo nainstalujte pouze jedno z nich.)
• Trasa B: ShortPixel / Imagify / TinyPNG vyberte tři(vyberte jeden pro kompresi a next-gen)

Riziko 2: Navíc funkce WebP “Přepsat ID / Odstranit původní obrázek / Nahradit adresu URL” představuje migraci aktiv.

Zdůraznění přidáno:Plus WebP V popisu je jasně uvedeno, že úplné generování přepíše původní ID obrázku, odstraní původní soubor a nahradí adresu URL obsahu.
To znamená, že se nejedná o “malé nastavení, které lze kdykoli stáhnout”, ale o změnu na úrovni aktiv.

Navrhovaná strategie by měla být následující:

• Nejprve malý test (několik desítek až několik stovek)
• Ověřte, zda správně funguje zobrazování frontendu, náhledů a aktualizace mezipaměti.
• Znovu zvažte úplné zpracování knihovny

Riziko 3: Skutečná spotřeba “volných kreditů” pro kompresi v cloudu závisí na počtu miniatur a výběru nové generace.

• ShortPixel: Miniatury a next-gen výrazně ovlivňují kredity.
• TinyPNG: Povolením WebP/AVIF se odečte další kredit za každou velikost obrázku.
• Imagify: odečteno podle velikosti původního obrázku, čím více miniatur odečteno více, velký tlak bude opakovat odečet!

Riziko 4: “WebP/AVIF generován” neznamená “WebP/AVIF je dodáván front office”.”

Mnoho lidí má po konverzi pocit, že “není rychlejší”, protože frontend stále vypisuje JPG/PNG (cachování/přepisování/označování/jednání s prohlížečem nejsou na správném místě).

7. Jak ověřit, že po provedení nabyla účinnosti?

4 velmi jednoduché validační body:

1. Zda se stejná stránka obnoví podruhé a načítá se konzistentněji a rychleji.(ukládání do mezipaměti a optimalizace fyzického smyslu fungování)
2. Liší se výrazně velikosti obrázků načítaných na mobilních telefonech a stolních počítačích?(citlivý) srcset/sizes (ať už fungují, nebo ne)
3. Namátková kontrola několika obrázků: zda jsou přítomny soubory/zdroje WebP nebo AVIF.(Používá web skutečně nová generace）
4. Ukázka několika obrázků: přiblížte si je a zjistěte, zda nejsou viditelně zašuměné, zda je text rozmazaný.(stlačená hmotnost není nadměrná)

Pokud se všechny tyto čtyři údaje shodují, zvolená trasa byla provedena. Další na řadě. CDN “Dodací vrstva”, bude celkově stabilnější.

8. Doporučení pro opatření

1. Nejprve si vyberte trasu:

• Snažíme se být co nejsvobodnější.: Plus WebP nebo AVIF + EWWW (nebo jen jeden z nich)
• Chcete ušetřit prostředky serveru, plaťte za kredit a získejte větší klid.: ShortPixel / Imagify / TinyPNG - vyberte si!

2. Nejprve proveďte malý test (několik desítek).
3. Před dávkováním se ujistěte, že je v pořádku.
4. Je třeba dále zlepšit stabilitu dodávek:Přečtěte si CDN Zrychlení

běžné problémy

1. Kolik zásuvných modulů musím nainstalovat? Mohu je nainstalovat všechny?

Zkuste zvolit pouze jednu trasu.

• Trasa A: Plus WebP nebo AVIF + EWWW Image Optimizer (nebo jen jeden z nich)
• Trasa B: ShortPixel / Imagify / TinyPNG - vyberte si!
  Ve stejné stanici současně nechat více než jeden plug-in dělat “komprese / přenos WebP / AVIF / změna URL / doručení přepsat”, nejpravděpodobnější, aby se více a více chaotické, ale také nejobtížněji kontrolovat.

2. Nepodporuje již WordPress WebP/AVIF? Potřebuji ještě nějaký zásuvný modul?

Je třeba ji oddělit:
“Podpora nahrávání/používání” ≠ “Automatická konverze/automatické doručení”.
WordPress 6.5 také automaticky nekonvertuje staré soubory JPG/PNG do formátu WebP/AVIF, ani za vás automaticky neprovádí celý proces “exportu AVIF/WebP do prohlížeče a zpětného kopírování”. Obvykle je potřeba zásuvný modul nebo služba, která to vynahradí, a je dobré přimět historické knihovny médií, aby následovaly tento příklad.

3. Jaký je “nejpřínosnější” krok při optimalizaci obrazu?

Obvykle je to Nejdříve správně nastavte “velikosti” (srcset/sizes).。
Mnoho webů je pomalých ne proto, že nemají kompresi, ale proto, že stránka má pouze 900px a uživatel má stáhnout obrázek o velikosti 3000px. Komprese šetří kB, ale “špatná velikost” způsobí, že se stáhne několikanásobně více dat zbytečně.

4. Jak si mohu být jistý, že načítám “menší” a ne původní obrázek navždy?

Podívejte se na dva jevy:

• Při otevření stránky na mobilním telefonu je velikost staženého obrázku výrazně menší než na stolním počítači.
• Stejný obrázek se na různých zařízeních načítá s různými velikostmi prostředků
  Pokud je původní obrázek stažen navždy, je častým důvodem to, že šablona nebo nástroj pro tvorbu motivu s obrázkem zachází jako s obrázkem na pozadí CSS nebo vlastním výstupem a obchází knihovnu médií, která pomocí srcset umožňuje nastavení více velikostí.

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

Nejsou si rovny.
Generování je pouze “souborová vrstva”; to, zda frontend skutečně poskytuje WebP/AVIF, závisí na přepisech, zásadách označování obrázků, zásazích do mezipaměti, platném vyjednávání prohlížeče atd. Až budete hotovi, nezapomeňte “namátkově zkontrolovat několik obrázků na typy zdrojů”.

6. Plus Co je na WebP nebo AVIF tak nebezpečného? Lze spustit celou knihovnu jedním kliknutím?

Jejím rizikovým bodem není “komprese”, nýbržZměny v úrovni migrace aktiv：

• Úplné generování může přepsat ID původního souboru obrázku, odstranit původní soubor a nahradit adresu URL v obsahu.
  důvod, pročNedoporučuje se nahrazovat celou knihovnu hned od začátku.: Nejprve testujte v malém měřítku (desítky ~ stovky) + mějte k dispozici zálohy, poté zvažte zpracování celé knihovny.

7. Jaká je volba mezi dvěma režimy Plus WebP: zachovat původní obrázek vs. nahradit a odstranit původní obrázek?

Jednoduché na pochopení:

• Režim 1: Zachování původního obrázku + vytvoření kopie WebP/AVIF (stabilnější): Pohodlné pro zpětné kopírování, ale disk se zvětší (původní obrázek + nový formát + náhledy o více velikostech).
• Režim 2: Nahrazení a odstranění původního obrázku (agresivnější): Disky jsou méně náchylné k nafouknutí, ale “měníte aktiva + měníte reference”, což prodražuje řešení problémů s kompatibilitou.
  Čím složitější je web (elektronický obchod/více doplňků/více velikostí), tím více se doporučuje začít se stabilnějším modelem.

8. Postačuje bezplatná lokální komprese programu EWWW Image Optimizer? Zahltí server?

EWWW je spíš “místní kompresní dělník”: spotřebuje CPU/IO។
Je běžné, že během dávkové optimalizace dochází k nárůstu zátěže, což neznamená, že “nefunguje”, ale spíše to, že strategie by měla být správná: dávka, nízké špičky a v případě potřeby možnosti offloadingu/cloudu.
Pokud hledáte úspory nebo máte nedostatek prostředků na serveru, je trasa B vhodnější pro server.

9. 100 kreditů zdarma/měsíc u ShortPixel, proč mám pocit, že je to pryč během pár obrázků?

na základě kredity nejsou “počet obrázků”.”Next-gen se zvětší o miniaturu s next-gen:

• Původní obrázek + každá miniatura se počítá jako kredit
• Pokud je generován formát WebP/AVIF, je za každou odpovídající verzi spotřebován další kredit.
  Takže to, co považujete za “1 obrázek”, může ve skutečnosti spotřebovat téměř “dvoumístné kredity”. shortPixel

10. Proč se i 20MB/měsíc zdarma od Imagify rychle vyčerpá?

Imagify je spíše “dopravní balíček”:

• Jak jste ji poslal.Původní velikost souboruodpočet kvót
• Čím více miniatur máte, tím více spotřebujete.
• Změna úrovně komprese na opětovnou optimalizaci opět spotřebuje kvótu.
• Stejný klíč API pro více webů, sdílení kvót
  Proto se “20MB rychle vyčerpá” často stává kvůli příliš velkým obrázkům, příliš mnoha náhledům nebo opakovanému zkoušení metodou pokus–omyl.

11. TinyPNG je zdarma za 500 kreditů/měsíc, proč plugin říká, že je to jen asi 100 kreditů/měsíc a pak 50 kreditů/měsíc s WebP/AVIF?

Protože kredity TinyPNG jsou také zvětšeny pomocí “size/variant”:

• Běžná instalace WordPressu pravděpodobně komprimuje asi 100 listů měsíčně.
• Povolte převod AVIF nebo WebP:Každá velikost obrázku spotřebuje další kreditPravděpodobně tedy můžete komprimovat a převádět jen asi 50 obrázků měsíčně (v závislosti na počtu velikostí miniatur).
  Takže 500 kreditů ≠ 500 obrázků.

12. Kolik miniatur je na mém webu? Proč na tom tolik záleží?

WordPress generuje více velikostí pro nahrání obrázku; témata/pluginy (zejména e-commerce) mohou přidávat další velikosti.
Kredity/čísla komprese v cloudu jsou obvykle “originál + miniatury dohromady”, takže čím více miniatur máte, tím méně volných kreditů můžete použít.

13. Je líné načítání vždy rychlejší? Proč někteří lidé tvrdí, že líné načítání zpomaluje?

Líné načítání je vhodné pro “zdroje mimo obrazovku”.
Pokud je první obrazovka nejkritičtějšího velkého obrázku také zpožděná, může zpomalit zážitek z první obrazovky. WordPress 5.5 od výchozího líného načítání je v pořádku, ale ne “jedna velikost pro všechny”.

14. Cestuji po trase A nebo B. Kdy potřebuji CDN / obrázek CDN?

Problém “menších souborů, které se vejdou” řeší komprese, úprava velikosti a formátování;
CDN přináší bližší a spolehlivější doručení。
Když se obrázky stahují na velkou vzdálenost z původního serveru a způsobují znatelnou latenci, je celkově stabilnější přidat ještě CDN / obrázek CDN (například Cloudflare Polish / Jetpack Site Accelerator), čtení WordPress CDN Zrychlení。

15. Jakým způsobem si mohu nejsnáze ověřit, že “to opravdu funguje”, až budu hotový?

Časově nejefektivnější metoda ověřování:

• Zda se stejná stránka obnoví podruhé a načítá se konzistentněji a rychleji.
• Jsou velikosti obrázků načítaných na mobilních telefonech a stolních počítačích výrazně odlišné (hraje roli srcset/sizes)?
• Namátková kontrola několika obrázků: zda jsou přítomny soubory/zdroje WebP nebo AVIF.
• Ukázka několika obrázků: přiblížte si je a zjistěte, zda nejsou viditelně zašuměné, zda je text rozmazaný.