Оптимізація зображень веб-сайту

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

Але оптимізація зображень - це також найпростіший спосіб внести безлад не тому, що вона технічно надто складна, а тому, що інформація надто фрагментована:
Ви прочитали кілька статей, знаєте, що таке “стиснення”, “WebP/AVIF”, “ліниве завантаження”, а потім дивитеся на вступ до плагіна, де написано “безкоштовно щомісяця! 100 кредитів на місяць”, “Безкоштовно 20MB”, “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).
• Підтримка завантаження AVIFWordPress 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/Image CDN).

Два типових напрямки:

• Cloudflare польська：Документація CloudflareПредставлено польські методи стиснення (lossless/lossy/WebP), а також зазначено, що стиснення з використанням format=auto Допускається формат WebP/AVIF.
• Jetpack Site Accelerator：Документація до реактивного ранцяПоясніть, що він буде оптимізувати зображення і поширювати їх через свою мережу разом зі статичними ресурсами.

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

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

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

Правила:

Існує лише один шлях: або все безкоштовне локальне, або хмарне стиснення всіх трьох.

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

---

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

Цей маршрут характеризується тим, що:

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

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

• При створенні повнооб'ємних зображень:Ідентифікатор оригінального файлу зображення замінюється на 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 у маршруті А?

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

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

Типова яма EWWW

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

---

3.2 Маршрут B: Потрійний вибір хмарного стиснення (ShortPixel / Imagify / TinyPNG)

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

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

---

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

Що відбувається з безкоштовним/платним

В описі плагіна ShortPixel чітко вказано:

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

Порада:

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

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

Підсумок: як розраховуються кредити ShortPixel?

Офіційна документація ShortPixel КБ був дуже грубим:

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

Приклад кредитів：

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

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

Отже:“Безкоштовні 100 кредитів” - це не те саме, що “безкоштовні 100 зображень”.

Найпоширеніші пастки ShortPixel

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

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

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

---

3.2.2 Уявіть собіБезкоштовно: 20MB/місяць; квота вираховується відповідно до “розмір оригінального зображення + кількість мініатюр”, повторні вирахування будуть зроблені за повторний друк.

Вільна кількість та позиціонування

Уявіть собі офіційну сторінку з цінамиНаписане зрозуміло:Безкоштовний обліковий запис Щомісячна квота 20MB。
На сторінці плагіна також чітко вказано, що він може стискати, змінювати розмір і конвертувати WebP/AVIF.

Як вираховується квота?

Уявіть офіційну документацію “Як розраховується використання квоти?” дуже чітко пояснює механізм відрахувань:

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

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

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

Скажімо, ви завантажуєте оригінальне зображення розміром 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:Кожен розмір зображення споживає додатковий кредитТож, імовірно, його можна лише стиснути та перетворити Приблизно 50 зображень на місяць(залежно від того, скільки розмірів мініатюр у вас є).

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

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

Зручні для читання приклади кредитів TinyPNG

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

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

Найпоширеніші підводні камені TinyPNG

1. Я думав, що 500 кредитів = 500 зображень
   Це не так. Його споживає “розмір/варіант зображення”. На сторінці плагіна чітко вказано, що “Конверсії віднімають додатково 1 кредит за кожен розмір зображення”.
2. Теми/плагіни для електронної комерції створюють занадто великі розміри, а кількість безкоштовних кредитів значно зменшується
   Чим більше розмірів, тим легше масштабувати та використовувати кредити.
3. Після ввімкнення конвертації ви виявляєте, що кредити раптом виявилися невикористаними.
   Це не баг, це механізм виставлення рахунків.
   Стратегічні поради:

• Якщо безкоштовна фаза в основному використовується для стиснення і зменшення ваги, ви можете почати тільки зі стиснення, а потім включити конверсію, коли будете впевнені, що структура вашого сайту стабільна і вам дійсно потрібен next-gen.

4. рекомендації для підсценаріїв: як вибрати різні типи ділянок

Крім того, WordPress, контент-сайти, сайти електронної комерції, портфоліо та членські сайти не мають однакових “точок тиску” для зображень.

4.1 Контентні сайти/блоги (багато графіки в статтях, середня частота оновлень)

Пріоритетні рекомендації:

1. Стратегія визначення розміру (Крок 1)
2. Стиснення (Крок 2)
3. WebP (Крок 3)

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

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

Типова яма:

• Перше зображення сторінки статті дуже велике, неправильна стратегія лінивого завантаженняУповільнює перший екран

4.2 Сайт електронної комерції/товарний сайт (багато мініатюр, багато варіантів зображень, стабільність на першому місці)

