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