Советы по оптимизации изображений

Советы по оптимизации изображений

От автора: в интернете размер имеет большое значение. Слишком много изображений или просто неоптимизированные изображения могут относительно простые страницы превратить в тяжеловесов по несколько мегабайт, а такие страницы чертовски долго грузятся на медленном соединении типа 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

Поиграйтесь с опциями и загрузите изображение заново, чтобы увидеть, насколько изменился размер

Есть и другие методы. Если хотите оптимизировать изображения еще сильнее, изучите следующие ресурсы.

Transparent JPG SVG

Как сжать PNG как JPEG

ZorroSVG (веб-инструмент автоматической конвертации PNG в SVG+JPEG)

png2svg (командная строка для конвертации PNG в SVG+JPEG)

Источник: http://codepen.io/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree