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

Аптымізацыя малюнкаў — адзін з самых “высокааддачных” напрамкаў у прадукцыйнасці 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 Спачатку правільна наладзьце “памер” (гэта лягчэй за ўсё не заўважыць, але карысць найбольшая)

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

для 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

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

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

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

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

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

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

Правілы:

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

• Маршрут A (цалкам бясплатны лакальны):Plus 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. Падвышэнне нагрузкі на сервер пры пакетнай аптымізацыі
   Бо лакальнае сцісканне проста моцна нагружае IO. Ідэя вырашэння не ў тым, каб “не выкарыстоўваць”, а ў тым, каб рабіць гэта пакетамі, у непікавы час і пры патрэбе выбіраць выгрузку або воблачнае рашэнне.
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 бясплатных крэдытаў у месяц
• Таксама ёсць “дадатковыя бязлімітныя штомесячныя крэдыты” (на старонцы плагіна пазначана адпаведная цана)
• Таксама прапануюцца аднаразовыя пакеты крэдытаў без тэрміну дзеяння з указаннем стартавай цаны

Падказка:

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

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

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

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

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

крэдыты прыклад：

Калі вы загрузіце 1 выяву, тэма або плагін створыць 8 мініяцюр៖

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

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

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

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

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

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

---

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

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

Афіцыйная старонка цэн 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-ключ для некалькіх сайтаў прыводзіць да “невытлумачальнага” змяншэння квоты”
   Калі вы выкарыстоўваеце адзін і той жа API-ключ на некалькіх сайтах, квота будзе агульнай.
   Таму ў сцэнарыях з камандай або некалькімі сайтамі лепш дакладна вызначыць: якія сайты выкарыстоўваюцца сумесна, а якія асобна, каб пазбегнуць некантралюемага бюджэту.

---

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

Бясплатны ліміт і прынцыпы тарыфікацыі

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

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

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

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

Прыклад крэдытаў TinyPNG, які лёгка зразумець

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

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

Найбольш распаўсюджаныя памылкі TinyPNG

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

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

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

Той самы WordPress, але “пункты нагрузкі на выявы” для кантэнтнага сайта, інтэрнэт-крамы, партфоліа і сайта з членствам не аднолькавыя.

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

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

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

Больш прыдатны маршрут:

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

Тыповая памылка:

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

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

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

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

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

Больш прыдатны маршрут:

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

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

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

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

Больш прыдатны маршрут:

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

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

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

5.1 Тры мадэлі спісання сродкаў

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

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

Вы можаце ацаніць гэта так:

1. Знайдзіце любую “арыгінальную выяву, якую вы часта загружаеце”, і паглядзіце яе прыкладны памер (напрыклад, 300 KB / 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 дадаткова спіша крэдыты за кожны памер выявы
• 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 у медыятэцы.

Ці азначае “згенеравана 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 у месяц заканчваюцца ўжо пасля некалькіх малюнкаў?

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

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

Чаму нават бясплатных 20MB/месяц ад Imagify хутка нестае?

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

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

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

Бо крэдыты 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
• Выбарачна праверце некалькі малюнкаў: павялічце, каб убачыць, ці няма відавочнай размытості і ці не няпэўны тэкст