Зображення зазвичай становлять найбільшу частку “ваги” сторінки — часто понад половину загального обсягу даних, які завантажує браузер відвідувача. Одна нестиснута фотографія з телефону в кілька мегабайт може звести нанівець усі інші зусилля зі швидкості сайту. При цьому оптимізація зображень — одна з найпростіших дій з погляду складності виконання: більшість кроків не вимагають технічних навичок, лише послідовності.
У цьому гайді — які формати обирати, як стискати зображення без втрати якості, що таке lazy loading, як правильно писати alt-текст і на що звертати увагу при експорті зображень, згенерованих у Leonardo AI.
Зміст статті
- Навіщо оптимізувати зображення
- Формати зображень: JPEG, PNG, WebP, AVIF
- Стиснення: інструменти і різниця lossy/lossless
- Розміри і коректні width/height
- Lazy loading: що це і як увімкнути
- Alt-текст: як писати правильно
- Іменування файлів зображень
- Особливості для зображень, згенерованих у Leonardo AI
- Пріоритети оптимізації залежно від типу сайту
- Кому це критично, а кому менш
- Порівняння форматів зображень
- Аудит зображень на сайті за кроками
- Плюси і мінуси ручної оптимізації
- Часті запитання
Швидкий чекліст оптимізації зображення перед публікацією
- Формат — WebP (або AVIF, якщо підтримка теми дозволяє)
- Файл стиснутий, розмір не перевищує 150–300 КБ для типового зображення статті
- Заповнено alt-текст, що описує зміст зображення
- Файл названий описово, а не як IMG_1234.png
- Задано ширину і висоту, щоб уникнути зсуву макета (CLS)
Навіщо оптимізувати зображення
Оптимізація зображень впливає на сайт одразу в кількох площинах. По-перше, це швидкість завантаження — важкі зображення напряму погіршують показник LCP (Largest Contentful Paint) з Core Web Vitals, детально розібраний у статті “Швидкість сайту: як прискорити”. По-друге, це витрати місця на хостингу — на тарифах з обмеженим дисковим простором накопичення нестиснутих файлів швидше вичерпує ліміт. По-третє, alt-текст зображень впливає на доступність сайту для людей, які використовують програми озвучення екрана, а також дає Google додатковий контекст про зміст сторінки — зображення можуть самостійно приводити трафік через пошук Google Images.
Формати зображень: JPEG, PNG, WebP, AVIF
JPEG
Класичний формат для фотографій і складних зображень з великою кількістю кольорів. Добре стискається, але при агресивному стисненні втрачає якість (з’являються артефакти).
PNG
Підтримує прозорість фону, ідеальний для логотипів, іконок та графіки з чіткими краями, але значно важчий за JPEG для фотографій — тому не варто використовувати PNG для звичайних фото.
WebP
Сучасний формат від Google, який дає на 25–35% менший розмір файлу порівняно з JPEG чи PNG за візуально однакової якості, і при цьому підтримує прозорість, як PNG. WebP підтримується всіма сучасними браузерами і є оптимальним вибором за замовчуванням для більшості зображень на сайті.
AVIF
Ще новіший формат, який дає ще кращу компресію, ніж WebP, але підтримка в деяких старих браузерах і плагінах поки що обмеженіша. Для більшості сайтів WebP залишається практичнішим стандартним вибором на 2026 рік, а AVIF варто розглядати як додаткову оптимізацію для сайтів з дуже великою кількістю важкого візуального контенту.
Стиснення: інструменти і різниця lossy/lossless
Стиснення без втрат (lossless) зменшує розмір файлу, видаляючи зайві метадані та технічну інформацію, без будь-якого впливу на видиму якість зображення. Стиснення з втратами (lossy) додатково зменшує розмір, жертвуючи частиною деталізації — але за помірного рівня стиснення (70–85% якості) різниця для людського ока практично непомітна, тоді як розмір файлу може скоротитись у кілька разів.
- Squoosh (безкоштовно, онлайн) — інструмент від Google для ручного порівняння якості до і після стиснення в реальному часі, зручний для точкового контролю окремих зображень.
- TinyPNG / TinyJPG (безкоштовно з лімітом) — швидке пакетне стиснення без глибокого налаштування параметрів.
- Плагіни для WordPress (ShortPixel, Imagify, або вбудований оптимізатор LiteSpeed Cache) — автоматично стискають кожне зображення одразу при завантаженні в медіатеку, що зручно для регулярної роботи без ручного кроку “стиснути перед завантаженням”.
Розміри і коректні width/height
Окрім ваги файлу, важливий фізичний розмір зображення в пікселях — немає сенсу завантажувати зображення шириною 4000 пікселів, якщо на сторінці воно відображається шириною 800 пікселів: браузер все одно завантажить весь файл повністю, а потім стисне його візуально, витрачаючи зайвий трафік і час. Перед завантаженням варто змінювати розмір зображення під реальні максимальні розміри блоку, де воно використовується на сайті.
Окремо важливо явно задавати атрибути width і height (або відповідні стилі) для кожного зображення — це дозволяє браузеру одразу зарезервувати місце під зображення ще до його завантаження, запобігаючи раптовому “стрибку” тексту й елементів навколо, коли картинка нарешті з’являється. Це напряму впливає на показник CLS з Core Web Vitals.
Lazy loading: що це і як увімкнути
Lazy loading (відкладене завантаження) — техніка, за якої зображення, що знаходяться поза видимою областю екрана (нижче першого екрана), завантажуються лише тоді, коли користувач прокручує сторінку до них, а не одразу при відкритті сторінки. Це суттєво прискорює початкове завантаження, особливо для довгих статей із багатьма ілюстраціями.
У сучасному WordPress lazy loading вже увімкнено за замовчуванням для зображень у контенті (атрибут loading="lazy" додається автоматично), а плагіни кешування на кшталт LiteSpeed Cache додатково розширюють цю функцію, зокрема на фонові зображення, задані через CSS, які браузер за замовчуванням не відкладає.
Alt-текст: як писати правильно
Alt-текст (альтернативний текст) — короткий опис зображення, який показується, якщо файл не завантажився, озвучується програмами для людей з порушеннями зору, і використовується Google для розуміння змісту картинки.
- Описуйте конкретно, а не узагальнено. “Інтерфейс панелі керування хостингом Hostinger з розділом доменів” краще за просто “скріншот” чи “зображення”.
- Не переспамлюйте ключовими словами. Alt-текст — не місце для механічного втискування всіх можливих ключів, це знижує довіру і виглядає як маніпуляція.
- Не залишайте порожнім без причини. Порожній alt (
alt="") допустимий лише для суто декоративних зображень, які не несуть смислового навантаження (наприклад, орнаментальні розділювачі). - Пишіть природною мовою. Alt-текст читають реальні люди через програми озвучення — він має бути зрозумілим реченням, а не набором слів через кому.
Іменування файлів зображень
Назва файлу зображення — ще один невеликий, але легкий у виконанні сигнал для SEO. Замість автоматичної назви на кшталт IMG_20260719_143022.jpg варто перейменувати файл на щось описове й пов’язане з темою, наприклад hostinger-panel-upravlinnya.webp. Це коректно розпізнається і Google Images, і допомагає впорядкувати власну медіатеку сайту, коли файлів накопичуються сотні.
Особливості для зображень, згенерованих у Leonardo AI
Для ілюстрацій, які створюються в Leonardo AI (модель Lucid Origin, стиль 3D Render, як прийнято для HostGid), варто дотримуватись кількох практичних моментів безпосередньо перед завантаженням на сайт:
- Експортуйте зображення в найвищій доступній якості з Leonardo, а стиснення виконуйте окремо через Squoosh або плагін — так зберігається контроль над фінальним балансом якість/вага.
- Перед завантаженням у медіатеку WordPress конвертуйте файл у WebP — Leonardo за замовчуванням віддає PNG або JPEG, які значно важчі за еквівалентний WebP.
- Обрізайте зображення під реальні пропорції блоку на сторінці (наприклад, широкий формат 16:9 для головної ілюстрації статті) замість завантаження квадратного оригіналу з обрізкою вже засобами CSS.
- Alt-текст для згенерованих зображень пишіть так само змістовно, як і для реальних фото — опишіть, що саме зображено, а не вказуйте, що це AI-ілюстрація.
Для блогу / інформаційного сайту
Пріоритет — WebP-конвертація й alt-текст для кожної ілюстративної картинки в статтях, оскільки саме текстовий контент з ілюстраціями формує основний обсяг сайту.
Для інтернет-магазину
Критично важлива оптимізація фотографій товарів — часто десятки зображень на одну картку, тому автоматизація через плагін масового стиснення обов’язкова.
Для лендінгу / сайту послуг
Фокус на головному екрані (hero-зображенні) — саме воно найбільше впливає на LCP і перше враження відвідувача, тому заслуговує на найретельніше стиснення.
Кому це критично, а кому менш
Оптимізація зображень критично важлива для будь-якого сайту з візуальним контентом — це одна з небагатьох дій в SEO, яка дає майже гарантований результат за мінімальних зусиль, тому обмежень тут практично немає. Різниця хіба що в масштабі роботи: для сайту з десятками зображень (як HostGid) ручний процес цілком реалістичний, а для великого інтернет-магазину з тисячами товарних фото вручну стискати кожен файл нереалістично — там варто одразу автоматизувати процес через плагін пакетної оптимізації.
Порівняння форматів зображень
| Формат | Найкраще для | Прозорість | Типова вага |
|---|---|---|---|
| JPEG | Фотографії | Ні | Середня |
| PNG | Логотипи, іконки, графіка | Так | Висока |
| WebP | Універсальний вибір для сайту | Так | Низька (−25–35% від JPEG) |
| AVIF | Максимальна компресія за потреби | Так | Найнижча, обмежена сумісність |
Аудит зображень на сайті за кроками
Перевірте медіатеку на важкі файли
Відсортуйте зображення за розміром і знайдіть найважчі кандидати для оптимізації в першу чергу.
Сконвертуйте найважчі зображення у WebP
Почніть з тих, що використовуються на найвідвідуваніших сторінках сайту.
Встановіть плагін автоматичної оптимізації
Щоб нові зображення стискались одразу при завантаженні, без ручного кроку щоразу.
Перевірте наявність alt-тексту у всіх зображень
Заповніть пропущені описи, особливо для зображень у ключових статтях.
Перевірте коректність width/height атрибутів
Через PageSpeed Insights — інструмент прямо вказує, якщо зображення спричиняють зсув макета.
Виміряйте результат
Порівняйте показник LCP до і після оптимізації через PageSpeed Insights.
✓ Переваги ручної оптимізації
- Повний контроль над балансом якості й розміру файлу
- Безкоштовні інструменти покривають більшість потреб
- Швидкий і легко вимірюваний результат
- Одна з найпростіших дій в SEO для новачка
✕ Обмеження ручної оптимізації
- Займає час при великій кількості зображень без автоматизації
- Легко забути оптимізувати зображення в старих статтях заднім числом
- Потребує узгодженого підходу (єдиний формат, розмір), інакше сайт стає непослідовним
Часті запитання
Бажано, але не обов’язково робити це одномоментно — почніть з найважчих файлів на найвідвідуваніших сторінках, де ефект від оптимізації буде найпомітнішим, а решту можна конвертувати поступово в фоновому режимі, наприклад під час планового оновлення старих статей.
Прямого й потужного впливу на ранжування сторінки в цілому alt-текст не має, але він допомагає Google краще розуміти контекст сторінки і є прямим фактором для потрапляння зображень у видачу Google Images — окремий канал трафіку, який часто недооцінюють.
Жорсткого правила немає — орієнтуйтесь на реальну користь для читача: головна ілюстрація плюс 1–3 додаткові в ключових розділах довгої статті, як зроблено в статтях блоку SEO на HostGid. Головне — кожне зображення оптимізоване, а не кількість сама по собі.
Можна, але WebP теж підтримує прозорість і при цьому важить менше за еквівалентний PNG — тому для логотипів і графіки з прозорим фоном WebP залишається кращим вибором за замовчуванням, а PNG варто лишати лише для сумісності зі старими інструментами, які не підтримують WebP.
Так, оптимізація зображень — це насамперед питання швидкості завантаження сторінки для відвідувача, а не лише економії дискового простору на сервері. Навіть за необмеженого сховища важкі файли сповільнюють сайт і погіршують показники Core Web Vitals.
Це додаткова, але не обов’язкова оптимізація на старті. CDN прискорює доставку статичних файлів, включно із зображеннями, за рахунок географічно ближчих серверів, і особливо корисний для сайтів з міжнародною аудиторією — для сайту, орієнтованого переважно на Україну, ефект менш відчутний, хоча все одно позитивний.
Найімовірніше, застосовано занадто агресивний рівень стиснення. Спробуйте зменшити ступінь компресії (наприклад, до 80–85% якості замість мінімального значення) в інструменті стиснення — для більшості зображень різниця між 70% і 90% якості майже непомітна оку, але суттєво впливає на розмір файлу, тому варто знайти комфортний баланс, а не завжди обирати максимальне стиснення.
Налаштування Google Analytics (GA4) для сайту: покроковий гайд
Google Search Console показує, як Google бачить сайт ще до переходу відвідувача. Google Analytics показує, що відбувається вже після цього…
Google Search Console: перший гайд для новачків
Без Google Search Console власник сайту працює наосліп: пише статті, оптимізує швидкість, стежить за ключовими словами — але не бачить,…
Оптимізація зображень для сайту: формати, стиснення, alt-текст
Зображення зазвичай становлять найбільшу частку “ваги” сторінки — часто понад половину загального обсягу даних, які завантажує браузер відвідувача. Одна нестиснута…