В електронній комерції, швидше за все, проблема не в тому, що “ефект стиснення поганий”, а в тому, що “оптимізовані деякі розміри неправильно, відсутні мініатюри, передні компоненти не можуть отримати картинку”.

Пріоритетні рекомендації:

1. Стабільність понад усе: консервативна стратегія стиснення, не робіть повну заміну бібліотеки одразу
2. Оцінка розмірів мініатюр: теми електронної комерції зазвичай генерують більші розміри, і споживання обсягу збільшується (ShortPixel/TinyPNG особливо помітно)
3. Проведіть невелику валідацію перед запуском партії (дуже важливо)

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

• Шлях B, як правило, більш безпроблемний: ShortPixel/Imagify/TinyPNG можуть працювати з пакетами, і дуже важливо, щоб ви розуміли механізм квотування та заздалегідь оцінювали вартість.
• Шлях A підходить, але будьте обережнішими з поведінкою Plus WebP “перезаписати ідентифікатори/видалити оригінальні зображення/замінити URL-адреси”: це міграція ресурсів, і не рекомендується замінювати все одразу.

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

Пріоритетні рекомендації:

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

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

• Уявіть собіВідраховуйте квоту відповідно до “розміру оригінального зображення”, такий сайт легше зробити “бюджетно-контрольованим” (ви знаєте, скільки відраховувати за кожне велике зображення), але при цьому уникайте повторних репресій.
• ShortPixelЯкщо розмір мініатюри невеликий, кредити також дуже інтуїтивно зрозумілі; але якщо ви генеруєте багато розмірів + next-gen, витрата кредитів збільшиться, і вам потрібно планувати заздалегідь.

5. порівняння квот і тарифікації: “безкоштовного не достатньо” в перспективі

Яка з них краща і як довго триватиме безкоштовна пропозиція?

5.1 Три моделі повернення платежів

• ShortPixel(титри)Кредити нараховуються за формулою “оригінальне зображення + кількість мініатюр”; додаткові кредити будуть вираховуватися за кожну відповідну версію створеного WebP/AVIF.
• Уявіть собі(квота MB)Віднімається квота відповідно до “початкового розміру файлу”; чим більше мініатюр, тим більше відрахувань; повторне натискання призведе до повторного відрахування.
• TinyPNG(титри)500 кредитів на місяць; якщо ви ввімкнули конвертацію WebP/AVIF, то за кожен розмір зображення вираховуються додаткові кредити.

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

Ви можете оцінити це так:

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

Тоді використовуйте наступну “ментальну математику”, щоб зрозуміти споживання:

• ShortPixel≈ (1 + кількість мініатюр) кредитів на зображення; якщо генерується WebP/AVIF, ≈ знову подвоюється (оскільки версія наступного покоління також зараховує кредити)
• Уявіть собіДля кожного зображення ≈ (розмір оригіналу + розмір кожної мініатюри) віднімається квота; зміна рівня стиснення і повторне стиснення знову призведе до віднімання квоти.
• TinyPNG500 кредитів безкоштовно; якщо ваш сайт генерує багато зображень різного розміру, а конвертація увімкнена, кількість безкоштовних кредитів значно зменшується (на сторінці плагіна вказано візуальне очікування “~100 кредитів/місяць” проти “~50 кредитів/місяць”).

6. попередження про ризики

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

Це найпоширеніше “джерело лиха”.”

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

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

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

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

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

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

• ShortPixel: Ескізи та наступне покоління суттєво впливають на титри.
• 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. скільки плагінів потрібно встановити? Чи можу я встановити їх усі?

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

• Шлях A: Плюс WebP або AVIF + EWWW оптимізатор зображень (або тільки один з них)
• Маршрут B: ShortPixel / Imagify / TinyPNG - оберіть один!
  На одній і тій же станції одночасно запускається більше одного плагіна для “стиснення / передачі WebP / AVIF / зміни URL / перезапису доставки”, що, швидше за все, призведе до все більшого хаосу, але також і до того, що його буде найважче перевіряти.

2. хіба WordPress вже не підтримує 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. який вибір між двома режимами Plus WebP: зберегти оригінальне зображення чи замінити і видалити оригінальне зображення?

Простий для розуміння:

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

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

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

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

через титри - це не “кількість фотографій”.”Наступне покоління буде збільшено за допомогою мініатюри з наступним поколінням:

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

10. 20MB на місяць у Imagify безкоштовний, чому він також швидко закінчується?

Imagify більше схожий на “пакет трафіку”:

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

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

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

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

12. скільки мініатюр на моєму сайті? Чому це так важливо?

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

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

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

14. я їду за маршрутом A або B. Коли мені потрібен CDN / Зображення CDN?

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

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

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

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