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

Источник - http://highload.com.ua/index.php/2010/07/02/optimizaciya-kartinok/

Когда речь идет об оптимизации Web приложений, большое внимание следует уделять оптимизации клиентской части. Размер статических данных обычно в разы превосходит размер динамически генерируемых. Большинство этих данных - это медиа данные. Чаще всего это изображения (картинки для верстки и фотографии), кроме того есть flash, видео, аудио и т.п.

В этой статье рассмотрим основные инструменты оптимизации картинок для Web приложений.

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

Кроме этого, важно выбирать подходящий формат для каждой конкретной картинки, что позволит использовать максимально эффективное сжатие.

В Web можно использовать три формата изображений:

• PNG - сегодня это основной формат, ввиду эффективности сжатия и функциональных особенностей. Поддерживается всеми современными браузерами. Этот формат следует всегда выбирать по умолчанию для графики
• GIF - этот формат следует использовать, когда необходима анимация. Также в некоторых случаях (очень маленькие файлы - менее 10х10 пикселей) этот формат обеспечивает лучшее сжатие, чем PNG
• JPEG - выбирайте всегда для фотографий. Этот выбор лучше, чем PNG, т.к. JPEG позволяет выбрать более эффективную стратегию сжатия благодаря размытию (экономия за счет небольшой потери качества)

Если Вы используете imagemagick для генерации превью (thumbnails), то включайте опцию “-strip” для вырезания всех ненужных метаданных из изображений:

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

Особенно хороший эффект дает для фотографий (в которых размер метаданных может достигать десятков килобайтов)

В Debian системах эта утилита доступна в пакетах:

apt-get install jpegoptim

Для оптимизации файлов нужно указать их в параметрах с опцией “–strip-all”:

jpegoptim --strip-all test.jpg

В Debian системах эта утилита также доступна в пакетах:

apt-get install pngnq

Работает так (в результате создает новый файл - старый не перезаписывает):

pngnq test.png

На одном из наших проектов простой обработкой картинок (не фотографий) вышеперечисленными инструментами удалось уменьшить общий их размер более чем на 15%. И это при том, что почти все картинки создавались с помощью специальных инструментов с оптимальными настройками. Таким образом процедура оказалась очень полезной, к тому же крайне простой.