Чому «важкі» зображення гальмують ваш сайт - і як це виправити

Коли власники бізнесу думають про причини поганих позицій у Google або низької конверсії, зображення рідко потрапляють у список підозрюваних. Увага зазвичай іде на контент, посилання, технічні теги. Але саме незоптимізовані фото нерідко виявляються тим невидимим гальмом, яке зводить нанівець всі інші зусилля. І виправити це простіше, ніж здається.

Одна секунда, яка коштує грошей

Є цифра, яка добре відрезвлює: затримка завантаження сторінки всього на одну секунду знижує конверсію в середньому на 7%. Не на частку відсотка - на сім відсотків. Для інтернет-магазину з щоденним трафіком це може означати десятки втрачених замовлень щомісяця.

Причина проста: користувач не чекає. Він відкрив сторінку, побачив, що вона «гальмує», і закрив її - навіть не давши вашому контенту шансу. І що важливо, Google це фіксує. Показник відмов зростає, час на сайті падає, а алгоритми пошукової системи роблять висновки про якість ресурсу. Позиції повзуть вниз, і жодна кількість ключових слів цього не компенсує.

Саме тому швидкість завантаження вже давно перестала бути суто технічним питанням - це питання бізнесу.

Core Web Vitals: як Google оцінює ваш сайт

Google ввів систему метрик Core Web Vitals, щоб оцінювати не просто факт завантаження сторінки, а реальний досвід користувача під час взаємодії з нею. І незоптимізовані зображення погано впливають одразу на кілька з них.

Перша метрика - LCP (Largest Contentful Paint). Вона вимірює, скільки часу потрібно, щоб завантажився найбільший видимий елемент сторінки. Найчастіше це головний банер, фото товару або фонове зображення. Якщо цей файл важить кілька мегабайт, LCP буде поганим - і Google це враховує при ранжуванні.

Друга - CLS (Cumulative Layout Shift). Вона відстежує, чи «стрибає» верстка під час завантаження: коли зображення з'являються повільно і зміщують текст, кнопки, інші елементи. Користувач натискає не туди, дратується і іде. Якщо у зображень не прописані розміри або вони завантажуються із затримкою - CLS неминуче постраждає.

Третя - INP (Interaction to Next Paint). Вона показує, як швидко сторінка реагує на дії користувача: натискання кнопки, прокручування, клік по меню. Перевантажені медіафайли займають пропускну здатність браузера і блокують його від швидкої реакції. Навіть якщо сторінка візуально «завантажилася», вона може ще кілька секунд залишатися «мертвою» для взаємодії.

Погані показники хоча б за однією з цих метрик - і сайт отримує мінус у пошуковій видачі. Навіть якщо решта SEO-роботи зроблена правильно.

Як виявити проблему до того, як це зробить конкурент

Добра новина: перевірити стан зображень на сайті можна безкоштовно і за кілька хвилин.

Найзручніший інструмент - Google PageSpeed Insights. Достатньо вставити URL сторінки, і сервіс видасть детальний звіт: які зображення надто важкі, які варто конвертувати в інший формат, скільки часу завантаження можна виграти після оптимізації. Зверніть увагу на розділ «Використовуйте зображення в сучасних форматах» і «Правильно масштабуйте зображення» - саме там ховаються найбільші резерви.

Якщо потрібен детальніший погляд, відкрийте Chrome DevTools (клавіша F12), перейдіть у вкладку Network, виберіть фільтр Img і оновіть сторінку. Ви побачите повний список зображень, які завантажив браузер, і реальний розмір кожного з них. Файли понад 300–500 КБ без вагомих причин - привід для оптимізації.

Який формат обрати: розбираємо без зайвого технічного жаргону

Питання формату зображень здається суто технічним, але насправді це одне з найважливіших рішень при підготовці контенту для сайту. Від нього залежить і якість картинки, і вага файлу, і сумісність з різними браузерами.

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

PNG - незамінний там, де потрібна чіткість і прозорість: логотипи, іконки, скриншоти інтерфейсів. Стиснення без втрат означає, що якість зображення не погіршується при збереженні. Але зворотній бік медалі - файли PNG значно важчі, ніж JPEG, тому використовувати цей формат для фотографій не варто.

WebP - сучасний формат, розроблений Google як відповідь на обмеження JPEG і PNG. Він підтримує і стиснення зі втратами, і без, а також прозорість. Головна перевага - значно менший розмір файлу при збережуваній візуальній якості. Порівняно з JPEG економія може складати 25–35%, порівняно з PNG - ще більше. Усі сучасні браузери вже давно підтримують WebP, тому для більшості сайтів це оптимальний вибір за замовчуванням.

AVIF - найновіший формат із ще кращим коефіцієнтом стиснення. Там, де WebP дає файл у 100 КБ, AVIF може дати 60–70 КБ при такій самій якості. Підтримка браузерів стрімко зростає, але ще не є повною, тому зараз AVIF найкраще використовувати як прогресивне доповнення: сучасні браузери отримують AVIF, решта - WebP або JPEG.

