Аптымізацыя малюнкаў сайта

Аптымізацыя выяў — адзін з самых “высокааддачных” пунктаў у прадукцыйнасці WordPress: пры той самай структуры старонкі і той самай тэме, калі правільна падабраць вагу, памер, фармат і спосаб дастаўкі выяў, уражанне ад загрузкі часта паляпшаецца амаль адразу.

Але аптымізацыя малюнкаў таксама найчасцей прыводзіць да таго, што ўсё “робіцца толькі больш блытана”, і прычына не ў тым, што тэхналогія занадта складаная, а ў тым, што інфармацыя занадта разрозненая:
Вы прачыталі некалькі артыкулаў і ўжо ведаеце пра “сцісканне”, “WebP/AVIF” і “лянівае загрузванне”, але потым у апісанні плагіна бачыце: “100 бясплатных credits у месяц”, “бясплатна 20MB”, “1 credit за кожны малюнак” — і ў выніку блытаецеся яшчэ больш: ці сапраўды хапае бясплатнага? Як менавіта спісваецца аплата? Ці не памыліліся вы ў разуменні “адной і той жа рэчы”? І самае галоўнае:Пасля таго як ты скончыў, гэта насамрэч спрацавала ці не?

Гэты артыкул робіць толькі тры рэчы:

1. Даць вам выканальныПлан маршруту(што рабіць спачатку, што рабіць пазней)
2. Ясна растлумачце выбар плана: у чым розніца паміж бясплатным і платным і каму што падыходзіць
3. Загадзя апішыце самыя частыя падводныя камяні, каб потым не давялося ўсюды шукаць і правяраць

1. Ніжні ўзровень: што WordPress уключае па змаўчанні, а што не

Калі ты спачатку не разберэшся, што ўжо зрабіла ядро WordPress, вельмі лёгка могуць узнікнуць дзве сітуацыі:

• Не выкарыстоўваюцца “бясплатныя магчымасці”, якія трэба было б выкарыстаць, а наадварот, марнуецца час/грошы на паўторнае стварэнне таго, што ўжо існуе
• Думаў, што WordPress аўтаматычна пераўтворыць усе старыя выявы ў WebP/AVIF, але аказалася, што не

Ядро WordPress ужо мае ўбудаваныя гэтыя ключавыя магчымасці:

• Адаптыўныя выявы (srcset/sizes): пачынаючы з WordPress 4.4, ядро будзе выводзіць для выявы srcset 与 sizesі выкарыстоўваць шматпамерныя выявы, створаныя падчас загрузкі, каб браўзер выбіраў для загрузкі найбольш прыдатныя рэсурсы ў залежнасці ад умоў экрана.
• Уласная лянівая загрузкаПачынаючы з WordPress 5.5, для малюнкаў па змаўчанні ўключана натыўная лянівая загрузка з выкарыстаннем стандарту HTML loading Рэалізацыя ўласцівасці.
• Падтрымліваецца загрузка WebPЗ версіі WordPress 5.8 можна загружаць і выкарыстоўваць WebP, як JPEG/PNG (пры ўмове, што хасцінг падтрымлівае WebP).
• Падтрымліваецца загрузка AVIFПачынаючы з WordPress 6.5, можна загружаць і выкарыстоўваць AVIF як JPEG/PNG (пры ўмове падтрымкі хостынгам).

Але звярніце ўвагу:
“Падтрымліваецца загрузка/выкарыстанне ≠ аўтаматычнае пераўтварэнне/аўтаматычная дастаўка
Іншымі словамі: нават калі ў вас ужо WP 6.5, тыя JPG/PNG у вашай медыябібліятэцы самі не ператворацца ў WebP/AVIF; і вы таксама не атрымаеце аўтаматычна поўны ланцужок “вываду AVIF/WebP у залежнасці ад магчымасцяў браўзера з адкатам да арыгінальнага файла для браўзераў без падтрымкі” — гэтую частку звычайна трэба дапаўняць убудовай або сэрвісам.

2. Дарожная карта: аптымізацыя малюнкаў у 5 крокаў

Што рабіць, навошта, які вынік лічыцца дастатковым, і якія тыповыя памылкі.

2.1 Спачатку зрабіце “памер” правільна (гэта лягчэй за ўсё ігнаруецца, але дае найбольшы вынік)

Многія сайты працуюць павольна не таму, што сціск не зроблены, а таму, штоСпампав вялікі відарыс, які значна перавышае вобласць адлюстравання：
Напрыклад, калі старонка фактычна паказвае выяву толькі на шырыню 900 px, а вы прымушаеце наведвальнікаў спампоўваць арыгінал шырынёй 3000 px, браўзер проста “спачатку спампуе, а потым паменшыць для паказу”. Гэта марнуе трафік, павялічвае час дэкадавання і запавольвае першую загрузку экрана.

для WordPress 4.4+Механізм адаптыўных малюнкаў（srcset/sizes) Менавіта для вырашэння гэтай праблемы.

Што лічыцца дастатковым:

• Пры адкрыцці старонкі на тэлефоне памер загружаных малюнкаў павінен быць прыкметна меншым, чым на камп’ютары
• Для адной і той жа выявы на розных прыладах загружаюцца рэсурсы рознага памеру, а не заўсёды спампоўваецца арыгінал

Самая распаўсюджаная памылка:

• Некаторыя тэмы/канструктары задаюць выяву як фон CSS або выводзяць яе ўласным спосабам, таму гэта можа абысці srcsetшто прыводзіць да пастаяннай загрузкі вялікіх малюнкаў
• Выкарыстанне знешніх хостынгаў малюнкаў і старонніх блокаў малюнкаў таксама можа абыходзіць сістэму некалькіх памераў, якую стварае медыябібліятэка

---

2.2 Сцісканне (зменшыць KB, але не “загубіць” якасць)

