Оптимізація зображень у WordPress

Оптимізація зображень є одним з найбільш “вигідних” аспектів продуктивності WordPress: однакова структура сторінки, одна і та сама тема, але якщо розмір, формат і спосіб доставки зображень обрані правильно, швидкість завантаження часто покращується негайно.

Але оптимізація зображень також найчастіше призводить до “більшого безладу”, не тому що це складно з технічної точки зору, а тому що інформація занадто розрізнена:
Ви прочитали кілька статей і дізналися про “стиснення”, “WebP/AVIF”, “ледачий завантаження”. Далі в описі плагіна написано “100 безкоштовних кредитів на місяць”, “20 МБ безкоштовно”, “1 кредит за зображення”. Але чим більше ви читаєте, тим більше заплутані — чи достатньо цього безкоштовного обсягу? Як відбувається нарахування платежів? Може, ви неправильно зрозуміли, що мається на увазі під “тим самим”? І найголовніше:Чи справді це спрацювало після того, як ви це зробили?

Ця стаття робить лише три речі:

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 пікселів, а ви просите відвідувачів завантажити оригінальне зображення розміром 3000 пікселів, браузер просто “завантажить його, а потім зменшить розмір для відображення”. Це призведе до витрати пропускної здатності, збільшення часу декодування та уповільнення завантаження першого екрану.

Для WordPress 4.4+Механізм адаптивних зображень.（srcset/sizesСаме для вирішення цієї проблеми.

Що означає "досягти прийнятного рівня"?

• Коли сторінка відкривається на телефоні, розмір завантажених зображень має бути значно меншим, ніж на настільному комп'ютері.
• Размір ресурсів, які завантажуються на різних пристроях, відрізняється (а не завжди завантажується оригінальне зображення).

Найчастіші підводні камені:

• Деякі теми/конструктори використовують зображення як фонові зображення для CSS або виводять їх у власному форматі, що може обійти цю вимогу. srcsetЦе призвело до того, що весь час випадали великі краплі дощу.
• Ви використовуєте зовнішні хостинги зображень, сторонні блоки зображень, а також можете обійти систему різних розмірів, створену медіатекою.

---

2.2 Стиснення (зменшення розміру в кілобайтах, але не погіршення якості).

Суть стиснення полягає не в тому, що “чим менше, тим краще”, а в тому, що “різниця для неозброєного ока практично непомітна, але об'єм значно зменшується”.

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

• Фотографії/живі кадри (люди, продукти, пейзажі)Пріоритетне стискання з втратами (максимальна віддача)
• Скріншоти інтерфейсу/зображення з великою кількістю тексту.Стиснення має бути більш консервативним, щоб уникнути розмитості тексту.
• Логотип/знак.Пріоритет - 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：Документація ДжетпакаПоясніть, що він оптимізує зображення і розповсюджує їх через свою мережу разом зі статичними ресурсами.

Отже, оптимізація зображень полягає в тому, щоб зробити їх меншими та більш придатними.CDN відповідає за доставку контенту ближче та стабільніше.

3. Вибір варіанту: виберіть лише два основних маршрути.

Найчастіша проблема з оптимізацією зображень — не відсутність плагінів, а те, що забагато плагінів призводить до їх надмірної обробки:
А в цей час А теж стискає, а Б теж стискає; А перетворює файли на WebP/AVIF, а Б теж перетворює; А змінює URL, а Б знову переписує — зрештою, ви самі не зможете зрозуміти, що насправді відбувається на сайті.

Правила:

Є лише один варіант: або повністю безкоштовний локальний доступ, або хмарне стиснення, або щось посередині.

• Маршрут А (повністю безкоштовний для місцевих жителів):Плюс WebP або AVIF + EWWW Image Optimizer(Або виберіть лише один з них)
• Маршрут B (вибір з трьох варіантів хмарного сховища):СhortPixel / Imagify / TinyPNG

---

3.1 Маршрут A: повністю безкоштовний локальний (Plus WebP або AVIF або EWWW)

Особливості цього маршруту:

• Ви не залежите від сторонніх сервісів стиснення, які надають послуги “за місячну передплату/за фото”, (хоча деякі функції можуть бути доступні як додаткові послуги).
• Ціна — це те, що пакетна обробка може більше навантажувати процесор/вводовиведення сервера, тому вам потрібно приділити більше уваги “стратегії та ризикам”.”

