RTFM.WIKI

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Оптимизация картинок в 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 ====
Если Вы используете imagemagick для генерации превью (thumbnails), то включайте опцию “-strip” для вырезания всех ненужных метаданных из изображений:
<code>convert test.jpg -resize 100x100 -strip test_100.jpg</code>
Особенно хороший эффект дает для фотографий (в которых размер метаданных может достигать десятков килобайтов)
==== Оптимизация JPEG с помощью jpegoptim ====
В Debian системах эта утилита доступна в пакетах:
<code>apt-get install jpegoptim</code>
Для оптимизации файлов нужно указать их в параметрах с опцией “–strip-all”:
<code>jpegoptim --strip-all test.jpg</code>
==== Оптимизация PNG с помощью pngnq ====
В Debian системах эта утилита также доступна в пакетах:
<code>apt-get install pngnq</code>
Работает так (в результате создает новый файл - старый не перезаписывает):
<code>pngnq test.png</code>
===== Опыт =====
На одном из наших проектов простой обработкой картинок (не фотографий) вышеперечисленными инструментами удалось уменьшить общий их размер более чем на 15%. И это при том, что почти все картинки создавались с помощью специальных инструментов с оптимальными настройками. Таким образом процедура оказалась очень полезной, к тому же крайне простой.