Когда речь идет об 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%. И это при том, что почти все картинки создавались с помощью специальных инструментов с оптимальными настройками. Таким образом процедура оказалась очень полезной, к тому же крайне простой.
Related posts:
Комментариев нет:
Отправить комментарий