Оптимізація зображень: не просто «стиснути»

Часто оптимізацію зображень розуміють вузько - просто зменшити вагу файлу. Але насправді це комплексна робота, і кожен її крок важливий.

Перше, з чого варто починати - це фізичні розміри зображення. Якщо на сторінці картинка відображається шириною 800 пікселів, немає жодного сенсу зберігати файл розміром 3000×2000 px. Браузер все одно масштабує його до 800 px, але завантажує при цьому повний файл. Це чиста витрата ресурсів - і часу користувача, і пропускної здатності сервера.

Після того як розміри зменшено до реально потрібних, настає черга вибору формату і стиснення. Для фотографій оптимальна якість стиснення - в діапазоні 75–85%. При такому рівні різниця між оригіналом і стиснутим файлом практично непомітна людському оку, але розмір файлу зменшується суттєво. Порівняйте самі: банер у 2 МБ і той самий банер після правильної оптимізації у 180 КБ - а виглядають однаково.

Ще один недооцінений крок - видалення метаданих EXIF. Кожне фото, зроблене на смартфон або камеру, несе в собі приховані дані: GPS-координати, модель пристрою, налаштування зйомки, інформацію про авторські права і багато іншого. На сайті ці дані нікому не потрібні, але вагу файлу збільшують. Інструменти на кшталт ImageOptim видаляють їх автоматично.

Нарешті, не варто забувати про SEO-складову: назва файлу і alt-текст - це не формальність. Пошукові роботи не «бачать» зображення, але читають їх опис. Файл “IMG_4521.jpg” нічого не говорить алгоритму, тоді як “кухня-дизайн-мінімалізм.jpg” з відповідним alt-текстом - це додаткова точка входу з пошуку.

Інструменти, якими варто користуватися

Серед онлайн-інструментів для оптимізації зображень є кілька перевірених рішень, кожне зі своєю нішею.

Squoosh - безкоштовний інструмент від Google, який дозволяє порівняти оригінал і стиснуту версію в режимі реального часу, ще до завантаження файлу. Можна вибирати формат, регулювати рівень якості і одразу бачити, як це впливає на вагу. Ідеальний для вдумливої ручної обробки важливих зображень.

TinyPNG і TinyJPG - один сервіс під двома назвами, заточений під пакетну обробку. Завантажуєте десятки файлів одночасно, отримуєте стиснуті версії. Алгоритм працює добре, якість зберігається. Зручно, коли потрібно швидко обробити велику бібліотеку зображень.

Compressor.io відрізняється тим, що пропонує вибір між «агресивним» і «м'яким» стисненням. Якщо якість зображення критично важлива - наприклад, для портфоліо або каталогу товарів преміум-сегменту - цей інструмент дозволяє знайти тонший баланс між вагою і чіткістю.

ImageOptim - окремий додаток для Mac, який спеціалізується саме на «очищенні» файлів: видаляє метадані, зайві кольорові профілі та інші приховані дані, яких не видно, але які займають місце. Добре використовувати як фінальний крок перед публікацією.

Автоматизація для тих, хто не хоче думати про це щоразу

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

Для сайтів на WordPress існують плагіни, які вирішують це питання системно. Smush, Imagify і ShortPixel стискають зображення автоматично в момент завантаження - контент-менеджер просто додає фото в медіабібліотеку, а плагін сам конвертує, стискає і за потреби підміняє оригінал оптимізованою версією. Більшість із них також вміють обробити вже наявну бібліотеку медіафайлів у пакетному режимі.

Це не замінює повноцінного аудиту зображень, але гарантує, що нові матеріали не будуть псувати картину, яку вже виправили.

Помилки, які зводять нанівець всі зусилля

Навіть розуміючи важливість оптимізації, легко зробити кілька типових помилок.

Найпоширеніша - стискати вже стиснуте. Якщо взяти JPEG-файл, який вже пройшов компресію, і стиснути його ще раз, якість погіршиться, а суттєвого виграшу у вазі не буде. Завжди зберігайте оригінальні файли і оптимізуйте саме їх.

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

Третя - конвертація SVG у растр. Логотипи, іконки та іншу векторну графіку часто «на автопілоті» зберігають у PNG або JPEG. Але SVG-файли важать у рази менше, ідеально масштабуються на будь-яких екранах і виглядають чітко навіть на Retina-дисплеях. Якщо у вас є векторна графіка - залишайте її векторною.

І нарешті - завищена планка допустимого розміру. Іноді можна почути, що «до 2 МБ - це нормально». Це застарілий підхід. Для більшості зображень на сайті правильний орієнтир - 150–400 КБ. 2 МБ можна виправдати хіба що для одного великого hero-зображення на лендінгу, де якість візуально критична і більше нічого важкого на сторінці немає.

Оптимізація зображень - одна з тих задач, яка дає швидкий і вимірюваний результат. Після правильно проведеної роботи PageSpeed-показники зростають, сторінки відкриваються помітно швидше, а поведінкові метрики покращуються. Все це в підсумку відображається на позиціях у пошуку та кількості цільових дій на сайті.