Коли власники бізнесу запускають новий сайт, зазвичай хочуть, щоб він виглядав максимально професійно. Логіка здається простою: що якісніше фотографії, то краще враження і тим легше продавати товари чи послуги.
Насправді все негаразд однозначно.
Сайт з великими неоптимізованими зображеннями може здаватися гарним власнику, але відвідувачі часто набувають зовсім іншого досвіду: сторінки довго завантажуються, елементи реагують із затримкою, а користуватися сайтом стає незручно. У багатьох випадках клієнт вирушає ще до того, як побачить контент, над яким ви так довго працювали.
Завдання – знайти правильний баланс між якістю зображень та швидкістю сайту.
Чому розмір зображень важливіший, ніж здається
Сучасні смартфони легко створюють фотокартки вагою 5-15 МБ кожна. Професійні камери часто дають файли більшого розміру.
Проблема в тому, що сайтам майже ніколи не потрібні зображення у вихідному розмірі.
Уявіть, що ви завантажуєте фотографію шириною 6000 пікселів та вагою 12 МБ. Якщо на сайті вона показується в блоці шириною всього 800 пікселів, відвідувач все одно завантажує весь файл на 12 МБ, хоча бачить лише невелику частину вихідної роздільної здатності.
Помножте це на десять, двадцять чи п'ятдесят зображень на сторінці – і швидкість завантаження швидко стане проблемою.
Google звертає увагу на швидкість сторінок, але ще важливіше те, що на неї звертають увагу відвідувачі.
Затримка всього за кілька секунд може помітно збільшити кількість людей, які підуть із сайту, нічого не зробивши.
Прихована ціна ідеальних зображень
Багато власників бізнесу вважають, що максимальна якість завжди дає найкращий досвід для клієнта.
Але відвідувачі рідко порівнюють зображення на сайті з оригінальним файлом на вашому комп'ютері.
Вони помічають інше:
- як швидко відкривається сторінка;
- наскільки плавно з'являються зображення;
- Чи зручно користуватися сайтом зі смартфона;
- Чи легко переглядати товари та послуги.
Злегка стисло зображення, яке завантажується миттєво, часто створює кращий досвід користувача, ніж ідеальна картинка, що з'являється кілька секунд.
Як вибрати правильний формат
Не всі формати зображення однаково ефективні.
WebP - найкращий вибір для більшості сайтів
Сьогодні WebP зазвичай є кращим форматом для сайтів.
Він дає:
- менший розмір файлів;
- відмінна візуальна якість;
- Швидше завантаження;
- Підтримку у всіх сучасних браузерах.
Для більшості фотографій товарів, зображень у блозі та ілюстрацій послуг WebP – рекомендований варіант.
JPEG (JPG) - все ще корисний
JPEG залишається хорошим вибором для фотографій.
Він добре підходить для:
- зображень товарів;
- фотографій команди;
- Фотографій офісу;
- робіт у портфоліо.Хоча JPEG зазвичай важить більше WebP, він все одно значно ефективніший за багато інших форматів.
PNG - тільки коли це необхідно
Формат PNG часто використовується неправильно.
Багато хто завантажує всі зображення в PNG, тому що якість виглядає відмінно.
Мінус у тому, що PNG може важити в кілька разів більше, ніж аналогічне зображення WebP або JPEG.
PNG варто використовувати в основному, коли потрібно:
- прозоре тло;
- Логотипи;
- іконки;
- графічні елементи.
Для звичайних фотографій PNG зазвичай є поганим вибором.
Які розміри зображень використовувати
Одна з найчастіших помилок – завантажувати зображення набагато більше, ніж потрібно.
Як загальне правило:
Зображення товарів
Ширина 1200-1600 пікселів
Зображення для блогу
Ширина 1200-1600 пікселів
Hero-банери
Ширина 1920 пікселів
Логотипи
SVG, коли це можливо; PNG, якщо потрібна прозорість
Ці розміри дають відмінну якість і допомагають зберігати розумну вагу файлів.
Якою має бути вага зображення
Універсального правила немає, але для більшості сайтів добре працюють такі орієнтири:
- До 100 КБ - відмінно;
- 100-300 КБ – дуже добре;
- 300-500 КБ - допустимо;
- Більше 1 МБ - зазвичай надто багато.
Для інтернет-магазинів із сотнями товарів зменшення ваги зображень може суттєво підвищити продуктивність.
Коли висока якість дійсно важлива
Є сфери, де якості зображень варто приділяти особливу увагу.
Наприклад:
- дизайн інтер'єрів;
- архітектурні портфоліо;
- предмети мистецтва;
- Професійна фотографія;
- поліграфія та брендинг.
У таких сферах візуальне подання безпосередньо впливає рішення про купівлю.
Але навіть у цих випадках зображення все одно потрібно оптимізувати перед завантаженням на сайт.
Ціль не в тому, щоб погіршити якість максимально сильно. Ціль - прибрати зайві дані, які відвідувач все одно не помітить.
Підхід, який ми рекомендуємо
При аудиті сайтів ми часто бачимо, як бізнес втрачає швидкість просто тому, що зображення були завантажені прямо з телефону чи камери без оптимізації.
Практичний підхід виглядає так:
- конвертувати зображення в WebP;
- зменшувати їх розмір перед завантаженням;
- тримати вагу файлів настільки низьким, наскільки можна без помітної втрати якості;
- використовувати SVG для логотипів та іконок;
- регулярно перевіряти швидкість сайту на комп'ютері та мобільних пристроях.
Швидкий сайт не лише подобається Google.
Головне – він створює найкращий досвід для потенційних клієнтів.
І в багатьох випадках ця різниця безпосередньо впливає на те, чи клієнт стане клієнтом чи піде до конкурента.
Підсумок
Красиві зображення є важливими. Нікому не потрібний сайт, який виглядає застарілим чи неякісним.Але найкращі сайти - не ті, де використовуються найважчі зображення. Найкращі сайти вміють поєднувати візуальну якість та продуктивність.
Якщо ваш сайт здається повільним, оптимізація зображень часто стає одним із найпростіших та найефективніших покращень.
Декілька хвилин, витрачених на оптимізацію зображень сьогодні, можуть заощадити вашим відвідувачам кілька секунд на кожній сторінці завтра.