RTFM.WIKI

Ordnung muß sein. Ordnung über alles (18+)

Инструменты пользователя

Инструменты сайта


Боковая панель


Навигация


Линкшэринг


WTF?!

Написать в спортлото

Донат Данкинс


Добавить новую страницу

Вы не можете добавлять страницы
web:pics_optimization

Оптимизация картинок в 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” для вырезания всех ненужных метаданных из изображений:

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

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

Оптимизация JPEG с помощью jpegoptim

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

apt-get install jpegoptim

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

jpegoptim --strip-all test.jpg

Оптимизация PNG с помощью pngnq

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

apt-get install pngnq

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

pngnq test.png

Опыт

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

Обсуждение

Ваш комментарий. Вики-синтаксис разрешён:
 
This website uses 🍪 for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information
web/pics_optimization.txt · Последние изменения: 2013/08/16 19:15 (внешнее изменение)