Сутнасць сціску не ў тым, каб “чым меншы памер, тым лепш”, а ў тым, каб “розніцу амаль не было відаць няўзброеным вокам, затое памер файла прыкметна змяншаўся”.

Правілы наступныя:

• Фота/рэальныя здымкі (людзі, тавары, пейзажы): Спачатку сцісканне са стратамі (найбольшы выйгрыш)
• Скрыншоты інтэрфейсу/выявы з вялікай колькасцю тэксту: сціскаць больш асцярожна, каб пазбегнуць размыцця тэксту
• Лагатып/значок: Перавага SVG або асцярожна без страт (пры стратах краі лёгка размываюцца)

Што лічыцца дастатковым:

• Аб’ём выяв на большасці старонак значна зменшыўся
• Без відавочнага шуму, размытых краёў, палос колеру і размытага тэксту

---

2.3 WebP / AVIF (стратэгія фармату: меншы памер пры той жа якасці)

WordPress ужо падтрымлівае загрузку WebP（5.8） і AVIF（6.5）。
Але каб сапраўды выкарыстоўваць “фармат наступнага пакалення”, звычайна трэба вырашыць дзве рэчы:

1. Як пакетна канвертаваць гістарычную медыятэку(інакш вы аптымізавалі толькі “новыя выявы, загружаныя пазней”)
2. Стварыць копію ці замяніць арыгінальны малюнак(Гэта мяжа рызыкі; далей асноўная ўвага будзе нададзена Plus WebP “замяніць і выдаліць арыгінальны малюнак”)

Рэкамендаваны варыянт:

