Wobrazowa optimizacija je při wukonliwosći WordPressa naj“wjetše wunoškowe” naprawjenje: pola samsneje struktury strony a samsneje drasty so začitowanske dožiwjenje husto hnydom polěpši, jeli so při wobrazach wulkosć datajow, wotměry, format a wašnje dodawanja prawje zhotowja.

Ale tež optimizacija wobrazow najlošo zawinuje, zo so “čim wjace dźěła, tym wjetše změćenje” stawa, nic dokelž by technika přećežka była, ale dokelž su informacije přepřewjele rozdroblene:
Sy přečitał někotre nastawki a wěš, zo dyrbiš “komprimować”, “WebP/AVIF” a “lěne začitanje” wužiwać, potom pak zaso při předstajenju tykacow čitaš “kóždy měsac darmotnych 100 kreditow”, “darmotne 20MB”, “za kóždy wobraz 1 kredit”, a čim wjace čitaš, tym zmyljeniši sy — dosaha darmotne woprawdźe? Kak so wotličuje? Njejsy snano “tu samsnu věc” njeprawje zrozumił? A što je najwažniše:Po tym zo sy hotowy, je to na kóncu woprawdźe skutkowało?

Tutón nastawk jenož tři věcy čini:

  1. Dać wam wuwjedźomnuPlanowy přehlad(najprjedy činić, potom činić)
  2. Wujasńće jasnje, kotry plan chceće wubrać (hdźež je rozdźěl mjez darmotnym a płaćenym a komu so kotry hodźi)
  3. Najhusćiše problemy předem zapisać (zo byš po dokónčenju njetrjebał wšudźe pytać a pytać)

1. Zakład: Što WordPress sam přinjesuje, a što nje přinjesuje

如果你不先搞懂 WordPress 核心已经做了什么,很容易出现两种情况:

  • Dostupne darmotne móžnosće njejsće wužił, město toho sy čas a pjenjezy na znowatworjenje wózowego kolesa wupłaćił
  • Myslišeše sej, zo WordPress “stare wobrazy awtomatisce do WebP/AVIF konwertuje”, ale potom je so pokazało, zo tomu tak njeje

WordPress 核心已经内置了这些关键能力:

  • Responsiwne wobrazy (srcset/sizes): Wot WordPress 4.4 sem jědro za wobrazy wudawało srcset a sizesa wužiwajo při nahrawanju wutworjene wjacewulkostne wobrazy, zo by wobhladowak po wobrazowkowych wuměnjenjach přihódniši resurs za začitanje wubrał.
  • Nativne línje začitanje:WordPress 5.5 起默认对图片启用原生懒加载,使用 HTML 标准 loading Implementacija kajkosćow.
  • WebP nahraće podpěraćWot WordPress 5.8 da so WebP kaž JPEG/PNG nahrać a wužiwać (jeli hostowe wokolje WebP podpěruje).
  • 支持上传 AVIF:WordPress 6.5 起可以像 JPEG/PNG 一样上传并使用 AVIF(同样依赖主机环境支持)。

Ale kedźbu:
“Podpěra za nahraće/wužiwanje” ≠ “awtomatiska konwersija/awtomatiske přepodanje”.
To rěka: samo hdyž hižo WP 6.5 maš, so te JPG/PNG w twojej medijowej bibliotece samy do WebP/AVIF njepřetworja; a tež awtomatisce njedóstanješ dospołny rjećazk “AVIF/WebP po móžnosćach wobhladowaka wudać a za njepodpěrujace wobhladowaki so na originalny wobraz wróćo spaść” — tutón dźěl zwjetša tyka plugin abo słužba dopjelnić dyrbi.

2. 路线图:图片优化按 5 步走

Što činić, čehodla, što ma so docpěć, zo by było přihódne, a kotre su typiske zmylki.

2.1 Najprjedy “wulkosć” prawje nastajić (najlóšo so přehladuje, ale přinjesenje je najwjetše)

很多站慢并不是压缩没做,而是下载了远超显示区域的大图
Na přikład strona woprawdźe jenož 900 px šěrokosć pokazuje, ty pak daš wopytowarjam originalny wobraz z 3000 px sćahnyć, wobhladowak jenož “dosćahnje a potom pomjeńši při pokazowanju”. To marnuje šěrokopasmosć, zwjetša čas za dekodowanje a spomaluje prěni wobraz na wobrazowce.

WordPress 4.4+ 的响应式图片机制srcset/sizes) runje za to, zo by so tutón problem rozrisał.

做到什么算合格:

  • Při wočinjenju strony na mobilnym telefonje měli by sćehnjene wobrazy widźomnje mjeńše hač na desktopje լինել
  • 同一张图在不同设备上加载的资源大小不同(而不是永远下载原图)

Najhusćišo zwučene zmylki:

  • Někotre drasty/zhotowjerjo wobraz jako CSS-pozadkowy wobraz wužiwaja abo jón na swójski wašnje wudawaja, móže to wobchadźić srcset,导致一直下大图
  • Wužiwaš eksterny wobrazowy hosting a wobrazowe bloky třećich stronow, a tak móžeš system wjacorych wulkosćow, kotryž medijowa biblioteka generuje, wobchadźeć

2.2 Komprimować (KB znižić, ale kwalitu “njeznisčić”)

压缩的核心不是“越小越好”,而是“肉眼几乎看不出差异,但体积下降明显”。

