Новости

Оптимизация картинок в Web

10.10.2017

Картинки могут занимать до 90% от общего объема данных на странице. Их правильная оптимизация может значительно повлиять на скорость работы сайта.

Как оптимизировать картинки?

Зачастую файлы изображений хранят множество дополнительной информации, например детали о съемке фото, комментарии, текстовое описание, географические данные и т.п. При использовании в Web эти данные не нужны. Существуют инструменты, которые позволяют вырезать всю ненужные мета данные, что уменьшает размер картинки.

Оптимизация изображений для сайта

Форматы

Правильный выбор формата изображений позволит получить хорошее качество изображения при минимальном размере. Вам стоит использовать JPEG для фотографий и PNG для иконок.

Инструменты

Инструментарий по оптимизации картинок направлен на lossless сжатие , т.к. сжатие без потери качества. Вы также можете регулировать уровень сжатия для разных форматов самостоятельно , чтобы получить еще большую выгоду.

Оптимизация изображений для сайта - Константин Хмелев

imagemagick

Современные камеры обычно записывают в JPEG фотки кучу метаданных (геолокацию, превью и т.п.). Если их вырезать, можно иногда сэкономить несколько десятков килобайт. Convert от imagemagick содержит полезный параметр "-strip" для вырезания всех ненужных метаданных из JPEG изображения:

convert test.jpg -resize 100x100 -strip test_100.jpg

Jpegtran

Jpegtran позволяет вырезать метаданные и провести lossless оптимизацию JPEG:

jpegtran -copy none -optimize -outfile min.image.jpg image.jpg

Jpegoptim

Еще одна полезная утилита jpegoptim для оптимизации JPEG:

jpegoptim file.jpg

Optipng

Инструмент для оптимизации PNG картинок optipng работает так:

optipng test.png

Pngcrush

Pngcrush работает так:

pngcrush -reduce -brute in.png out.png

Самое важное

Обязательно используйте инструменты сжатия картинок без потери качества. Это требует минутных затрат, но может уменьшить размеры изображений в несколько раз. Из инструментов лучше всего использовать Pngcrush и Jpegtran.