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

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

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

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

Форматы

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

[ad]

Инструменты

Инструментарий по оптимизации картинок направлен на 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

## сохранит оптимизированную копию в min.image.jpg

Jpegoptim

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

jpegoptim file.jpg

## Оптимизирует файл и сохранит его в самого себя

Optipng

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

optipng test.png

## Оптимизирует файл и сохранит его в самого себя

Pngcrush

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

pngcrush -reduce -brute in.png out.png

## Оптимизирует in.png и запишет результат в out.png

Самое важное

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