规则如下:

  • foto/realne snimki (wosoby, produkty, krajiny):优先有损压缩(收益最大)
  • 界面截图/文字多的图片:压缩要更保守,避免文字发虚
  • Logo/图标Preferujće SVG abo kedźbliwje bjezstratnje (při zhubnym so hrany lochko rozmyja)

做到什么算合格:

  • 大多数页面图片体积明显下降
  • 不出现明显的噪点、糊边、色块断层、文字变糊

2.3 WebP / AVIF (formatowa strategija: při samsnej klarosći mjeńši)

WordPress hižo nahraće podpěruje WebP (5.8) a AVIF (6.5)
Ale zo bychu so “formaty přichodneje generacije” woprawdźe wužiwać, dyrbi so zwjetša dwěj věcy rozrisać:

  1. Kak so historiska medijowa biblioteka masowo konwertuje(hewak jeno jeno “nowe wobrazy, kotrež so pozdźišo nahrawaja”)
  2. Ma so kopiju wutworić abo originalny wobraz narunać(这是风险分水岭;后面会重点讲 Plus WebP 的“替换并删除原图”)

Doporučene pisanje:

  • WebP: zwjetša jako standardnje preferowany (kompatibilnosć je stabilniša)
  • AVIF: dalše komprimowanske směry, hodźi so za wulke wobrazy/prěni wobraz wobrazowki/albumowe wobrazy (ale mjeńjeWotwisnosć wot wokoliny zaležna

2.4 懒加载要用对(不要一刀切)

WordPress 5.5 起Standardne línje začitanjeWobraz.
Móže wužiwanje šěrokosće pásma při spočatnym rendrowanju znižować:

  • Lěne začitanje je přihódne za “resursy zwonka wobrazowki”
  • 首屏最关键那张大图(很多时候是首屏关键图)往往不适合被延后加载

2.5 交付层:CDN / 图片 CDN

Komprimowanje, wulkosć a format rozrěšuja “dataja je mjeńša a přihódniša”;
Ale jeli so wobrazy přeco z dalokeho zdroja sćahuja, móže syćowa latenca dožiwjenje hišće widźomnje wobwliwować. Potom trjeba so rozrěšenje “přepodawanskeje runiny” (CDN/wobrazy CDN).

Dwě typiskej směraj:

  • Cloudflare PolishCloudflare 文档介绍了 Polish 的压缩方式(无损/有损/WebP),并提到用 format=auto 允许使用 WebP/AVIF 格式。
  • Jetpack Site AcceleratorDokumentacija JetpackWujasńće, zo wobrazki optimizuje a je ze statiskimi resursami přez swoju syć rozdźěluje.

图片优化负责变小变合适,CDN 负责交付更近更稳

3. Wuběr: jenož dwaj hłownej směrajajćej lincej

Najhusćiši zmylk při optimizaciji wobrazow njeje “plugin njeje so instalował”, ale to, zo je so přewjele pluginow instalowało a to je spušćiło dwójne předźěłowanje:
A 在压缩、B 也在压缩;A 在转 WebP/AVIF、B 也在转;A 在改 URL、B 又做重写——最后你自己都说不清站里现在到底发生了什么。

Prawidła:

只走一条路线:要么全免费本地,要么云压缩三选一。

  • 路线 A(全免费本地):Plus WebP or AVIF + EWWW Image Optimizer(abo jenož jedyn z nich wubrać)
  • 路线 B(云压缩三选一):ShortPixel / Imagify / TinyPNG

3.1 Puć A: dospołnje darmotny lokalny (Plus WebP abo AVIF abo EWWW)

这条路线的特点是:

  • 你不依赖“按月额度/按张计费”的第三方压缩服务(当然有些功能也可能提供可选服务)
  • 代价是:批量处理可能更吃服务器 CPU/IO,需要你更关注“策略和风险”

3.1.1 Plus WebP or AVIF:核心是“生成/替换”,它不是传统意义的“压缩工具”

  • 生成全量图片时:原始图片文件 ID 会被 WebP/AVIF 覆盖、原始文件会被删除,内容中的 URL 也会被替换
  • 插件提供 WP-CLI 命令,并提醒:文件多时用 WP-CLI 更可靠。

To woznamjenja: to njeje “potichu jednu WebP dataju za tebje wutworić”, ale móže to być jedyn raz.资产迁移(尤其你开启“替换并删除原图”相关选项时)。

两种模式的差别

模式 1:保留原图 + 生成 WebP/AVIF 副本(更稳)

  • 优点:遇到兼容问题更容易回退
  • 代价:磁盘占用会上升(原图 + 新格式 + 多尺寸缩略图)

模式 2:替换并删除原图(更激进)

  • 优点:磁盘不会膨胀得那么快;站内引用直接变成新格式
  • 风险:你在“改资产 + 改引用”,遇到兼容问题排查成本会更高(尤其当某些外部系统或主题逻辑依赖原文件名/路径/格式)

Namjet

选择“替换并删除原图”前,先做小范围测试 + 有可用备份;不要一上来就全库替换。

Plus WebP or AVIF 的典型坑

  1. Po dospołnej narunje biblioteki so w někotrych stronach wobrazy njeprawje pokazuja
    原因通常不是“图片坏了”,而是 URL 替换、缓存、缩略图策略等链路里某环没对上。
  2. 缩略图数量越多,改动范围越大
    WordPress 上传一张图会生成多个尺寸;主题/插件还可能增加更多尺寸。全量替换意味着你可能在改动一套很庞大的文件集合。
  3. 只做格式迁移,不等于体积一定最小
    WebP/AVIF 一般更小,但“尺寸策略”和“压缩策略”仍然很关键。不要把 Plus WebP 当成“一键变快”。

3.1.2 EWWW Image Optimizer:免费本地压缩的代表

Pozicionowanje stronki tykacza EWWW je jara jasne:

  • Wone da so na wašim serwerje z rjadom nastrojow optimować (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp atd.)
  • Jeli trjebaće wyšu kompresiju abo hišće wjace CPU zalutować, móžeće tež procesy, kotrež CPU přetrjebowaja, na jeho serwer přesunyć (opcionalne).

EWWW 在路线 A 里应该承担什么角色?

如果你用 Plus WebP 做“格式迁移/替换策略”,那么 EWWW 更适合承担:

  • Komprimowanje a wulkosćowa optimizacija(zejmjena znižowanje wulkosće originalnych resursow kaž JPG/PNG)
  • Historija masoweje optimizacije medijoweje biblioteki(z “pomjeńšenjom wulkosće” jako cil, nic “URL wuměnić”)

Kedźbu mindać

Plus WebP aEWWW : 均可以转换成AVIF 或 WebP
Doporučuje so, jenož jednu z nich instalować, hewak móže to ke konfliktam wjesć

Typiske zmylki EWWW

  1. Při hromadnej optimalizaciji so serwerowe zatóženje powyši
    因为本地压缩就是吃 CPU/IO。解决思路不是“别用”,而是“分批、低峰、必要时选择卸载/云方案”。
  2. “生成了 WebP”不等于前台一定在出 WebP
    Wjele tykacow ma tutu zmylenu předstaju: generowanje je jedna wěc, a strategija wudawanja (přepisowanje, značka picture, trjech w pufrowaku atd.) je druha wěc.
  3. Z druhimi tykačemi samsne činić
    Jeli dźeš puć A, njeměł by sy, jeli móžno, hišće ShortPixel/Imagify/TinyPNG a podobne mróčne kompresowanje přidawać; jeli dźeš puć B, njewotewrjej hišće narunansku logiku Plus WebP. Hłowny princip:Jedna trasa hač do kónca.

3.2 路线 B:云压缩三选一(ShortPixel / Imagify / TinyPNG)

Tuta ruta hodźi so za tych, kotřiž chcedźa serwerowe resursy škedrić, chcedźa so bjez starosćow masowe nadawki činić a akceptuja wotměrjene/po množstwje zličowanje.
Ale najlošo zrozumliwy dypk pjenje mrowjoweje kompresije je:Darmotna kwota njeje tak prosta kaž “ličba darmotnych stronow”Ličba wulkosćow miniaturkow, hač so WebP/AVIF wutworja a hač so wobrazki zaso a zaso komprimuja, móža wužiwanje výraznje wobwliwować.

下面会说明:免费/收费怎么回事、额度怎么扣、最容易踩什么坑、适合什么站点类型。


3.2.1 ShortPixel:100 free credits/月,但 credits 会被缩略图与 WebP/AVIF 放大消耗

Darmo/płatne — wo čo dźe

Wopisanje tykacza ShortPixel jasnje pisa:

  • 100 darmotnych kreditow měsacnje
  • Tež su “přidatne njewobmjezowane měsačne kredity” (strona tykacow podawa wotpowědne informacije wo cenach)
  • Tež su “jednorazowe credits pakety, kotrež njepřepadnu” k dispoziciji (z informacijemi wo startowej płaći)

提示:

  • Dermo: kóždy měsac wěstu sumu kreditow za lochke sydła abo testowanje
  • Jednorazowy paket: přihódny za sydła z “wulkej medijowej biblioteku, kotrež chcedźa naraz wšě zasoby wužiwać” (kupi so jónu a wužije so hač do kónca, zwjetša njepřepadnje)
  • Měsačny/bez limitow: wotpowědny za sydła z trajnym aktualizowanjom wobrazow a dołhodobnej, stabilnej optimizaciju

ShortPixel 官方 KB 对“一次性包 vs 无限月度”也给了清晰解释Njezměrny měsačny plan so wobličuje měsačne (abo lětnje), poskića njezměrne kredity a ma krutu kwotu CDN; jednorazowe kredity njepřepadnu, zo byš je po potrjebje fleksibelnjeji wužiwać móhł.

Namjet

  • Stara stacija čisći składowe zapasy: jednorazowy pak ma přednosć
  • Stale so aktualizuje: přihódniši za měsac/Wobmjezowanja njeje (hdyž njepytaće credits, wubjerće wobmjezowanja njeje)

Najwažniše: kak so kredity ShortPixel liča?

ShortPixel 官方文档 KB 讲得非常直白:

  • Hdyž so we WordPressće wobraz nahraje, wutworja so wjacore miniaturki;
  • 每个缩略图的优化都会算一个 credit
  • Jeli wuběraśo napóraś WebP abo AVIF,Za kóždu originalnu wobrazowku a miniaturu so za WebP/AVIF-wersiju přidatny credit potrjeba
  • 你可以排除某些缩略图不优化以减少 credits 消耗。

credits 示例

假设你上传 1 张图片,主题/插件生成了 8 个缩略图:

  • Jenož originalny wobraz + miniaturki optiměrować: 1 (originalny wobraz) + 8 (miniaturki) = 9 kreditow
  • Jeli chceće hišće WebP/AVIF wutworić: horjeka 9 kóžde wo jednu next-gen wersiju wjace → hišće +9 kreditow
    To rěka, ty mysliš, zo “1 wobraz” je, ale woprawdźe so móže blisko “dwuměstnowych credits” spotřebować.

所以:“Darmotnych 100 kreditow” njeje runje tak kaž “darmotne 100 wobrazow”.

Najčastsće zmylki ShortPixel

  1. Darmo 100 kreditow so so bórze wupřěbowane
    Přičina: wjele miniaturkow + přidatne kredity za generowanje WebP/AVIF
    Namjet
  • Najprjedy ličbu miniaturkow sydła pohódnoćić
  • 排除不必要的缩略图尺寸(只优化真正会用到的尺寸)
  • 先确定压缩策略再批量跑,避免反复试错消耗
  1. 同时叠加别的转格式插件
    Jeli zaso zmóžniš Plus WebP-narunanje a daš ShortPixelej next-gen-znački wutworić/zasadźić, so logika nałožuje a pytanje zmylkow budźe ćešo. Warianta B da ShortPixelej wosobinsku zamołwitosć.
  2. Mysli, zo po instalaciji frontend na pewno wudawa WebP/AVIF“
    Strona tykacza ShortPixelWobsahuje přetworjenje do WebP/AVIF a móže next-gen wobrazy do front-endowych stronow přidać (na přikład přez znački).
    Ale po dokončenju dyrbi so hišće wuslědk přepruwować.

3.2.2 ImagifyDarmo 20MB/měsac; kwota so po “wulkosći originalneho wobraza + ličbje miniaturkow” wotliči, nowe komprimowanje zaso wotliči

Darmotna kwota a pozicionowanje

Oficielna cennikowa strona ImagifyJe jara jasnje napisane:Darmo konto ma kóždy měsac 20MB limit
Jeho tykanska strona tež jasnje pokazuje, zo móže komprimować, wulkosć přiměrić a do WebP/AVIF konwertować.

Kak so kwoty wotliča?

Oficialna dokumentacija Imagify “Kak so wužiwanje kwoty wobličuje?” wujasnija mechanizm wotličenja jara jasnje:

  • Ličba miniaturkow wobwliwuje spotřebuNa přikład, jeli maš 10 miniatur, optimowanje 1 wobraza budźe optimowanje 11 wobrazow (prěnjotny wobraz + 10 miniaturow), a wšitke z nich přinošuja wužiće kwoty.
  • Po originalnej datajowej wulkosći kwotu wotličić: na přikład hdyž wobraz z wulkosću 100 KB do Imagify pósćełaš, so 100 KB z kwoty wotliči.
  • Komprimowansku runinu změnić a znowa optimizować budźe znowa kwotu spotřebować
  • Jedyn API-kluč da so za wjacore sydła wužiwać, ale kwoty so mjez tutymi sydłami dźěla.

To je “zakładne rozumjenske wašnje” Imagify:
它更像流量包:你送多大,它扣多大;缩略图越多扣得越多;你反复重压会重复扣。

Jednory pśikład kvoty Imagify

假设你上传一张原图 800KB,站点生成 8 个缩略图。

  • Při optimizowanju Imagify so “originalny wobraz + 8 miniaturkow” wobliči (jeli wuběruješ optimizaciju wšěch), štož rěka, zo tuta akcija přetrjebi kwotu blisko “cyłkowneje sumy originalneje wulkosće wšěch tutych datajow”.
    To je přičina, čehodla sej někotre sydła zdadźa, zo so “20MB” spěšnje wučerpa: nic dokelž Imagify njedosaha, ale dokelž su wobrazy, kotrež kóždy raz nahrawaš, přewulke, miniaturkow je přewjele, a snano tež wospjetuješ kompresijnu runinu.

Najčěšće zmylki Imagify

  1. Darmo 20MB njedosaha za “historiju cyłeho sydła dospołnje zhašeć”
    20MB zwjetša je přihódniši za testowanje a lochke aktualizacije; jeli je waša medijowa biblioteka hižo jara wulka, je najskerje trěbne, při jónkrótnym wuprózdnjenju biblioteki system pólěpšić.
  2. Wospjetne přiměrjenje kompresijneho runja zawinjuje wjacekrótne spotřebowanje kwoty
    Jasnje rozrjadowaćZnowa optimowanje zaso kwotu spotřebuje.
    建议你在本页就把“策略”写清楚:
  • Najprjedy z małym ličbom wobrazow kompresijny schodźenk a napohlad postajić
  • Po wobkrućenju strategije znowa masowo běžeć
    Wobeńdźće so wšěm wobkedźbowanjam a zmylkam na cyłej databance
  1. 多站共用 API Key 导致配额“莫名其妙变少”
    Jeli samsny API-kluč na wjacorych sydłach wužiwaš, so kwota dźěli.
    Tohodla je w teamowych/wjacestanišćowych scenarijach najlěpje jasnje postajić: kotre sydła so zhromadnje wužiwaja a kotre sydła so jednotliwje wužiwaja, zo by so njekontrolujomne wydawki wobešły.

3.2.3 TinyPNG(Tiny Compress Images): darmo 500 kreditow/měsac; za konwertowanje do WebP/AVIF so “za kóždu wulkosć přidatnje 1 kredit wotćiha”

免费额度与它的计费思路

Strona tykacza TinyPNG za WordPress je jara jasnje napisana:

  • 500 kreditow za měsac darmo
  • W “powšitkownej instalaciji WordPress” da so přibližnje komprimować Přibližnje 100 wobrazow/měsac
  • Ale jeli so konwertowanje do AVIF abo WebP zmóžni:Kóždy wobrazowy rozměr přidatnje jeden kredit spotřebujetohodla da so najskerje jenož skomprimować a přetworić da Wokoło 50 wobrazow/měsac(wot toho wotwisa, kelko miniaturkowych wulkosćow maš).

Runjež Tinify (wuwiwar TinyPNG/TinyJPG) tež w swojim API płaćiznowa stronaPodajće jasnje: po registraciji dóstanjeće kóždy měsac 500 darmotnych kompresijow; po tym so po ličbje wuspěšnje skomprimowanych razow wobličuje, bjez přinuzeneho abonementa.

用一句话概括 TinyPNG 的理解方式:
Liče so po credits; čim wjace miniaturwulkosćow a čim wjace WebP/AVIF zmóžnjene, tym spěšnišo so credits wupřebuja.

Lohko srozumitelny přikład TinyPNG-kreditow

Předpokładajće, zo waše sydło za kóždy wobraz 8 wulkosćow miniaturkow generuje:

  • Jenož komprimować: originalny wobraz + 8 miniaturkow → trjeba 9 kreditow
  • Jeli so přetworjenja do WebP/AVIF zmóžnjene: za kóždu wulkosć so přidatnje hišće raz credit wotliči → móže so skorje podwojić
    To runjene wotpowěduje wopisanju strony tykacza: po zmóžnjenju konwertowanja so darmotna kwota přibližnje z “100 wobrazow/měsac” na “50 wobrazow/měsac” změni.

Najčastejše zmylki TinyPNG

  1. 500 kreditow = 500 wobrazow
    Njeje. Po “wobrajzkowej wulkosći/wariantje” so wotliči. Strona tykacza hižo jasnje připomina: “Přetworjenje za kóždu wobrajzkowu wulkosć přidatnje 1 kredit wotliči.”
  2. Téma/e-komercny tykac tworí přewjele rozměrow, darmotny limit je widźomnje spadnył
    Što wjace wulkosćow, tym lochšo so kredity rychleji spotřebuja.
  3. Po zmóžnjenju konwersije so limit naraz hižo tak dołho njewužiwa
    To njeje bug, to je jeho wotličenski mechanizm.
    Strategiske namjety:
  • Jeli darmotna etapa so hłownje za kompresiju a pomjeńšenje wužiwa, móžeće najprjedy jenož komprimować. Hdyž wobkrućiće, zo je struktura sydła stabilna a next-gen so woprawdźe trjeba, móžeće konwersiju zmóžnić.

4. Doporučenja po scenarijach: kak wubrać za rozdźělne typy sydłow?

Tež při WordPress su “dypkowe ćišćowe dypki” za wobsahowe sydło, e-commerce, portfolio a čłonstwowe sydło rozdźělne.

4.1 Wobsahowy sydłowy blóh (čłonki z wjele wobrazami, srjednja aktualizowanska frekwenca)

Prioritny namjet:

  1. Wulkostna strategija (Krok 1)
  2. Komprimowanje (Krok 2)
  3. WebP(Krok 3)

Lěpje wotpowědna ruta:

  • Chceće-li měć spokoj: ruta B, wubjerće jednu z tře (ShortPixel / Imagify / TinyPNG)
  • 想免费:路线 A(Plus WebP + EWWW),但建议先从“保守模式(不删除原图)”开始评估风险

典型坑:

4.2 E-commerce/produktowy sydło wjele miniaturkow, wjele wobrazowych wariantow, stabilnosć na prěnim městnje

Městno, hdźež při e-komercu najlóšo problemy wustupja, njeje “špatny kompresijny wuslědk”, ale “po optimizaciji někotre wulkosće njejsu korektne, miniaturki faluja, a front-endowe komponenty njemóža wobrazy dóstać”.

Prioritny namjet:

  1. Najprjedy stabilnje: kompresijna strategija dźiwaj so konservatiwnišo, njepočinjaj hnydom z dospołnym wuměnjenjom datoweje banki
  2. Přehlad rozměra miniatur: e-commerce-drastwy zwjetša wjace rozměrow generuja, a so limit spěšnišo minje (wosebje pola ShortPixel/TinyPNG)
  3. Najprjedy w małym wobłuku přepruwować, potom masowje (jara wažne)

Lěpje wotpowědna ruta:

  • Warianta B je zwjetša bjez starosćow: ShortPixel/Imagify/TinyPNG wšitke paketne wobdźěłanje zmóžnja, wažne je, zo rozumješ limitnemu mechanizmej a dočasnje pohladaš na kóšty
  • Ruta A tež dźe, ale z Plus WebP “přepisać ID / zhašeć originalny wobraz / URL wuměnić” trjeba wobhladniwišo wobchadźeć: to je migracija resursow, njeporadźa so hnydom wšitko naraz wuměnić.

4.3 Portfolio/fotowebsydło (wysoka narokowanja na kvalitu jednotliwych wobrazow, wulke wobrazy, wysoke naroki na wizuelny zaćišć)

Prioritny namjet:

  1. 尺寸策略(显示区域控制)
  2. Komprimowanska strategija (radšo trochu wjetša, hač detalje přewjele komprimować)
  3. WebP/AVIF (za wulke wobrazy jasnje wužitne, ale trjeba wobhlad přepruwować)

Lěpje wotpowědna ruta:

  • Imagify: po “wulkosći originalneho wobraza” so kwota wotliči, tute sydła dadźa so lochko z “kontrolujomnym budgetom” zarjadować (wěš, kak wjele so za kóždy wulki wobraz přibližnje wotliči), ale dyrbiš so wobchować wospjetowanemu znowa-kompriměrowanju.
  • ShortPixelJeli wobrazki mało wulkosćow maja, su kredity tež jasne; ale jeli wjele wulkosćow + next-gen generuješ, so wužiwanje kreditow powjetši a dyrbiš to dočasnje planować.

5. Limitowy/rozličenski přirunowanje: jasnje wujasnić, hač “darmotny” dosć je

Kotre je wjace hódne, a kak dołho darmotne wudrži?

5.1 Tři wotlićenske modele

  • ShortPixel(zasłužby)Kredity so po “wobraz originala + ličba miniaturkow” wobličene; za WebP/AVIF so za kóždu wotpowědnu wersiju přidatnje kredit wotćiha.
  • Imagify(MB kwota): po “wulkosći originalneje dataje” so kwóta wotliči; čim wjace miniaturkow, tym wjace so wotliči; znowasćisnjenje so znowa wotliči.
  • TinyPNG(zasłužby)Měsačnje 500 kredytow; zmóžnjenje konwertowanja WebP/AVIF za kóždu wobrazoju wulkosć přidatnje kredit wotliči.

5.2 快速估算方法

Móžeš to tak přeličić:

  1. Wubjerće sej někotry “original, kotryž zwjetša nahrawaće”, a hlejće, kak wulki přibližnje je (na př. 300 KB / 1MB / 3MB)
  2. Přehladnjej, kak wjele wobrazy małych napohladow twoje sydło přibližnje wutwori (na př. 5 / 10 / 20)
  3. Rozsudźće, hač chceće WebP/AVIF wutworić (haj/ně)

Potom zrozumjenje spotrěby z pomocu slědowaceho “w hłowje ličenja”:

  • ShortPixelna kóždy wobrazk ≈ (1 + ličba miniaturkow) creditow; jeli so WebP/AVIF generuje, ≈ so hišće raz zdwoji (dokelž tež next-gen wersija credit trjeba)
  • Imagify: Za kóždy wobraz ≈ (wulkosć originala + wulkosć wšěch miniaturkow) so kwota wotliči; hdyž so kompresijna runina změni a znowa komprimuje, so kwota hišće raz wotliči
  • TinyPNGDarmo 500 kreditow; jeli waša sydłowa strona za kóždy wobraz wjele wulkosćow wutworja a konwertowanje je zmóžnjene, so darmotna ličba wobrazow widźomnje znižuje (na stronje tykacza je “něhdźe 100 wobrazow/měsac” a “něhdźe 50 wobrazow/měsac” jako jasne wočakowanje)

6. Warnowanje před rizikom

Riziko 1: Njedajće wjacore tykače samsnu wěc dwójce činić

To je najhusćiši “žórło katastrofow”

  • Ruta A៖Plus WebP abo AVIF + EWWW(Wobaj stej dźěł rozdźěliłoj, njedźěłajće runočasnje samsny typ konwersije a přepodaća, abo instalujće jenož jedyn z njeju)
  • Wotřez B:ShortPixel / Imagify / TinyPNG Tři z jedneho(wubjerće jedyn za kompresiju a next-gen)

Riziko 2: “Přepisać ID / originalny wobraz zhašeć / URL wuměnić” w Plus WebP słuša k přesunjenju resursow

再次强调:Plus WebP Wopis jasnje pisa, zo so při dopołnym generowanju ID prěnjotneho wobraza přepisa, prěnjotna dataja zhaša a URL wobsaha naruna.
To woznamjenja, zo to njeje “małe nastajenje, kotrež móže so kóždy čas zaso wróćo wzjać”, ale jednorazowa změna na runinje aktiwow.

Namjetowana strategija měła być:

  • Najprjedy w małym wobłuku testować (něšto dźesatki hač stowki)
  • Wobkrućće, zo so pokazanje na stronje, miniaturki a aktualizacija pufrowaka normalnje zwobraznja.
  • Zaso wo wobdźěłanju celeje datoweje banki přemyslić

Riziko 3: woprawdźity wužiwk darmotneje kwoty za cloud-kompresiju wotwisuje wot ličby miniaturkow a wuběra next-gen

  • ShortPixel:缩略图和 next-gen 会显著影响 credits
  • TinyPNGZmóžnjenje WebP/AVIF za kóždu wulkosć wobraza přidatnje kredity strhnyje
  • Imagify: Po wulkosći originala so wotliči, čim wjace miniaturkow, tym wjace so wotliči, při znowaćišćanju so zaso wotliči

Riziko 4: “Wutworił so WebP/AVIF” njeje “front-end WebP/AVIF dodawa”

Po konwertowanju ma wjele ludźi zaćišć, zo so “nic njespěšnišo njeje” — přičina je, zo frontend hišće JPG/PNG wudawa (cache, přepisowanje, tagi, wobhladowakowe dojednanje atd. njejsu prawje zestrojene).

7. Kak po tym přepruwować, hač to skutkuje

4 jara lochke kontrolne dypki:

  1. Je začitowanje při druhim wobnowjenju teje sameje strony stabilniše a spěšniše?(začuwanje, hač składowanje a optimizacija skutkujetej)
  2. Je rozdźěl we wobrazowych wulkosćach, kotrež so na mobilnych a desktopowych nahrali, widźomnje rozdźělny?(wotmołwny srcset/sizes hač funguje)
  3. Namólnje něšto wobrazow přepruwować: hač so dataja/zdroje WebP abo AVIF pokazujaHač so sydło woprawdźe wužiwa next-gen
  4. Namjetnje kilku wobrazow skontrolujće: powjetšće je, zo byšće widźeli, hač su widźomnje rozmazane abo hač je tekst njewóstryPřekomprimowana kwalita?

Jeli tute štyri dypki wšě wotpowěduja, to woznamjenja, zo je trasa, kotruž sy wubrał, hižo běži. Potom móžeš dale činić. wrunina dodawanja“, cyłkownje budźe stabilniše.

8. Doporučenja za jednanje

  1. Najprjedy trasu wubrać:
  • Chceće po móžnosći darmotny wostać:Plus WebP abo AVIF + EWWW (abo instalujće jenož jedyn z nich)
  • Chceš serwerowe resursy zhubić a po wužiwanju płaćić, je lěpje bez starosćowShortPixel / Imagify / TinyPNG – jedne z třeje wubrać
  1. Najprjedy testować na małym wobłuku (něšto dźesać wobrazow)
  2. Pruwujće hromadnje jenož po wobkrućenju, zo je wšě w porjadku
  3. Je trjeba stabilnosć dodawki dale polěpšić:Čitać CDN spěšenje

Často stawizne pytanja

1. Kelko ty dodatkow mam přeco instalować? Móžu je wšě instalować?

Wubjerće po móžnosći jenož jednu trasu.

  • Puć A: Plus WebP abo AVIF + EWWW Image Optimizer (abo instalujće jenož jedyn z njewju)
  • Wot lědowaceho B: ShortPixel / Imagify / TinyPNG wubjerće jedneho z třećich
    Hdyž w samsnym sydle wjacore tykače naraz “komprimowanje / na WebP/AVIF přetworić / URL změnić / dodawanske přepisanje” činja, so najlóšo hišće zamota a najćešo pyta.

2. Podpěruje WordPress hižo WebP/AVIF? Trjebam hišće tykacz?

Je trjeba rozeznawać:
“Podpěra za nahraće/wužiwanje” ≠ “awtomatiska konwersija/awtomatiske přepodanje”.
WordPress 6.5 tež njebudźe stare JPG/PNG awtomatisce masowje do WebP/AVIF konwertować ani za was awtomatisce dospołnu “wudaće AVIF/WebP po schopnosći wobhladowaka z wróćospadom” realizować. Jeli chceće, zo by historiska medijowa biblioteka tež z tym krokom šła, trjeba zwjetša přidatk abo słužbu, kotrejž to dopunitej.

3. Kotre kročel je při optimizaciji wobrazow zhladny “najwjetši přinos”?

zwjetša Najprjedy “wulkosć” porjadnje nastajić (srcset/sizes)
Wjele sydłow njeje pomału dokelž njejsu komprimowane, ale dokelž strona jenož 900 px pokazuje, a wužadźuje, zo wužiwar originalny wobraz z 3000 px sćahuje. Komprimowanje móže KB zalutować, ale “wulkosć njeje prawidłowa” zawinuje, zo zbytočnje wjacore razy wjace datow sćahuješ.

4. Kak móžu wobkrućić, hač so tuchwilu “ta mjeńša wobrazowa data” začituje, a nic přeco originalny wobraz?

看两个现象:

  • Při wočinjenju strony na mobilnym telefonje je wulkosć sćehnjenych wobrazow widźomnje mjeńša hač na desktopje
  • 同一张图在不同设备加载的资源大小不同
    Jeli so prěnjotne wobrazy přeco sćahujete, zwučene přičiny su, zo šablona twari wobrazy jako CSS-pozadkowe wobrazy abo swójski wudawk, a tak medialnu biblioteku z jeje wjacorymi wulkosćemi a srcset wobchadźa.

5. “WebP/AVIF je so wutworił” rěka to, zo so na frontendźe woprawdźe WebP/AVIF wudawa?

njeje runja so】【。
生成只是“文件层”完成了;前台是否真的交付 WebP/AVIF,还取决于重写、picture 标签策略、缓存是否命中、浏览器协商是否生效等。你做完一定要“抽查几张图的资源类型”。

6. Hdźe je Plus WebP abo AVIF woprawdźe strašne? Móžu z jednym kliknjenjom běh přez cyłu biblioteku startować?

Jějeho rizikowy dypk njeje “kompresija”, aleZměny na runinje přesunjenja aktiwow

  • Při dospołnym wutworjenju móže so ID prěnjotneje wobrazoweje dataje přepisać, prěnjotna dataja zhašeć a URL we wobsahu narunać.
    TohodlaNjeporaduje so hnydom wšě w bibliotece wuměnić: Najprjedy w małym wobmjezowanym rozsahu testować (něšto dźesatki až někotre sta wobrazy) + měć wužiwajomnu zawěsćenje, potom hakle wo předźěłanju cyłeje datoweje banki rozmyslić.

7. Kak wuběrać mjez dwěmaj modusomaj Plus WebP: prěnjotni wobraz wobchować vs wuměnić a prěnjotni wobraz zhašeć?

Jednorje zrozumjene:

  • 模式 1:保留原图 + 生成 WebP/AVIF 副本(更稳): Je jednore wróćo hižo krok, ale diskowy rum rosće (originalny wobraz + nowy format + miniatury we wjacorych wulkosćach).
  • 模式 2:替换并删除原图(更激进): Tačel njewubuja so lochko, ale hdyž ty “změniš aktiwa + změniš referency”, su kóšty pytanja kompatibilnostnych problemow wyše.
    Štož sydło je komplikowaniše (e-commerce/wjele tykacow/wjele wulkosćow), tym bole so poruča započeć z stabilnišim modusom.

8. Dosaha darmotna lokalna kompresija EWWW Image Optimizer? Njebudźe server přetěžować?

EWWW je bóle kaž “lokalny kompresor”: žri CPU/IO.
Husto zda so při hromadnej optimizaciji zvyšuje zatuženje. To njewoznamjenja, zo “njeje dobre”, ale zo trjeba prawu strategiju: po dźělach, mimo špičku, a jeli trěbne, z wotćeženjom abo mróčelowym rozrisanjom.
Jeli chceš mjenje starosćow, abo su serwerowe resursy napjate, je warianta B za serwer hospodarniša.

9. Čehodla mam začuće, zo so 100 darmotnych kreditow měsačnje wot ShortPixel po jenož někotre wobrazy minje?

dokelž credits njejsu “ličba wobrazow”, budźe so miniatura a next-gen powjetšić:

  • Original + kóžda miniatura so jako credit liči
  • Jeli so WebP/AVIF generuja, so ekstra kredity za kóždu wersiju trěbne
    Tohodla sej ty mysliš, zo “1 wobraz” móže woprawdźe prawje “dwucyfričnu ličbu kreditow” płaćić. ShortPixel

10. Čehodla so tež 20MB/měsac darmotny limit Imagify tak spěšnje wučerpja?

Imagify je wjace kaž “datowy paket”៖

  • Po tym, štož sy pósłałOriginalna datajowa wulkosćOdkwotu wotličić
  • Wjace miniaturkow, tym wjetše wužywanje
  • Změnjenje stupnja kompresije znowa optimuje a zaso kwotu spotřebuje
  • Jedyn API-kluč za wjacore sydła, zhromadna kwota
    Tohodla “20MB so so bórze wučerpane” je husto zawinowane přez přewulke wobrazy, přewjele miniaturkow abo přez wospjetowane pospyty a zmylki.

11. TinyPNG darmo 500 kredity/měsac, čehodla tykač praji, zo su to přibližnje jenož 100 wobrazow/měsac, a po zmóžnjenju WebP/AVIF samo hišće 50 wobrazow/měsac?

Dokelž so kredity TinyPNG tež přez “wulkosć/varianty” powjetša:

  • Standardna WordPress instalacija zhruba komprimuje 100 wobrazow za měsac
  • Přetworjenje do AVIF abo WebP zmóžnić:Kóždy wobrazowy rozměr přidatnje jeden kredit spotřebujeTohodla da so najskerje da jenož około 50 wobrazow za měsac komprimować a konwertować (wotwisne wot ličby wulkosćow miniaturkow).
    Tohodla 500 kreditow ≠ 500 wobrazow.

12. Kelko miniaturkow je we wobłuku mojeho sydła? Čehodla ma to tak wulki wuskutk?

WordPress při nahraću wobraza wjacore wulkosće wutwori; drastwa/tykacze (wosebje e-commerce) móža hišće dalše wulkosće přidać.
Kredity/kwoty za mrokowske komprimowanje so zwjetša jako “original + miniatura hromadźe” liča, tohodla so darmotny limit přez wjele miniaturow spěšnišo wužiwá.

13. Poskićene začitanje dyrbi so na kóždy pad spěšić? Čehodla někotři praja, zo poskićene začitanje je runje pomałše?

Líne začitanje je přihódne za “resursy mimo wobrazowku”.
Jeli so tež ta najwažniša wulka wobrazowka na prěnim wobrazowce hakle pozdźišo začita, móže to dožiwjenje prěnjeho wobrazowki spomalić. Wot WordPress 5.5 je standardne línje začitanje w porjadku, ale njewužiwajće je pauschalnje za wšitko.

14. Hdy trjebam CDN / wobraz CDN, hdyž dźu po puću A abo B?

Komprimowanje, wulkosć a format rozrěšuja “dataja je mjeńša a přihódniša”;
CDN rozrisa bliše a stabilniše dodaće
Hdyž so wobrazki z žórłoweho sydła z wulkotneje zdalenosće sćahuja a to widźomnje zakřehnjenje zawinuje, budźe přidatnje CDN/wobraz CDN (na přikład Cloudflare Polish / Jetpack Site Accelerator) cyłkownje stabilniše, čitajće WordPress CDN pospěšenje

15. Kaj je najjednorši wašnje, zo po dokónčenju přepruwowam, hač je to woprawdźe skutkowało?

Najspěšniši wobkrućowanski wašnjenje:

  • Je začitowanje při druhim wobnowjenju teje sameje strony stabilniše a spěšniše?
  • Je rozdźěl we wulkosći wobraza, kotryž so na mobilnym a desktopowym načituje, widźomny (hač srcset/sizes skutkuje)?
  • Namólnje něšto wobrazow přepruwować: hač so dataja/zdroje WebP abo AVIF pokazuja
  • Namjetnje kilku wobrazow skontrolujće: powjetšće je, zo byšće widźeli, hač su widźomnje rozmazane abo hač je tekst njewóstry