Як стиснути фото для сайту — TinyPNG та Optimizilla
Цей міні-гайд для власників сайтів пояснює, як підготувати фото: які брати розміри в пікселях, якої «ваги» у кілобайтах прагнути та де швидко стиснути зображення без втрати якості. Усередині — прості рекомендації і два перевірених сервіси: TinyPNG та Optimizilla.
Одна з найчастіших питань після запуску сайту звучить так: «Які фото мені завантажувати і як їх підготувати?» Відповідь проста: зображення мають бути красивими для ока і легкими для сайту. Якщо фото важить 10–40 МБ, сторінка задихається: довго відкривається на мобільному, люди не чекають, а пошуковики знижують позиції. Тому правило №1 — стискаємо без втрати видимого якості.
Як зрозуміти, що «легко»? Орієнтуємось на дві речі: ширину в пікселях та вагу в кілобайтах. Для великого банера у шапці достатньо 1600–2000 px завширшки й приблизно до 150–300 КБ. Фото всередині статей та на звичайних сторінках — 1000–1400 px і 80–200 КБ. Прев’ю в галереях та картки — 700–1000 px і 60–150 КБ. Якщо блок на сайті 1200 px завширшки, немає сенсу завантажувати кадр з телефона на 4000 px: різниці не видно, а сайт повільніший.
Для інтернет-магазину зручно тримати зображення товарів квадратними й однакового розміру — наприклад, 300×300, 500×500 або 600×600 px (залежно від дизайну). Так сітка виглядає акуратно, а користувачеві легше переглядати каталог. Стиснення лишається обов’язковим: цільова вага для такого прев’ю — 60–150 КБ. Фон — білий або нейтральний, без зайвого «шуму». Якщо потрібно прозоре тло — збережіть PNG, інакше використовуйте WebP/JPG.
Чим стискати? Є два перевірені мною сервіси, які працюють буквально у кілька кліків і не потребують встановлення програм. TinyPNG — відкриваєте сайт, перетягуєте зображення у вікно й отримуєте стислий файл; можна завантажити все архівом. Optimizilla — завантажуєте фото, сервіс автоматично стискає, а за потреби повзунком можна підкрутити рівень якості, щоб знайти баланс «красиво/легко». В обох випадках картинка виглядає так само, але важить у рази менше.
Ще кілька дрібниць, які дають великий ефект. Для фото використовуйте WebP або JPG (WebP зазвичай легший при тій самій якості). Прозорі логотипи та просту графіку зберігайте в SVG/PNG. Імена файлів — латиницею, без пробілів: product-rose-01.webp замість Фото 1 (нове).jpg. Перед завантаженням гляньте на вагу: якщо банер виходить 600–800 КБ, варто стиснути ще — на екрані різниці не побачите, а швидкість зросте.
Ідеальний процес виглядає так: обрізаєте кадр під потрібну ширину (наприклад, 1400 px для фото статті або 600×600 px для товару), стискаєте у TinyPNG чи Optimizilla, завантажуєте на сайт — і сторінка відкривається швидко навіть із мобільного інтернету. Це «невидима» робота, яку відчуває кожен відвідувач. Якщо є сумніви — скиньте мені оригінали, я піджену під стандарти й завантажу коректно.