3.1.1 Плюс WebP або AVIF.Основне — це “генерація/заміна”, а не “інструмент стиснення” у традиційному розумінні.”

• При створенні повнорозмірних зображень:Ідентифікатор оригінального файлу зображення буде перезаписаний WebP/AVIF, оригінальний файл буде видалено, а URL у контенті буде замінено.。
• Плагін надає команди WP-CLI та нагадує: при роботі з великою кількістю файлів краще користуватися WP-CLI.

Це означає, що це не “тихенько створить для вас файл WebP”, а, швидше за все, це буде...Переміщення активів.(Особливо, коли ви активуєте відповідну опцію “Замінити та видалити оригінальне зображення”).

Різниця між двома моделями.

Модель 1: зберегти оригінальне зображення + створити копію у форматі WebP/AVIF (надійніше)

• Переваги: легше відкотити назад у випадку проблем із сумісністю.
• Ціна: збільшення зайнятості дискового простору (оригінальне зображення + новий формат + мініатюри різних розмірів)

Модель 2: заміна та видалення оригінальної картинки (більш радикально)

• Переваги: диск не наповнюватиметься так швидко; внутрішні посилання автоматично перетворюватимуться на нові формати.
• Ризик: якщо ви змінюєте активи та посилання, витрати на усунення проблем із сумісністю будуть вищими (особливо якщо деякі зовнішні системи або логіка теми залежать від початкових назв файлів, шляхів або форматів).

А також типові проблеми з WebP або AVIF.

1. Після повної заміни бази даних деякі зображення на сторінках відображаються некоректно.
   Причиною зазвичай є не “погане зображення”, а те, що якийсь елемент ланцюжка, наприклад, заміна URL, кешування, стратегія мініатюр тощо, не працює належним чином.
2. Чим більше мініатюр, тим більший обсяг змін.
   При завантаженні зображення на WordPress створюється кілька його версій різних розмірів; теми/плагіни також можуть додавати додаткові розміри. Повна заміна означає, що ви можете змінити великий набір файлів.
3. Просте перетворення формату не означає, що розмір файлу обов'язково буде мінімальним.
   ВебП/АВІФ зазвичай менші, але “стратегія розміру” та “стратегія стиснення” все ще є ключовими. Не слід розглядати Плюс ВебП як “швидкість натискання однієї кнопки”.

---

3.1.2 Оптимізатор зображень EWWWПредставник безкоштовного локального стиснення.

Місце розташування сторінки плагіна EWWW є дуже чітким:

