Від автора: в інтернеті розмір має велике значення. Занадто багато зображень або просто неоптимізовані зображення можуть відносно прості сторінки перетворити у важкоатлетів по кілька мегабайт, а такі сторінки біса довго вантажаться на повільному з’єднанні типу 3G, а також на моєму домашньому слабкому з’єднанні.
Дуже багато факторів впливають на вагу зображення, тому нижче я коротко розповім, як я оптимизирую зображення.
Основне
Я намагаюся не завантажувати на сторінку зображення більше 200Кб. Зазвичай достатньо всього лише зменшити зображення. У більшості випадків веб-зображення не повинне бути ширше 1800px і вище 1200 px, це стосується і фонових зображень. Я зраджую розмір в фотошопі, але також є Shrink O Matic, який спрощує масштабування.
Функція фотошопу «Зберегти для web» дає найменший розмір файлів JPEG, GIF і PNG, який я тільки бачив, але після індивідуальних кроків оптимізації, описаних нижче, завжди проганяйте зображення через ImageOptim.
Якщо зображення завантажується в соціальні мережі, сервіс сам стисне його. Вам лише потрібно зберегти зображення для веб в фотошопі і прогнати його через ImageOptim.
JPEG
Найкраще підходить для: фотошопу, плавних колірних переходів
Фотошоп > Зберегти для веб > JPG
Задати якість 60. Якщо видно артефакти, підвищуйте значення на 5, зазвичай якість не перевищує 80
Не забудьте поставити галку «Прогресивний», щоб користувачі бачили частині зображення по мірі його завантаження
Проженіть зображення через ImageOptim
GIF/PNG-8
Найкраще підходить для: обмеженої палітри і бінарної прозорості
Фотошоп > Зберегти для веб > GIF або PNG-8
Налаштуйте кількість квітів на мінімум без втрати якості. Я зазвичай вибираю пункт «Селективна» для кольору і «Випадкове» для тремтіння
Прогнати через ImageOptim
PNG-24
Найкраще підходить для зображень з гладкою прозорістю, ідеальний варіант для зображень з обмеженою колірною палітрою
Фотошоп > Зберегти для веб > PNG-24. Встановити галку прозорості
Прогнати через ImageAlpha. ImageAlpha дозволяє налаштовувати кількість квітів в PNG, що значно знижує вагу файлу. Зазвичай можна скинути до 128 або 64 без серйозної втрати якості, але тут все залежить від детальності PNG. Я зазвичай використовую алгоритми NeoQuant або Median Cut, вони сильніше стискають зображення. Поставте галку «Dithered». Перемикайтеся назад і вперед з допомогою кнопки «Show original», щоб подивитися результат оптимізації
Прогнати через ImageOptim
Цей інструмент пропонує хороші методи стиснення PNG-24 і дозволяє виконувати об’ємне стиснення, однак воно працює, як в ImageAlpha. Pngyu
Не забудьте прочитати пункт «фотографічні зображення з прозорістю».
SVG
Найкраще підходить для: векторної графіки типу діаграм, логотипів, іконок. Можна використовувати для анімації в браузері
Експортуйте в SVG у Illustrator CC (файл > експорт > експортувати)
Прогнати через SVGOMG. Я зазвичай ставлю майже всі галки під пунктом «точність» крім «Remove viewBox». Поиграйтесь з опціями під ваш SVG. Якщо SVG анимироваться, то потрібно зняти галки «Clean IDs», «Collapse useless groups» і «Merge paths», щоб можна було анімувати зображення по шарах
Фотографічні зображення з прозорістю (SVG+JPEG)
Найкраще підходить для: «вирізаних зображень
Якщо потрібно отримати зображення з фотографічною якістю і альфа-маскою (наприклад, людина, відокремлений від фону), а техніки оптимізації PNG-24 не дозволяють добре стиснути зображення, можна використовувати SVG, JPEG, щоб підвищити якість і зберегти прозорість.
Я створив інструмент JPNG.svg для автоматизації процесу через base64-кодування фото з накладенням SVG-маски. Для досягнення найкращого результату спробуйте:
Фотошоп > Зберегти для веб > PNG-24
Встановити галку прозорості
Перетягніть зображення в JPNG.svg
Поиграйтесь з опціями і завантажте зображення заново, щоб побачити, наскільки змінився розмір
Є й інші методи. Якщо хочете оптимізувати зображення ще сильніше, вивчіть наступні ресурси.
Transparent JPG SVG
Як стиснути PNG, JPEG
ZorroSVG (веб-інструмент автоматичної конвертації PNG в SVG+JPEG)
png2svg (командний рядок для конвертації PNG в SVG+JPEG)