• WebP: звычайна выкарыстоўваецца як выбар па змаўчанні (больш стабільная сумяшчальнасць)
• AVIF: Далейшы кірунак сціску, падыходзіць для вялікіх малюнкаў/галоўных вялікіх малюнкаў/фотаальбомаў (але большзалежыць ад падтрымкі асяроддзя）

---

2.4 Гультаяватую загрузку трэба выкарыстоўваць правільна (не пад адзін шаблон)

З WordPress 5.5Прагульванне па змаўчанніВыява.
Гэта можа паменшыць выкарыстанне прапускной здольнасці пры першапачатковай візуалізацыі:

• Лянівая загрузка падыходзіць для рэсурсаў па-за экранам“
• Найважнейшую вялікую выяву на першым экране часта не варта адкладаць у загрузцы

---

2.5 Узровень пастаўкі: CDN / Выява CDN

Сціск, памер і фармат вырашаюць, як зрабіць “файл меншым і больш прыдатным”.
Але калі выявы заўсёды загружаюцца з аддаленага крынічнага сервера, затрымкі ў сетцы ўсё роўна будуць значна ўплываць на ўражанне. У гэтым выпадку патр

Два тыповыя напрамкі:

• Аптымізацыя Cloudflare：Дакументацыя CloudflareАпісаны спосабы сціску Polish (без страт/са стратамі/WebP), а таксама згадваецца выкарыстанне format=auto Дазволена выкарыстоўваць фарматы WebP/AVIF.
• Jetpack Паскаральнік сайта：Дакументацыя JetpackТлумачэнне аптымізуе выявы і распаўсюджвае іх праз сваю сетку разам са статычнымі рэсурсамі.

Аптымізацыя выявы адказвае за змяншэнне і адаптацыю памеру,CDN адказвае за больш блізкую і надзейную дастаўку

3. Выбар мадэлі: ісці толькі па двух асноўных маршрутах

Найбольш распаўсюджаная прычына няўдачы аптымізацыі малюнкаў — не “не ўсталявалі плагін”, а тое, што ўсталявалі занадта шмат плагінаў, што прывяло да паўторнай апрацоўкі:
A сціскаецца, B таксама сціскаецца; A пераўтвараецца ў WebP/AVIF, B таксама пераўтвараецца; A змяняе URL, B зноў робіць перанакіраванне

Правілы:

Ідзіце толькі адным шляхам: або цалкам бясплатна і лакальна, або выбірайце адзін з трох варыянтаў воблачнага сціску.

• Маршрут A (поўнасцю бясплатны лакальны):Плюс WebP ці AVIF + EWWW Image Optimizer(або выберыце толькі адзін)
• Маршрут B (выберыце адзін з трох варыянтаў воблачнага сціску):ShortPixel / Imagify / TinyPNG

---

3.1 Маршрут A: цалкам бясплатны лакальны (Plus WebP ці AVIF ці EWWW)

Асаблівасці гэтага маршруту:

• Вы не залежыце ад старонніх сэрвісаў сціску з “месячным лімітам/аплатай за файл” (хоць некаторыя функцыі могуць прапаноўваць дадатковыя паслугі).
• Кошт: пакавая апрацоўка можа больш нагружаць сервер CPU/IO, патрабуе большай увагі да “стратэгіі і рызык”.”

3.1.1 Плюс WebP або AVIFАснова — “стварыць/замяніць”, гэта не традыцыйны “інструмент сціску”

• Пры генерацыі поўнага набору выяў:ID зыходнага файла выявы будзе перазапісаны WebP/AVIF, зыходны файл будзе выдалены, а URL у змесце таксама будуць заменены。
• Убудова прадастаўляе каманды WP-CLI і нагадвае: калі файлаў шмат, надзейней выкарыстоўваць WP-CLI.

Гэта азначае: гэта не “ціха згенераваць для вас версію WebP”, а, магчыма, адноПеранос актываў(асабліва калі вы ўключаеце адпаведныя параметры “замяніць і выдаліць арыгінальны малюнак”).

Адрозненні паміж двума рэжымамі

Рэжым 1: захаваць арыгінал + стварыць копіі WebP/AVIF (больш надзейна)

• Перавагі: лягчэй адкаціцца назад пры сутыкненні з праблемамі сумяшчальнасці
• Кошт: будзе павялічвацца выкарыстанне дыскавай прасторы (зыходны малюнак + новы фармат + мініяцюры розных памераў)

Рэжым 2: замяніць і выдаліць арыгінальную выяву (больш агрэсіўна)

• Перавагі: дыск не будзе разрастацца так хутка; унутраныя спасылкі адразу ператвараюцца ў новы фармат
• Рызыка: вы змяняеце актывы і спасылкі, што можа павялічыць выдаткі на выяўленне праблем сумяшчальнасці (асабліва калі некаторыя знешнія сістэмы

Тыповыя пасткі Plus WebP або AVIF

1. Пасля поўнай замены бібліятэкі некаторыя выявы на старонках адлюстроўваюцца няправільна
   Прычына звычайна не ў тым, што “малюнак сапсаваны”, а ў тым, што на нейкім этапе ў ланцужку, напрыклад пры замене URL, кэшаванні, стварэнні мініяцюр і падобных працэсах, нешта не супала.
2. Чым больш мініяцюр, тым большы абсяг змяненняў
   WordPress загрузвае адну выяву ў некалькіх памерах; тэмы/плагіны могуць дадаваць яшчэ большыя памеры. Поўная замена азначае, што вы можаце змяняць вельмі в
3. Толькі перанос фармату не азначае, што памер абавязкова будзе найменшы
   WebP/AVIF звычайна меншыя, але “стратэгія памеру” і “стратэгія сціску” ўсё яшчэ вельмі важныя. Не лічыце Plus WebP “адным клікам для паскарэння”.

---

3.1.2 EWWW Аптымізатар малюнкаў: прадстаўнік бясплатнага лакальнага сціскання

Старонка плагіна EWWW мае вельмі дакладнае пазіцыянаванне:

• Ён можа быць аптымізаваны на вашым серверы з выкарыстаннем шэрагу інструментаў (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp і інш.)
• Калі вам патрэбна больш высокая ступень сціску або эканомія CPU, вы таксама можаце перанесці апрацоўку CPU на іншы сервер (па жаданні).

Якую ролю павінен выконваць EWWW у маршруце A?

Калі вы выкарыстоўваеце Plus WebP для “пераносу фармату/стратэгіі замены”, тады EWWW лепш падыходзіць для:

• Сцісканне і аптымізацыя памеру(асабліва зніжэнне вагі зыходных рэсурсаў, такіх як JPG/PNG)
• Гісторыя аптымізацыі медыятэкі(З мэтай “зніжэння аб'ёму”, а не “замена URL”)

Тыповыя пасткі EWWW

1. Падвышэнне нагрузкі на сервер пры пакетнай аптымізацыі
   Паколькі лакальнае сцісканне проста моцна нагружае I/O. Рашэнне не ў тым, каб “не выкарыстоўваць”, а ў тым, каб “рабіць пакетна, у непікавы час і пры патрэбе выбіраць разгрузку або воблачнае рашэнне”.
2. “Створана WebP” не абавязкова азначае, што на пярэднім плане выкарыстоўваецца WebP.
   Многія ўбудовы маюць гэтае памылковае ўяўленне: генерацыя — гэта адна рэч, а стратэгія дастаўкі (перазапіс, тэг picture, траплянне ў кэш і г.д.) — зусім іншая.
3. Дублюе функцыю іншага плагіна
   Калі вы выбіраеце шлях A, па магчымасці не накладвайце дадаткова воблачнае сцісканне кшталту ShortPixel/Imagify/TinyPNG; калі вы выбіраеце шлях B, не ўключайце логіку замены Plus WebP. Асноўны прынцып:Ісці адным маршрутам да канца.

---

3.2 Маршрут B: Аблачны сціск на выбар (ShortPixel / Imagify / TinyPNG)

Гэты варыянт падыходзіць тым, хто хоча зэканоміць рэсурсы сервера, прасцей рабіць масавыя аперацыі і гатовы да аплаты па ліміце або аб’ёме
Але пункт, які ў воблачным сціску лягчэй за ўсё выклікае непаразуменне, заключаецца ў тым, што:Бясплатны ліміт — гэта не проста “бясплатная колькасць”Колькасць і памер мініяцюр, стварэнне WebP/AVIF і паўторнае сцісканне істотна ўплываюць на расход.

Ніжэй будзе растлумачана: што з бясплатным і платным, як спісваецца ліміт, на якія падводныя камяні прасцей за ўсё натрапіць і для якіх тыпаў сайтаў гэта падыходзіць.

---

3.2.1 ShortPixel100 бясплатных крэдытаў/месяц, але крэдыты будуць выдаткоўвацца на павелічэнне мініяцюр і WebP/AVIF

Як працуе бясплатна/платна

У апісанні плагіна ShortPixel выразна напісана:

• 100 бясплатных крэдытаў у месяц
• Ёсць таксама “дадатковыя неабмежаваныя штомесячныя крэдыты” (на старонцы плагіна пазначана адпаведная цана)
• Таксама прапануем “адзін разовы пакет крэдытаў, які ніколі не сканчаецца” (і даем інфармацыю пра пачатковыя цэны)

Падказка:

• Бясплатна: штомесяц даецца пэўная колькасць credits для лёгкіх сайтаў або тэставання
• Разавы пакет: падыходзіць для сайтаў з “вялікай медыятэкай і жаданнем ачысціць запас за адзін раз” (купляецца адзін раз і выкарыстоўваецца да канца, звычайна не заканчваецца па тэрміне)
• Штомесячны/бязмежны: падыходзіць для сайтаў з пастаянным абнаўленнем выяў, доўгатэрміновай стабільнай аптымізацыі

Афіцыйная база ведаў ShortPixel таксама дае “адзін разовы пакет супраць бязмежнага штомесячнага”Зразумелае тлумачэнне: Бясконцы штомесячны план аплачваецца штомесяц (або штогод), дае неабмежаваныя credits і фіксаваную квоту CDN; аднаразовыя credits не заканчваюцца, што дазваляе вам больш кантралявана выкарыстоўваць іх па меры патрэбы.

Самае важнае: як разлічваюцца крэдыты ShortPixel?

Афіцыйная дакументацыя ShortPixel KB сказаў вельмі проста і зразумела:

• WordPress загрузка аднаго малюнка стварае некалькі мініяцюр;
• За аптымізацыю кожнай мініяцюры спісваецца адзін крэдыт；
• Калі вы выбераце стварэнне WebP або AVIF,Кожная WebP/AVIF-версія арыгінала і мініяцюры дадаткова спажывае яшчэ адзін крэдыт；
• Вы можаце выключыць некаторыя мініяцюры з аптымізацыі, каб паменшыць выкарыстанне credits.

Прыклад credits：

Дапусцім, вы загружаеце 1 малюнак, тэма/плагін стварае 8 мініяцюр:

• Аптымізаваць толькі арыгінал + мініяцюры: 1 (арыгінал) + 8 (мініяцюры) = 9 credits
• Калі трэба стварыць WebP/AVIF: кожны з 9 вышэйзгаданых мае яшчэ адну версію next-gen → яшчэ +9 крэдытаў
  Гэта значыць, вы думаеце, што “1 малюнак”, а насамрэч можа спатрэбіцца амаль “2-значная колькасць крэдытаў”.

Таму:“Бясплатныя 100 крэдытаў” не азначае “бясплатныя 100 малюнкаў”.

Найбольш частыя памылкі ShortPixel

1. Бясплатныя 100 credits хутка скончацца
   Прычына: шмат мініяцюр + дадатковыя крэдыты для стварэння WebP/AVIF.
   Рэкамендацыя：

• Спачатку ацаніце колькасць мініяцюр сайта
• Выключыць непатрэбныя памеры мініяцюр (аптымізаваць толькі тыя, што сапраўды выкарыстоўваюцца)
• Спачатку вызначце стратэгію сціску, потым запускайце пакетна, каб пазбегнуць паўторных спроб і лішніх выдаткаў

2. Адначасова выкарыстоўвайце іншыя плагіны для канвертацыі фарматаў.
   Калі вы адначасова ўключыце замену Plus WebP і дазволіце ShortPixel ствараць/устаўляць тэгі next-gen, логіка накладзецца, і дыягностыка стане складаней. Варыянт B — даручыць гэта толькі ShortPixel.
3. Думаў, што пасля ўсталёўкі на пярэднім плане абавязкова выдаюцца WebP/AVIF“
   Старонка плагіна ShortPixelПадтрымлівае пераўтварэнне ў WebP/AVIF і даданне next-gen выяў на старонкі сайта (напрыклад, праз тэгі).
   Але пасля завяршэння ўсё роўна трэба праверыць вынік.

---

3.2.2 ImagifyБясплатна 20 ТБ/месяц; квота спісваецца паводле “памер арыгінала + колькасць мініяцюр”, пры паўторным сціску спісваецца зноў

Бясплатная квота і пазіцыянаванне

Афіцыйная старонка коштаў Imagify.Напісана вельмі выразна:Для бясплатнага акаўнта штомесячная квота 20MB。
На старонцы яго плагіна таксама ясна пазначана, што ён можа сціскаць, змяняць памер і канвертаваць у WebP/AVIF.

Як спісваецца квота?

Афіцыйная дакументацыя Imagify. “Як разлічваецца выкарыстанне квоты?”

• Колькасць мініяцюр уплывае на выдаткіНапрыклад, калі ў вас ёсць 10 памераў мініяцюр, аптымізацыя 1 выявы ператворыцца ў аптымізацыю 11 выяў (арыгінал + 10 мініяцюр), і ўсё гэта будзе ўлічвацца ў расходзе квоты.
• Спісаць квоту паводле зыходнага памеру файлаНапрыклад, калі вы адправіце ў Imagify выяву памерам 100 КБ, з квоты будзе спісана 100 КБ.
• Змена ўзроўню сціску і паўторная аптымізацыя зноў спажываюць квоту.。
• Адзін API-ключ можа выкарыстоўвацца для некалькіх сайтаў, але квота будзе агульнай для гэтых сайтаў.

Гэта “асноўны спосаб разумення” Imagify:
Гэта больш падобна на пакет трафіку: колькі вы адпраўляеце, столькі і спаганяецца; чым больш мініяцюр, тым больш спаганяецца; калі вы паўтараеце сціск, спагнанне паўтараецца.

Лёгка зразумелы прыклад квоты Imagify

Дапусцім, вы загружаеце зыходны файл 800 КБ, сайт стварае 8 мініяцюр.

• Imagify аптымізуе “зыходны малюнак + 8 мініяцюр” (калі вы выбіраеце поўную аптымізацыю), што азначае, што гэтая аперацыя спажыве квоту, блізкую да “сумы першапачатковых памераў усіх гэтых файлаў”.
  Вось чаму на некаторых сайтах здаецца, што “20MB хутка заканчваецца”: справа не ў тым, што магчымасцяў Imagify не хапае, а ў тым, што выявы, якія вы кожны раз загружаеце, занадта вялікія, мініяцюр занадта шмат, і, магчыма, вы яшчэ неаднаразова спрабуеце розныя ўзроўні сціску.

Найбольш частыя падводныя камяні Imagify

1. Бясплатна 20MB недастаткова для “ачысткі ўсёй гісторыі сайта”
   20MB звычайна больш падыходзіць для тэставання і лёгкіх абнаўленняў; калі ваша медыятэка і так ужо вельмі вялікая, то пры аднаразовай поўнай ачыстцы бібліятэкі, хутчэй за ўсё, спатрэбіцца абнаўленне.
2. Паўторная змена ўзроўню сціску прыводзіць да паўторнага расходавання квоты
   Дакладнае апісанне ImagifyПерааптымізацыя зноў спажывае квоту.
   Раю вам адразу на гэтай старонцы выразна апісаць “стратэгію”:

• Спачатку вызначце ўзровень сціску і выгляд з невялікай колькасці выяў
• Пасля вызначэння стратэгіі запускайце масава
  Пабягайце паўтарэння памылак на ўсёй базе дадзеных

3. Выкарыстанне аднаго API Key на некалькіх сайтах прыводзіць да “незразумелага скарачэння” квоты”
   Калі вы выкарыстоўваеце адзін і той жа API Key на некалькіх сайтах, квота будзе агульнай.
   Таму ў сцэнары каманды/некалькіх сайтаў лепш выразна вызначыць: якія сайты выкарыстоўваюцца сумесна, а якія — асобна, каб пазбегнуць некантраляванага бюджэту.

---

3.2.3 TinyPNG(Tiny Compress Images): бясплатна 500 credits/месяц; пры канвертацыі ў WebP/AVIF дадаткова спісваецца 1 credit за кожны памер“

Бясплатная квота і прынцып яе тарыфікацыі

На старонцы плагіна TinyPNG для WordPress напісана вельмі зразумела:

• 500 крэдытаў бясплатна кожны месяц
• У “Звычайнай усталёўцы WordPress” можна прыкладна сціснуць каля 100 малюнкаў/месяц
• Але калі ўключыць канвертацыю AVIF або WebP:Кожны памер выявы дадаткова спажывае 1 creditтаму, верагодна, можна толькі сціснуць і пераўтварыць каля 50 малюнкаў/месяц(У залежнасці ад таго, колькі ў вас памераў эскізаў).

У той жа час Tinify (распрацоўшчык TinyPNG/TinyJPG) таксама на сваёй Старонка цэнаў APIУкажыце: пры рэгістрацыі вы атрымаеце 500 бясплатных сцісканняў у месяц; пасля перавышэння аплата спаганяецца за кожнае паспяховае сцісканне, без абавязковай падпіскі.

Апішыце, як TinyPNG апрацоўвае выявы, адным сказам:
Лічыцца ў credits; чым больш памераў мініяцюр і чым больш WebP/AVIF уключана, тым хутчэй расходуюцца credits.

Зразумелыя прыклады TinyPNG credits

Калі выкажам здагадку, што ваш сайт стварае 8 памераў мініяцюр для кожнай выявы:

• Толькі сціск: арыгінал + 8 мініяцюр → патрабуецца 9 крэдытаў
• Калі ўключыць канвертацыю WebP/AVIF: за кожны памер будзе спаганяцца дадатковы крэдыт → магчыма, амаль падвойны кошт
  Гэта адпавядае апісанню на старонцы плагіна: пасля ўключэння пераўтварэння бясплатны ліміт змяняецца прыкладна з “100 аркушаў/месяц” на “50 арку

Найбольшыя падводныя камяні TinyPNG

1. Лічыць, што 500 крэдытаў = 500 малюнкаў
   Не. Ён спажываецца паводле “памеру выявы/варыянту”. На старонцы плагіна ўжо ясна папярэджваецца: “Канвертацыя будзе спажываць дадатковы
2. Тэмы/убудовы для электроннай камерцыі ствараюць занадта шмат памераў, і бясплатны ліміт прыкметна знізіўся
   Чым больш памераў, тым хутчэй расходуюцца credits.
3. Пасля ўключэння канвертацыі ліміт раптам стаў хутка вычэрпвацца
   Гэта не памылка, а яго механізм аплаты.
   Стратэгічныя рэкамендацыі:

• Калі бясплатны этап у асноўным выкарыстоўваецца для сціску і зніжэння вагі, можна спачатку толькі сціскаць, а пасля таго, як вы пацвердзіце стабільнас

4. Рэкамендацыі па сцэнарыях: як выбраць для розных тыпаў сайтаў

Гэта ўсё той жа WordPress, але “кропкі нагрузкі” на выявы для кантэнтнага сайта, інтэрнэт-крамы, партфоліа і сайта для ўдзельнікаў адрозніваюцца.

4.1 Кантэнт-сайты/блогі (шмат выяў у артыкулах, сярэдняя частата абнаўленняў)

Прыярытэтныя рэкамендацыі:

1. Стратэгія памеру (Крок 1)
2. Сцісканне (Крок 2)
3. WebP (Крок 3)

Больш падыходзячы маршрут:

• Хочаце зручнасці: выберыце адзін з трох варыянтаў маршруту B (ShortPixel / Imagify / TinyPNG)
• Хочаце бясплатна: Маршрут A (Plus WebP + EWWW), але рэкамендуецца пачаць з “кансерватыўнага рэжыму (не выдаляць арыгінальныя выявы)” для ацэнкі рызык.

Тыповыя пасткі:

• Вялікая выява ў загалоўку артыкула, няправільная стратэгія лянівай загрузкіЗапаволіць першы экран

4.2 Электронная камерцыя/прадукты (шмат мініяцюр, варыянты выяў, стабільнасць на першым месцы)

Найбольш праблематычным месцам у электронным гандлі з'яўляецца не “дрэнная кампрэсія”, а “неправільныя памеры пасля аптымізацыі, адсутнасць мініяцюр, адсутнасць выяў для франтэнд-кампанентаў”.

Прыярытэтныя рэкамендацыі:

1. Спачатку стабільнасць: стратэгія сціскання павінна быць больш кансерватыўнай, не варта адразу замяняць усю базу дадзеных.
2. Ацэнка памеру мініяцюр: Электронныя камерцыі часта ствараюць больш памераў, што павялічвае выкарыстанне ліміту (асабліва прыкметна ў ShortPixel/TinyPNG
3. Спачатку праверыць у невялікім маштабе, а потым партыямі (вельмі важна)

Больш падыходзячы маршрут:

• Маршрут B звычайна больш зручны: ShortPixel/Imagify/TinyPNG падтрымліваюць пакавую апрацоўку, галоўнае — зразумець сістэму лімітаў і загад
• Маршрут A таксама падыходзіць, але трэба больш асцярожна ставіцца да дзеянняў Plus WebP “перазапісаць ID/выдаліць арыгінал/замяніць URL”: гэта адносіцца да міграцыі рэсурсаў, не рэкамендуецца адразу рабіць поўную замену.

4.3 Партфоліа/Фотасайт (адчувальны да якасці асобных выяў, вялікія выявы, высокія патрабаванні да візуальнага ўражання)

Прыярытэтныя рэкамендацыі:

1. Стратэгія памеру (кантроль адлюстравання вобласці)
2. Стратэгія сціску (лепш крыху больш, чым страціць дэталі)
3. WebP/AVIF (для вялікіх выяў выйгрыш вельмі прыкметны, але трэба праверыць візуальнае ўспрыманне)

Больш падыходзячы маршрут:

• Imagify: Пры “памеры зыходнага малюнка” спаганяецца квота, такія сайты лягчэй робяць “кантраляваны бюджэт” (вы ведаеце, прыблізна колькі спаганяецца за кожную вялікую выяву), але трэба пазбягаць паўторнага сціску.
• ShortPixelКалі памеры мініяцюр невялікія, крэдыты даволі зразумелыя; але калі вы ствараеце шмат памераў + next-gen, выдаткі на крэдыты павялічацца,

5. Параўнанне лімітаў/тарыфікацыі: растлумачыць “ці хапае бясплатнага”

Што ж выбраць больш выгадна, і на колькі хопіць бясплатнага?

5.1 Тры мадэлі спісання платы

• ShortPixel(крэдыты)Крэдыты падлічваюцца па схеме “арыгінал + колькасць мініяцюр”; стварэнне WebP/AVIF спаганяе дадатковы крэдыт за кожную адпаведную версію.
• Imagify(Квота MB): спісваецца квота паводле “арыгінальнага памеру файла”; чым больш мініяцюр, тым больш спісваецца; паўторнае сцісканне спіша яшчэ раз.
• TinyPNG(крэдыты)Штомесяц 500 credits; уключэнне канвертацыі ў WebP/AVIF дадаткова спісвае credits за кожны памер выявы.

5.2 Метад хуткай ацэнкі

Вы можаце прыблізна ацаніць так:

1. Знайдзіце любую “арыгінальную выяву, якую вы часта загружаеце”, і паглядзіце яе прыкладны памер (напрыклад, 300KB / 1MB / 3MB)
2. Паглядзіце, колькі прыкладна памераў мініяцюр стварае ваш сайт (напрыклад, 5 / 10 / 20)
3. Вырашыце, ці трэба ствараць WebP/AVIF (так/не)

Потым зразумейце расход з дапамогай наступнага “вуснага падліку”:

• ShortPixelна кожную выяву ≈ (1 + колькасць мініяцюр) крэдытаў; калі ствараць WebP/AVIF, ≈ яшчэ ўдвая больш (бо next-gen версіі таксама патрабуюць крэдытаў)
• Imagify: за кожную выяву ≈ (памер арыгінала + памер кожнай мініяцюры) спісваецца з квоты; пры паўторным сціску са змененым узроўнем сціску квота будзе спісана зноў
• TinyPNGБясплатна: 500 крэдытаў; калі на вашым сайце з кожнага малюнка ствараецца шмат памераў і ўключана канвертацыя, колькасць бясплатных малюнкаў прыкметна зменшыцца (на старонцы плагіна пазначана наглядная ацэнка: “каля 100 малюнкаў/месяц” і “каля 50 малюнкаў/месяц”)

6. Папярэджанне аб рызыках

Рызыка 1: не дазваляйце некалькім убудовам дубляваць адну і тую ж задачу

Гэта самая частая “крыніца катастроф”

• Маршрут A៖Plus WebP або AVIF + EWWWРазмеркуйце абавязкі: не выконвайце адначасова аднолькавыя пераўтварэнні і дастаўку, або ўсталюйце толькі адзін з іх
• Варыянт B: ShortPixel / Imagify / TinyPNG Выбраць адзін з трохАбраць адказнага за сцісканне і next-gen

Рызыка 2: “Перазапісаць ID / Выдаліць арыгінал / Замяніць URL” у Plus WebP адносіцца да міграцыі рэсурсаў

Яшчэ раз падкрэслім:Плюс WebP У апісанні дакладна напісана, што пры поўнай генерацыі будзе перазапісаны ID зыходнага малюнка, выдалены зыходны файл і заменены URL змесціва.
Гэта азначае, што гэта не “невялікая налада, якую можна ў любы момант адмяніць”, а аднаразовая змена на ўзроўні актываў.

Рэкамендаваная стратэгія павінна быць такой:

• Спачатку пратэстуйце ў малым маштабе (ад некалькіх дзесяткаў да некалькіх сотняў)
• Пацвердзіце, што адлюстраванне на сайце, мініяцюры і абнаўленне кэшу працуюць нармальна
• Паўторна разгледзець апрацоўку ўсёй бібліятэкі

Рызыка 3: рэальны расход “бясплатнага ліміту” на воблачнае сцісканне залежыць ад колькасці мініяцюр і выбару next-gen

• ShortPixelМініяцюры і next-gen істотна паўплываюць на крэдыты
• TinyPNGУключэнне WebP/AVIF будзе дадаткова спісваць credits за кожны памер выявы
• Imagify: спісваецца па памеры зыходнага малюнка, чым больш мініяцюр, тым больш спісваецца, паўторнае сцісканне спісваецца паўторна

Рызыка 4: “Створаны WebP/AVIF” не азначае “На сайце дастаўляецца WebP/AVIF”

Пасля канвертавання многія не бачаць паскарэння, бо на сайце ўсё яшчэ аддаюцца JPG/PNG (з-за кэшу, перазапісу, тэгаў, узгаднення з браўзерам і інш.).

7. Як праверыць, ці пачаў дзейнічаць пасля выканання

4 вельмі простыя пункты праверкі:

1. Пры другім абнаўленні той жа старонкі загрузка больш стабільная і хуткаяЦі адчуваецца эфект кэшавання і аптымізацыі
2. Ці прыкметна адрозніваюцца памеры малюнкаў, што загружаюцца на мабільным і настольным прыладахАдаптыўны дызайн srcset/sizes Ці дзейнічае）
3. Выбарачна праверыць выявы: ці ёсць файлы/рэсурсы WebP або AVIFЦі сапраўды сайт выкарыстоўваецца next-gen）
4. Выбарка некалькіх малюнкаў: павялічыць і паглядзець, ці відавочна размыты, ці размыты тэкстЦі занадта сціснута якасць

Калі ўсе гэтыя чатыры пункты выконваюцца, значыць, выбраны вамі маршрут ужо запушчаны. Далей можна пераходзіць да працы над Узровень дастаўкі“, у цэлым будзе больш стабільна.

8. Рэкамендацыі па дзеяннях

1. Спачатку выберыце маршрут:

• Па магчымасці бясплатна: Plus WebP або AVIF + EWWW (або ўсталяваць толькі адзін з іх)
• Хочаце зэканоміць рэсурсы сервера і плаціць па квотах без клопату：ShortPixel / Imagify / TinyPNG тры на выбар

2. Спачатку правядзіце невялікі тэст (некалькі дзясяткаў малюнкаў)
3. Пацвердзіце, што ўсё ў парадку, перад пакетнай апрацоўкай
4. Неабходна далей павысіць стабільнасць пастаўкі:Чытанне Паскарэнне CDN

Частыя пытанні

1. Колькі ж убудоў мне ўрэшце трэба ўсталяваць? Ці можна ўсталяваць усе?

Старайцеся па магчымасці ісці толькі па адным маршруце.

• Маршрут A: Plus WebP або AVIF + EWWW Image Optimizer (або ўсталяваць толькі адзін з іх)
• Варыянт B: ShortPixel / Imagify / TinyPNG — выберыце адзін
  Калі на адным сайце некалькі плагінаў адначасова робяць сцісканне, канвертацыю ў WebP/AVIF, змену URL і перазапіс дастаўкі, усё вельмі лёгка заблытаць і цяжэй за ўсё потым знайсці прычыну.

2. WordPress ужо падтрымлівае WebP/AVIF? Мне ўсё яшчэ патрэбны плагін?

Трэба адрозніваць:
“Падтрымліваецца загрузка/выкарыстанне ≠ аўтаматычнае пераўтварэнне/аўтаматычная дастаўка
WordPress 6.5 таксама не будзе аўтаматычна масава пераўтвараць старыя JPG/PNG у WebP/AVIF і не будзе аўтаматычна наладжваць для вас поўны ланцужок “вываду AVIF/WebP у залежнасці ад магчымасцей браўзера з рэзервовым варыянтам”. Каб і старая медыябібліятэка таксама не адставала, звычайна патрэбны плагін або сэрвіс, каб гэта дапоўніць.

3. Які крок у аптымізацыі малюнкаў дае найбольшую аддачу?

Звычайна Спачатку наладзьце “памер” (srcset/sizes)。
Павольнасць многіх сайтаў не ў тым, што выявы не сціснутыя, а ў тым, што старонка паказвае толькі 900 px, але прымушае карыстальніка спампоўваць арыгінал на 3000 px. Сцісканне эканоміць КБ, але “няправільны памер” прымушае вас дарэмна спампоўваць у некалькі разоў больш дадзеных.

4. Як мне пацвердзіць, што цяпер загружаецца менавіта “меншая выява”, а не заўсёды спампоўваецца арыгінал?

Паглядзім на дзве з'явы:

• Пры адкрыцці старонкі на тэлефоне загружаныя выявы відавочна меншыя, чым на камп’ютары
• Для адной і той жа выявы на розных прыладах загружаюцца рэсурсы рознага памеру
  Калі заўсёды спампоўваецца арыгінальны відарыс, звычайная прычына ў тым, што тэма або канструктар выкарыстоўвае відарыс як фон CSS або ўласны вывад, абыходзячы некалькі памераў і srcset у медыябібліятэцы.

5. Ці азначае “згенеравана WebP/AVIF”, што на сайце абавязкова аддаецца WebP/AVIF?

Не роўна.
Стварэнне толькі завершана на “ўзроўні файлаў”; ці сапраўды фронтэнд аддае WebP/AVIF, яшчэ залежыць ад перазапісу, стратэгіі тэга picture, таго, ці трапляе кэш, ці спрацоўвае ўзгадненне з браўзерам і г.д. Пасля завяршэння абавязкова “выбарачна праверце тып рэсурсу ў некалькіх малюнкаў”.

6. Дзе ж насамрэч небяспека Plus WebP або AVIF? Ці магу я адным клікам запусціць гэта па ўсёй бібліятэцы?

Праблема не ў “сцісканні”, а ўЗмены ўзроўню міграцыі актываў：

• Пры поўнай генерацыі могуць быць перазапісаны ID зыходнага файла выявы, выдалены зыходны файл і заменены URL у змесце.
  ТамуНе рэкамендуецца адразу рабіць замену ва ўсёй базе: спачатку пратэстуйце на невялікім аб'ёме (ад некалькіх дзясяткаў да некалькіх соцень файлаў) + пры наяўнасці прыдатнай рэзервовай копіі толькі потым разглядайце апрацоўку ўсёй базы.

7. Як выбраць адзін з двух рэжымаў Plus WebP: пакінуць арыгінал ці замяніць і выдаліць арыгінал?

Проста кажучы:

• Рэжым 1: захаваць арыгінал + стварыць копіі WebP/AVIF (больш надзейна)：Зручна для вяртання, але дыск будзе расці (арыгінал + новы фармат + шматпамерныя мініяцюры).
• Рэжым 2: замяніць і выдаліць арыгінальную выяву (больш агрэсіўна): дыск не так лёгка разрастаецца, але калі ты “мяняеш рэсурсы + мяняеш спасылкі”, кошт пошуку і ліквідацыі праблем сумяшчальнасці вышэйшы.
  Чым складанейшы сайт (электронная камерцыя / шмат убудоў / шмат памераў), тым больш рэкамендуецца пачынаць з больш стабільнага рэжыму.

8. Ці дастаткова бясплатнага лакальнага сціскання EWWW Image Optimizer? Ці не перагрузіць яно сервер?

EWWW больш падобны да “лакальнага сціскальніка”: будзе спажываць CPU/IO.
Звычайная сітуацыя — рост нагрузкі пры пакетнай аптымізацыі; гэта не значыць, што яна “не працуе”, проста патрэбная правільная стратэгія: па частках, у непікавы час, а пры патрэбе — выгрузка або воблачнае рашэнне.
Калі вам важныя прастата і спакой, або калі рэсурсы сервера абмежаваныя, варыянт B больш эканоміць рэсурсы сервера.

9. 100 бясплатных крэдытаў ShortPixel у месяц, чаму я адчуваю, што яны скончыліся пасля некалькіх выяваў?

Таму што credits — гэта не “колькасць малюнкаў”будзе павялічана мініяцюрай і next-gen

• Арыгінал + кожная мініяцюра лічыцца credit
• Калі ствараюцца WebP/AVIF, кожная адпаведная версія дадаткова спажывае credit
  Таму вам можа здавацца, што “1 выява” фактычна спажывае амаль “двухзначную колькасць крэдытаў”. ShortPixel

10. Чаму бясплатныя 20MB/месяц у Imagify таксама хутка заканчваюцца?

Imagify больш падобны на “пакет трафіку”:

• Па тым, што вы адправіліПершапачатковы памер файлаВылік квоты
• Чым больш мініяцюр, тым большы расход
• Змяніць узровень сціску і паўторна аптымізаваць — гэта зноў спажыве квоту
• Адзін і той жа ключ API можна выкарыстоўваць на некалькіх сайтах, квота агульная
  Таму “20MB хутка заканчваецца” часта адбываецца з-за занадта вялікіх малюнкаў, занадта вялікай колькасці мініяцюр або шматразовых спроб і памылак.

11. TinyPNG бясплатна 500 крэдытаў/месяц, чаму плагін кажа, што прыкладна толькі 100 шт./месяц, а пасля ўключэння WebP/AVIF яшчэ менш —

Бо крэдыты TinyPNG таксама павялічваюцца з-за “памеру/варыянтаў”:

• Звычайная ўстаноўка WordPress прыблізна сціскае каля 100 малюнкаў у месяц
• Уключыць пераўтварэнне ў AVIF або WebP:Кожны памер выявы дадаткова спажывае 1 creditТаму, верагодна, можна сціскаць і канвертаваць толькі каля 50 малюнкаў у месяц (у залежнасці ад колькасці памераў мініяцюр).
  Таму 500 credits ≠ 500 малюнкаў.

12. Колькі ж у маёй станцыі мініяцюр? Чаму гэта так моцна ўплывае?

Пры загрузцы аднаго відарыса WordPress стварае некалькі памераў; тэмы і плагіны, асабліва для электроннай камерцыі, могуць дадаваць яшчэ больш.
Крэдыты/квота на воблачнае сцісканне звычайна лічацца як “арыгінал + мініяцюра разам”, таму чым больш мініяцюр, тым хутчэй заканчваецца бясплатны ліміт.

13. Ці абавязкова лянівая загрузка паскарае? Чаму некаторыя кажуць, што лянівая загрузка наадварот запавольвае?

Адкладзеная загрузка падыходзіць для “рэсурсаў па-за экранам”.
Калі самая важная вялікая выява на першым экране таксама адкладваецца, гэта можа запаволіць працу першага экрана. Лянівая загрузка па змаўчанні з WordPress 5.5 — гэта нармальна, але не трэба рабіць “адзін падыход для ўсіх”.

14. Калі я іду па маршруце A або B, калі мне патрэбен CDN / выява CDN?

Сціск, памер і фармат вырашаюць пытанне “файл меншы і больш адпаведны”;
CDN вырашае больш блізкую і стабільную дастаўку。
Калі выявы здабываюцца здалёк з крынічнага сайта і гэта выклікае прыкметную затрымку, дадатковае выкарыстанне CDN/выява CDN (напрыклад, Cloudflare Polish / Jetpack Site Accelerator) у цэлым будзе больш стабільным для прагляду Паскарэнне WordPress CDN。

15. Якім самым простым спосабам пасля завяршэння праверыць, што гэта сапраўды спрацавала?

Найхутчэйшы спосаб праверкі:

• Пры другім абнаўленні той жа старонкі загрузка больш стабільная і хуткая
• Ці прыкметна адрозніваюцца памеры выявы, што загружаецца на тэлефоне і камп'ютары (ці працуюць srcset/sizes)
• Выбарачна праверыць выявы: ці ёсць файлы/рэсурсы WebP або AVIF
• Выбарка некалькіх малюнкаў: павялічыць і паглядзець, ці відавочна размыты, ці размыты тэкст