• Його можна оптимізувати на вашому сервері за допомогою різних інструментів (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp тощо).
• Якщо вам потрібна більш висока стиснення або менше навантаження на процесор, ви також можете перекласти процес, що вимагає багато ресурсів процесора, на їхній сервер (це необов'язково).

Яку роль має відіграти EWWW на маршруті А?

Якщо ви використовуєте Plus WebP для “стратегії конвертації/заміни форматів”, то EWWW краще підійде для цього:

• Стиснення та оптимізація об'єму.(Особливо це стосується зменшення розміру оригінальних ресурсів, таких як JPG/PNG тощо.)
• Оптимізація історичної медіатеки у великих обсягах.(Мета — “зниження об'єму”, а не “заміна URL”).

Типові підводні камені EWWW.

1. При оптимізації в режимі пакетної обробки навантаження на сервер збільшується.
   Оскільки локальне стиснення вимагає великих обчислювальних ресурсів і впливає на вхідні/вихідні дані, рішення полягає не в тому, щоб “не використовувати його”, а в тому, щоб “використовувати його порціями, у періоди низької активності та, за необхідності, вибирати розвантаження/хмарні рішення”.
2. “WebP було створено” не означає, що на веб-сторінці обов’язково відображатиметься WebP.
   Багато плагінів мають таке неправильне уявлення: генерація — це одне, а стратегія доставки (перезапис, теги зображень, кешування тощо) — це інше.
3. Робити те саме, що й інші плагіни
   Якщо ви виберете варіант A, намагайтеся не використовувати хмарне стиснення, таке як ShortPixel/Imagify/TinyPNG; якщо ви виберете варіант B, не використовуйте логіку заміни Plus WebP. Основний принцип:Пройдіть весь маршрут до кінця.

---

3.2 Варіант B: вибір одного з трьох інструментів для стиснення зображень (ShortPixel / Imagify / TinyPNG)

Цей варіант підійде тим, хто “хоче заощадити ресурси сервера, працювати з великими обсягами даних і не переживати про витрати, пов'язані з оплатою за фактичне використання”.
але найбільш неправильно зрозумітим аспектом хмарного сховища є те, що:Безкоштовний ліміт – це не просто “безкоштовні SMS-повідомлення”.Розмір та кількість мініатюр, а також те, чи генеруються вони у форматах WebP/AVIF і чи піддаються повторному стисканню, значно впливають на обсяг споживання ресурсів.

Нижче буде пояснено: що означає "безкоштовно/платно", як відбувається зняття коштів, які помилки найчастіше роблять користувачі та для яких типів сайтів цей сервіс підходить.

---

3.2.1 СhortPixel100 безкоштовних кредитів на місяць, але кредити витрачаються на мініатюри та збільшення зображень у форматах WebP/AVIF.

Що стосується безкоштовного та платного варіантів?

У описі плагіна ShortPixel чітко зазначено:

• 100 безкоштовних кредитів на місяць.
• Існують також “додаткові необмежені щомісячні кредити” (відповідна інформація про ціни наведена на сторінці плагіна).
• Також пропонуються “пакети одноразових кредитів, які ніколи не закінчуються” (з інформацією про початкову ціну).

Порада:

• Безкоштовно: щомісяця надаються певні кредити для використання на невеликих сайтах або для тестування.
• Одноразові пакети: підходять для сайтів, де “медіатека велика, і ви хочете позбутися від запасів за один раз” (купуєте один раз і використовуєте до кінця, зазвичай вони не застарівають).
• Щомісячний/безлімітний: підходить для сайтів, на яких постійно оновлюються фотографії та проводиться довгострокова стабільна оптимізація.

Офіційна база знань ShortPixel також надає інформацію про “одноразові пакети проти необмежених щомісячних пакетів”.Чітке пояснення.Необмежений тарифний план передбачає щомісячну (або щорічну) оплату, надає необмежену кількість кредитів і має фіксований ліміт на CDN; одноразові кредити не закінчуються, що дає вам більше контролю над їх використанням за потреби.

Найважливіше: як розраховуються кредити в ShortPixel?

Офіційна документація ShortPixel. КБ виклав все дуже просто:

• При завантаженні зображення на WordPress створюється кілька його мініатюр;
• Оптимізація кожної мініатюри зараховується як один кредит.；
• Якщо ви виберете створення файлів у форматах WebP або AVIF,Кожен вебП/АВІФ-версія оригінальної картинки та її мініатюри витрачатиме ще один кредит；
• Ви можете виключити певні мініатюри, які не потребують оптимізації, щоб зменшити витрати кредитів.

Кредити. Приклад.：

Припустімо, що ви завантажили 1 зображення, а тема/плагін створили 8 мініатюр:

• Тільки оптимізація оригінальної картинки та мініатюр: 1(оригінальна картинка) + 8(мініатюри) = 9 кредитів.
• Якщо потрібно також створити WebP/AVIF: додати по одному наступному поколінню для кожного з 9 вищезазначених форматів → додати ще 9 кредитів.
  Тобто, ви думаєте, що це “1 зображення”, але насправді воно може коштувати близько “2-х десятків кредитів”.

Отже:“Безкоштовні 100 кредитів” не означає “безкоштовні 100 зображень”.

Найчастіші проблеми з ShortPixel

1. Безкоштовні 100 кредитів швидко закінчуються.
   Причина: багато мініатюр + додаткові кредити за створення файлів у форматах WebP та AVIF.
   Рекомендація：

• Спочатку оцініть кількість мініатюр на сайті.
• Видаліть непотрібні розміри мініатюр (оптимізуйте лише ті розміри, які дійсно будуть використані).
• Спочатку виберіть стратегію стиснення, а потім запустіть процес у пакетному режимі, щоб уникнути витрат часу на постійні спроби та помилки.

2. Водночас додайте інші плагіни для конвертації форматів.
   Якщо ви знову активуєте заміну Plus WebP і дозволите ShortPixel створювати/додавати теги наступного покоління, логіка буде накладатися, і пошук помилок стане складнішим. У випадку варіанту B ShortPixel буде відповідати за це самостійно.
3. Думав, що якщо це встановлено, то “фронт-енд обов'язково видаватиме WebP/AVIF”.”
   Сторінка плагіна ShortPixelЗгадується, що він може конвертувати WebP/AVIF і додавати зображення наступного покоління на передню сторінку (наприклад, за допомогою тегів).
   Але після завершення все одно потрібно перевірити результат.

---

3.2.2 ІмаджифайБезкоштовно 20 МБ/місяць; квота витрачається відповідно до “розміру оригінальної фотографії + кількості мініатюр”, а повторне стиснення призводить до повторного витрачання квоти.

Безкоштовний ліміт та геолокація

Офіційна сторінка цін на Imagify.Написано дуже чітко:Безкоштовний акаунт має щомісячний ліміт у 20 МБ.。
На сторінці плагіна також чітко зазначено, що він може стискати, змінювати розмір і конвертувати файли у формати WebP/AVIF.

Як віднімаються квоти?

Офіційна документація Imagify “Як розраховується використання квоти?”. Механізм стягування платежів пояснено дуже докладно:

• Кількість мініатюр впливає на обсяг споживання.Наприклад, якщо у вас є 10 мініатюр, а ви оптимізуєте 1 зображення, це призведе до оптимізації 11 зображень (оригінальне зображення + 10 мініатюр), і всі вони враховуватимуться при витраті квоти.
• Зменшити квоту відповідно до розміру оригінального файлу.Наприклад, якщо ви надішлете зображення розміром 100 КБ у Imagify, то 100 КБ буде вираховано з вашого ліміту.
• Зміна рівня стиснення та повторна оптимізація знову витратять квоту.。
• Один і той же ключ API можна використовувати на декількох сайтах, але квоти будуть розподілені між цими сайтами.

Ось і є “основний принцип роботи” Imagify:
Це більше схоже на пакети трафіку: ви відправляєте стільки, скільки вони забере; чим більше мініатюр, тим більше вони забере; якщо ви натискатимете кілька разів, вони будуть знову і знову витрачати трафік.

Зрозумілий приклад квот для Imagify.

Припустімо, що ви завантажили оригінальне зображення розміром 800 КБ, і сайт створив для нього 8 мініатюр.

• При оптимізації Imagify включає “оригінальне зображення + 8 мініатюр” (якщо ви виберете оптимізацію всіх файлів), а це означає, що ця операція витратить квоту, близьку до “сукупного розміру всіх цих файлів у вихідному форматі”.
  Ось чому деякі сайти вважають, що “20 МБ закінчуються дуже швидко”: не тому, що Imagify недостатньо хороший, а тому, що ви завантажуєте занадто великі зображення, створюєте занадто багато мініатюр і, можливо, навіть неодноразово налаштовуєте рівень стиснення.

Найчастіші проблеми з Imagify

1. Безкоштовних 20 МБ недостатньо для “очищення історії всього сайту”.”
   20 МБ зазвичай підійде для тестування та невеликих оновлень; якщо ваша медіатека вже велика, очищення її за один раз швидше за все вимагатиме оновлення.
2. Постійне коригування рівня стиснення призводить до повторного витрачання квоти.
   Імаджифай чітко заявляє:Повторна оптимізація знову витратить квоту.
   Я рекомендую вам чітко описати “стратегію” на цій сторінці:

• Спочатку визначте рівень стиснення та зовнішній вигляд, використавши невелику кількість зображень.
• Визначте стратегію, а потім запустіть її у масовому режимі.
  Уникайте постійних спроб і помилок на всьому об'ємі даних.

3. Використання одного API-ключа для декількох сайтів призводить до того, що квота “несподівано зменшується”.”
   Якщо ви використовуєте один і той же ключ API на декількох сайтах, квоти будуть спільними.
   Тому в командних/багатостанційних сценаріях краще чітко визначити, які станції використовуються спільно, а які — окремо, щоб уникнути неконтрольованих витрат.

---

3.2.3 TinyPNG(Tiny Compress Images): безкоштовно 500 кредитів на місяць; конвертація у WebP/AVIF коштує “1 кредит за кожен розмір”.”

Безкоштовний ліміт та його принцип тарифікації.

Сторінка плагіна TinyPNG для WordPress написана дуже чітко:

• 500 кредитів на місяць безкоштовно.
• У “звичайній установці WordPress” це можна зробити, натиснувши "Компресія". Близько 100 зображень на місяць.
• Але якщо увімкнути конвертацію в AVIF або WebP:Кожне зображення розміром більше стандартного витрачає додатковий кредит.Таким чином, ймовірно, його можна лише стиснути та перетворити. Приблизно 50 зображень на місяць.(Це залежить від того, скільки мініатюрних зображень у вас є).

У той же час, Tinify (розробник TinyPNG/TinyJPG) також у своєму Сторінка з цінами на APIЗверніть увагу: після реєстрації ви отримуєте 500 безкоштовних скриптів на місяць; за кожен додатковий скрипт стягується плата, а підписка не є обов'язковою.

У двох словах, ось як TinyPNG розуміє ситуацію:
Він обчислюється в кредитах; чим більший розмір мініатюр і чим більше ви використовуєте WebP/AVIF, тим швидше ви витратите кредити.

Зрозумілий приклад кредитів TinyPNG.

Припустімо, що ваш сайт створює 8 мініатюр для кожного зображення:

• Тільки стиснення: оригінальне зображення + 8 мініатюр → потрібно 9 кредитів.
• Якщо увімкнено конвертацію у WebP/AVIF: за кожен розмір додатково витрачається один кредит → це може призвести до майже подвоєння витрат
  Це відповідає поясненню на сторінці плагіна: після включення конвертації безкоштовний ліміт змінюється з “100 сторінок на місяць” на “50 сторінок на місяць”.

Найпоширеніші проблеми з TinyPNG

1. Я думав, що 500 кредитів = 500 фотографій.
   Ні. Він витрачається залежно від “розміру зображення/варіанту”. На сторінці плагіна чітко зазначено, що “конвертація коштує 1 кредит за кожен розмір зображення”.
2. Тема/плагін електронної комерції створює занадто багато розмірів, і безкоштовний ліміт значно зменшився.
   Чим більший розмір, тим легше кредити можуть бути витрачені надто швидко.
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 дозволяють обробляти файли пакетами. Головне — зрозуміти механізм лімітів і заздалегідь оцінити витрати.
• Варіант А теж можливий, але слід обережно ставитися до функції Plus WebP “заміна ID/видалення оригінального зображення/заміна URL”: це є переміщенням ресурсів, і не рекомендується замінювати їх усі відразу.

4.3 Портфоліо/фотогалерея (вимоги до якості окремих фотографій, великий розмір зображень, високі вимоги до естетичності)

Рекомендації щодо пріоритетів:

1. Стратегія розмірів (контроль області відображення)
2. Стратегія стиснення (краще мати більший розмір, ніж втратити деталі).
3. ВебП/АВІФ (переваги очевидні для великих зображень, але потрібно перевірити їх якість відображення).

Більш підходящий маршрут:

• ІмаджифайЯкщо ви використовуєте параметр “Розмір оригіналу”, такі сайти легше контролювати в плані бюджету (ви знаєте, скільки приблизно буде стягуватися за кожне велике зображення), але слід уникати повторного завантаження одних і тих самих зображень.
• СhortPixelЯкщо розмір мініатюр невеликий, а кредити інтуїтивно зрозумілі; але якщо ви створюєте багато розмірів + наступне покоління, витрати на кредити збільшуються, тому потрібно заздалегідь це спланувати.

5. Порівняння лімітів/тарифів: детально поясніть, чи “безкоштовного достатньо”.

Який варіант вигідніший і наскільки довго він буде безкоштовним?

5.1 Три моделі тарифікації

• СhortPixel(кредити)Кредити нараховуються за “кількість оригінальних зображень і мініатюр”; створення файлів у форматах WebP/AVIF призводить до додаткового витрачання кредитів на кожну відповідну версію.
• Імаджифай(Квота МБ)Згідно з “Розміром оригінального файлу” витрачається квота; чим більше мініатюр, тим більше квота витрачається; повторне стискання знову витрачає квоту.
• TinyPNG(кредити)500 кредитів на місяць; використання конвертації у формат WebP/AVIF призведе до додаткового витрачання кредитів на кожен розмір зображення.

5.2. Метод швидкої оцінки.

Ви можете провести таку оцінку:

1. Візьміть будь-яке “оригінальне зображення”, яке ви часто завантажуєте, і подивіться, який у нього розмір (наприклад, 300 КБ / 1 МБ / 3 МБ).
2. Подивіться, скільки мініатюр різних розмірів створює ваш сайт (наприклад, 5, 10 або 20).
3. Вирішіть, чи хочете ви створити файл у форматі WebP/AVIF (так/ні).

А потім використайте наступні прийоми “ментальної арифметики”, щоб зрозуміти витрати:

• СhortPixelКожне зображення ≈ (1 + кількість мініатюр) кредитів; якщо створюється WebP/AVIF, кредити збільшуються вдвічі (оскільки версія наступного покоління теж вимагає кредитів).
• ІмаджифайКожен знімок приблизно дорівнює (розміру оригінального знімка + розміру всіх мініатюр). Обсяг квоти зменшується; повторне стиснення на новому рівні також зменшить обсяг квоти.
• TinyPNGБезкоштовно 500 кредитів; якщо ваш сайт створює багато зображень різних розмірів і активує конвертацію, кількість безкоштовних зображень значно зменшиться (на сторінці плагіна наведено орієнтовні очікування “близько 100 зображень на місяць” і “близько 50 зображень на місяць”).

6 ПОПЕРЕДЖЕННЯ ПРО РИЗИКИ

Ризик 1: не дозволяйте декільком плагінам робити одну і ту саму річ.

Це найпоширеніший “джерело катастроф”.”

• Маршрут А:Плюс WebP або AVIF + EWWW(Розподіліть обов'язки так, щоб не робити одночасно конвертацію та доставку одних і тих самих файлів, або встановіть тільки один з них.)
• Маршрут B: ShortPixel / Imagify / TinyPNG Виберіть один з трьох варіантів.(Виберіть того, хто відповідатиме за компресію та наступне покоління.)

Ризик 2: Функція “заміна ID/видалення оригінального зображення/заміна URL” у Plus WebP відноситься до переміщення активів.

Ще раз наголошую:Плюс WebP Опис чітко зазначає, що під час повного генерації буде перезаписано ідентифікатор оригінальної картинки, видалено оригінальний файл і замінено URL контенту.
Це означає, що це не “маленькі налаштування, які можна відмінити в будь-який час”, а зміна на рівні активів.

Рекомендована стратегія має бути такою:

• Спочатку проведіть невелике тестування (від десятків до сотень фотографій).
• Переконайтеся, що відображення на головній сторінці, мініатюри та оновлення кешу працюють нормально.
• Давайте розглянемо обробку всієї бази даних.

Ризик 3: фактичне використання “безкоштовного обсягу” хмарного сховища залежить від кількості мініатюр і вибору налаштувань наступного покоління.

• СhortPixelМініатюри та наступне покоління значно вплинуть на кредити.
• TinyPNGУвімкнення WebP/AVIF призведе до додаткового витрачання кредитів на кожен розмір зображення.
• ІмаджифайЦе стягується відповідно до розміру оригінальної картинки. Чим більше мініатюр, тим більше стягується. Повторне стиснення призведе до повторного стягування.

Ризик 4: “Створення WebP/AVIF” не означає, що “WebP/AVIF надається на передньому плані”.”

Після конвертації багато людей відчувають, що “нічого не змінилося”, тому що веб-інтерфейс все ще видає JPG/PNG (неправильна настройка кешування/перезапису/тегів/переговорів з браузером тощо).

7 Як перевірити, чи це спрацювало?

4 дуже прості точки перевірки:

1. Після другого оновлення тієї самої сторінки, чи завантажується вона стабільніше і швидше?(Відчуття того, чи працюють кешування та оптимізація)
2. Чи є істотна різниця у розмірах зображень, які завантажуються на мобільні пристрої та настільні комп'ютери?(Реактивний) srcset/sizes Чи це спрацювало?
3. Перевіримо кілька зображень: чи є там файли/ресурси у форматах WebP або AVIF?(Чи справді сайт використовує це?) Наступне покоління.）
4. Перевірте кілька зображень: збільште їх, щоб переконатися, що вони не розмиті, а текст не виглядає нерозбірливим.(Чи є якість стиснення занадто високою?)

Якщо всі чотири умови виконано, це означає, що обраний вами маршрут вже працює. Далі просто продовжуйте роботу. CDN “рівень доставки”Таким чином, все буде стабільніше.

8. Пропозиції щодо дій

1. Спочатку виберіть маршрут:

• Я хочу це зробити якомога безкоштовніше.А також WebP або AVIF + EWWW (або встановіть лише один з них)
• Ви хочете заощадити ресурси сервера та спростити процес оплати відповідно до витрачених обсягів.Виберіть один з трьох: ShortPixel, Imagify або TinyPNG.

2. Спочатку проведіть невеликий тест (декілька десятків фотографій).
3. Переконайтеся, що все в порядку, перш ніж робити масове замовлення.
4. Необхідно далі підвищувати стабільність поставок:Читання Акселерація CDN

загальні проблеми

1. Скільки плагінів мені потрібно встановити? Чи можна встановити їх усі?

Наскільки це можливо, намагайтеся дотримуватися лише одного маршруту.

• Маршрут А: Plus WebP або AVIF + EWWW Image Optimizer (або встановіть лише один з них)
• Маршрут B: виберіть один з трьох варіантів: ShortPixel, Imagify або TinyPNG.
  Якщо декілька плагінів одночасно виконують операції “стиснення/перетворення у WebP/AVIF/зміна URL/перезавантаження”, це може призвести до хаосу та ускладнити пошук і усунення проблем.

2. Хіба Вордпресс вже не підтримує WebP/AVIF? Чи мені все-таки потрібен плагін?

Необхідно розрізняти:
“Підтримка завантаження/використання” ≠ “автоматичне перетворення/автоматична доставка”.
WordPress 6.5 також не буде автоматично перетворювати старі JPG/PNG-файли на WebP/AVIF і не допоможе вам створити повний ланцюжок “виведення AVIF/WebP відповідно до можливостей браузера та переходу назад”. Щоб історична медіатека теж була сумісна, зазвичай потрібно встановити плагін або скористатися сторонніми послугами.

3. Який крок у процесі оптимізації зображень є найбільш ефективним?

Зазвичай це... Найперше, правильно встановіть “розміри” (srcset/sizes).。
Часто сторінки завантажуються повільно не через те, що вони не стиснуті, а тому, що сторінка відображає лише 900 пікселів, але користувачам доводиться завантажувати оригінальне зображення розміром 3000 пікселів. Стиснення може заощадити кілька кілобайтів, але “неправильний розмір” змусить вас завантажувати в кілька разів більше даних.

4. Як я можу переконатися, що зараз завантажується не “менша фотографія”, а оригінальне зображення?

Розгляньмо два явища:

• Коли сторінка відкривається на телефоні, розмір завантажених зображень значно менший, ніж на настільному комп'ютері.
• Розмір ресурсів, завантажених для одного і того ж зображення на різних пристроях, відрізняється.
  Якщо ви завжди завантажуєте оригінальні зображення, це часто означає, що тема або конструктор використовують зображення в якості фону CSS або для власної візуалізації, обходячи функції мультирозмірності та srcset у медіатеці.

5. Чи означає “створено WebP/AVIF”, що на передньому плані обов'язково виводиться WebP/AVIF?

Не рівне.
Генерація — це лише завершення “файлового рівня”; чи справді веб-сторінка надає WebP/AVIF, залежить від перезапису, стратегії тега , того, чи потрапило зображення до кеша, чи спрацював механізм переговорів браузера тощо. Після завершення роботи обов’язково перевірте тип ресурсів кількох зображень.

6. А в чому полягає небезпека WebP або AVIF? Чи можу я застосувати їх до всієї бібліотеки за один клік?

Його ризик полягає не в “стисканні”, а в чомусь іншому.Зміни на рівні переміщення активів.：

• При повному генераванні можуть бути перезаписані ідентифікатори оригінальних файлів із зображеннями, видалені оригінальні файли та замінені URL-адреси у контенті.
  Отже,Не рекомендується замінювати всю базу даних відразу.Спочатку проведіть тестування в невеликому масштабі (від декількох десятків до кількох сотень записів) + переконайтеся, що є доступна резервна копія, а потім вже думайте про обробку всієї бази даних.

7. Як вибрати один з двох режимів WebP: зберегти оригінальне зображення чи замінити та видалити оригінальне зображення?

У спрощеному розумінні:

• Модель 1: зберегти оригінальне зображення + створити копію у форматі WebP/AVIF (надійніше)Зручно відміняти зміни, але розмір диска збільшиться (оригінальне зображення + новий формат + мініатюри різних розмірів).
• Модель 2: заміна та видалення оригінальної картинки (більш радикально)Диски не схильні до розширення, але якщо ви зміните активи або посилання, витрати на усунення проблем із сумісністю будуть значно вищими.
  Чим складніший сайт (електронна комерція/багато плагінів/різні розміри), тим більше рекомендується почати з більш стабільної платформи.

8. Чи достатньо безкоштовного локального стискання зображень EWWW Image Optimizer? Чи не перевантажить це сервер?

EWWW більше схожий на “компресор, який працює локально”: він споживає ЦП та ІО.
Часто під час оптимізації в обсязі спостерігається підвищення навантаження. Це не означає, що система “не працює”, просто необхідно правильно вибрати стратегію: розділити завдання на партії, перенести їх на час мінімального навантаження або, за необхідності, перейти на хмарні рішення.
Якщо ви прагнете до простоти або якщо ресурси сервера обмежені, варіант B вимагає менше серверних ресурсів.

9. 100 безкоштовних кредитів від ShortPixel на місяць. Чому мені здається, що їх недостатньо для декількох зображень?

Оскільки Кредити — це не “кількість зображень”.”Вони будуть зменшені до мініатюр і збільшені до розміру наступного покоління:

• Оригінальне зображення + кожен мініатюрний знімок вважаються авторським правом.
• Якщо створювати WebP/AVIF, кожна відповідна версія також витратить додаткові кредити.
  Отже, ви думаєте, що “1 зображення”, ймовірно, фактично витратить близько “2-х десятків кредитів”. ShortPixel

10. Чому безкоштовний ліміт у 20 МБ на місяць у Imagify так швидко вичерпується?

Імаджифай більше схожий на “пакет даних”:

• Згідно з тим, що ви надіслали.Розмір оригінального файлу.Зменшення квоти
• Чим більше мініатюр, тим більше ресурсів вони споживають.
• Зміна рівня стиснення та повторна оптимізація призведе до нового витрачання квоти.
• Один і той же ключ API можна використовувати на декількох сайтах, а квоти будуть спільними.
  Отже, “20 МБ швидко закінчуються” часто є наслідком того, що зображення занадто великі, містить забагато мініатюр або через постійні спроби виправити помилки.

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

Оскільки кредити TinyPNG також збільшуються залежно від “розміру/варіанту”:

• Звичайна установка WordPress стискає приблизно 100 зображень на місяць.
• Увімкніть конвертацію в AVIF або WebP:Кожне зображення розміром більше стандартного витрачає додатковий кредит.Отже, ймовірно, можна буде стиснути та перетворити лише близько 50 зображень на місяць (залежно від розміру та кількості мініатюр).
  Отже, 500 кредитів не дорівнюють 500 зображенням.

12. Скільки взагалі мініатюр на моєму сайті? Чому вони мають такий великий вплив?

Коли ви завантажуєте зображення на WordPress, воно створюється у декількох розмірах; теми/плагіни (особливо для електронної комерції) можуть додати ще більше розмірів.
Кредити/квоти для хмарного зберігання зазвичай розраховуються за принципом “один файл + мініатюра”, тому чим більше мініатюр, тим швидше вичерпається безкоштовний ліміт.

13 Чи справді ліниве завантаження завжди прискорює роботу? Чому хтось каже, що ліниве завантаження навпаки сповільнює роботу?

Ліниве завантаження підходить для “ресурсів за межами екрана”.
Якщо навіть головне зображення на першому екрані завантажується із затримкою, це може погіршити враження від першого екрану. У WordPress 5.5 та наступних версіях ліниве завантаження працює нормально, але не варто застосовувати його універсально.

14. Якщо я виберу маршрут А або Б, коли мені знадобиться CDN / CDN для зображень?

Стиснення, розмір та формат забезпечують те, що “файл стає меншим і зручнішим”.
CDN вирішує проблему доставки контенту ближче і стабільніше.。
Коли зображення завантажуються з віддаленого сервера, що призводить до помітної затримки, краще використовувати CDN/CDN для зображень (наприклад, Cloudflare Polish або Jetpack Site Accelerator), що забезпечить більш стабільну роботу. Акселерація CDN у WordPress。

15. Після завершення, як я можу найпростішим способом перевірити, чи це справді працює?

Найбільш швидкий спосіб перевірки:

• Після другого оновлення тієї самої сторінки, чи завантажується вона стабільніше і швидше?
• Чи є істотна різниця у розмірах зображень, що завантажуються на мобільні пристрої та настільні комп'ютери (чи працюють srcset/sizes)?
• Перевіримо кілька зображень: чи є там файли/ресурси у форматах WebP або AVIF?
• Перевірте кілька зображень: збільште їх, щоб переконатися, що вони не розмиті, а текст не виглядає нерозбірливим.