Як оптимізувати зображення для швидших вебсайтів

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

Чому оптимізація зображень важлива для SEO

Google є однозначним: швидкість сторінки впливає на рейтинги. Їхня метрика Largest Contentful Paint (LCP) конкретно вимірює, наскільки швидко завантажується найбільший видимий елемент, яким майже завжди є зображення. Якщо ваш LCP перевищує 2,5 секунди, ви втрачаєте позиції рейтингу перед конкурентами з швидшими сайтами. Для електронної комерції Amazon виявив, що кожні 100 мс додаткового часу завантаження коштують їм 1% продажів.

Чотири стовпи оптимізації зображень

1. Обирайте правильний формат

Вибір формату є найбільшим фактором у розмірі файлу зображення:

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

2. Стискайте перед завантаженням

Кожне зображення потрібно стискати перед розміщенням на вашому вебсайті. Сучасне стиснення може зменшити розміри файлів на 60–80% без помітної втрати якості.

• Використовуйте стиснення JPEG для фотографій при якості 75–85.
• Використовуйте стиснення PNG для графіки та скріншотів.
• Для головних зображень і великих банерів економія є найбільш драматичною. Головне зображення розміром 5 МБ, стиснуте до 200 КБ, робить величезну різницю у часі завантаження.

3. Змінюйте розмір до фактичних розмірів відображення

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

Для адаптивних сайтів підготуйте 2–3 розміри (маленький для мобільних, середній для планшетів, великий для комп'ютерів) і дозвольте браузеру вибирати правильний за допомогою атрибута srcset.

4. Видаляйте непотрібні метадані

Дані EXIF (модель камери, GPS-координати, часові мітки) додають 10–50 КБ на зображення. Вони не служать жодній меті на вебсайті і можуть бути ризиком для конфіденційності, якщо включено дані GPS. Видаляйте метадані з усіх веб-зображень перед завантаженням.

Швидкий контрольний список оптимізації

• Конвертуйте фотографії у WebP (або JPEG, якщо WebP не підтримується)
• Змінюйте розмір до фактичних розмірів відображення, не більше
• Стискайте при якості 75–85 для фотографій
• Видаляйте метадані EXIF
• Використовуйте описові назви файлів і атрибут alt (допомагає SEO пошуку зображень)
• Застосовуйте ліниве завантаження для зображень нижче лінії видимості

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