От автора: в интернете размер имеет большое значение. Слишком много изображений или просто неоптимизированные изображения могут относительно простые страницы превратить в тяжеловесов по несколько мегабайт, а такие страницы чертовски долго грузятся на медленном соединении типа 3G, а также на моем домашнем слабом соединении.
Очень много факторов влияют на вес изображения, поэтому ниже я кратко расскажу, как я оптимизирую изображения.
Основное
Я стараюсь не загружать на страницу изображения больше 200Кб. Обычно достаточно всего лишь уменьшить изображение. В большинстве случаев веб-изображение не должно быть шире 1800px и выше 1200px, это касается и фоновых изображений. Я изменяю размер в фотошопе, но также есть Shrink O Matic, который упрощает масштабирование.
Функция фотошопа «Сохранить для веб» дает наименьший размер файла для 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
Поиграйтесь с опциями и загрузите изображение заново, чтобы увидеть, насколько изменился размер
Есть и другие методы. Если хотите оптимизировать изображения еще сильнее, изучите следующие ресурсы.
ZorroSVG (веб-инструмент автоматической конвертации PNG в SVG+JPEG)
png2svg (командная строка для конвертации PNG в SVG+JPEG)
Источник: //codepen.io/
Редакция: Команда webformyself.