Как оптимизировать изображения для сайта

Веб , ,
Иллюстрация оптимизации изображения
Источник изображения: imageoptim.com

Думаю, что каждый знает, что перед тем, как разместить изображение на сайте, его надо смасштабировать до требуемого размера, а не заливать сразу на сайт 2,5-мегабайтный tiff, задавая размер потом только атрибутами width и height в html или css.

Если перед размещением изображения для сайта оптимизировать, то можно ещё больше снизить объём передаваемых данных при открытии вашего сайта, и, следовательно, увеличить скорость его открытия. А это хорошо для ваших пользователей, которые в таком случае не уйдут с вашего сайта из-за слишком долгого его открытия, что особенно актуально, учитывая, что всё больше и больше трафика генерится мобильными устройствами. Также это хорошо для SEO, потому что, насколько я знаю, при прочих равных поисковики учитывают скорость открытия вашего сайта.

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

Источник данных: httparchive.org по состоянию на 1-е января 2014.

Оптимизация изображений — это процесс, который применяет к изображению более подходящий алгоритм сжатия, а также позволяет избавиться от лишней информации, хранящейся в изображении, например мета-данных, которые записываются в файл изображения при сохранении в графическом редакторе или фотоаппаратом при съёмке.

Таким образом, оптимизация изображений уменьшает объём данных, необходимый для хранения и передачи изображения (например, по сети).

Существуют как lossy, так и lossless методы оптимизации.

lossy
Метод сжатия данных, в результате которого происходит потеря исходных данных и конечное качество изображения уменьшается. Позволяет значительно снизить размер изображения, как правило, более значительно по сравнению с lossless методами.
lossless
Метод сжатия, при котором используются алгоритмы сжатия данных, не приводящие к потере исходных данных и, следовательно, ухудшению качества.

По моему опыту, даже при использовании lossless оптимизации в среднем получается снизить размер изображения на 5-10%, а в некоторых случаях эта цифра возрастает до 15-25% и при везении даже до 35%. Согласитесь, что это довольно приятный выигрыш в объёме данных.

Если же воспользоваться утилитами, которые используют lossy сжатие, то можно выиграть в объёме картинок в несколько раз. Главное, что, со слов создателей этих утилит, они автоматически выбирают такую степень сжатия, чтобы потеря качества изображения не была заметна глазу, и можно не переживать, что на изображениях появится зернистость или какие-нибудь иные нежелательные артефакты.

Открыл изображение в оптимизаторе, и бум! — изображение стало весить на несколько десятков процентов меньше. Вот бы так же можно было худеть, да?

Так как же оптимизировать изображения для сайта?

Использовать для этого соответствующие утилиты. Они бывают как в виде десктопных приложений, так и в виде утилит для командной строки. Но кроме того, что с CLI непросто сходу разобраться, так они ещё и дают не самый лучший результат в плане сжатия. Поэтому я не буду их здесь рассматривать.

Источник данных: httparchive.org по состоянию на 1-е января 2014.

Также есть как универсальные решения для всех трёх типов изображений (png, jpеg, gif), так и обрабатывающие только png или jpeg формат.

Утилиты оптимизации изображений с графическим интерфейсом

ImageOptim

ImageOptim — это простая, эффективная и универсальная утилита для оптимизации изображений для Mac OS X.

Поддерживает все необходимые форматы изображений: png, jpg, gif. Выполняет lossless оптимизацию.

ImageOptim одновременно соовмещает в себе лучшие утилиты для оптимизации изображений: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran и Gifsicle. Именно поэтому я не вижу смысла рассматривать их по отдельности, когда они все представлены в одной программе, что намного удобней.

Скриншот приложения ImageOptim

Если же вы по каким-то причинам используете Windows, для вас существует альтернатива RIOT. Cам я эту утилиту не использовал, но выглядит она неплохо.

ImageAlpha

ImageAlpha сжимает png файлы путём lossy сжатия и конвертации 24‑битных PNG в PNG8 с сохранением альфа-канала (прозрачности). При этом такие изображения поддерживаются в iOS, всеми браузерами и даже в IE6.

Скриншот приложения ImageAlpha

Эта утилита позволяет выиграть более 30% от первоначального объёма изображения, а потеря качества заметна только при очень пристальном взгляде под лупой.

К сожалению, аналоги под Windows мне не известны.

JPEGmini

JPEGmini lossy оптимизатор jpeg изображений, но ухудшение качества после его использования даже сложнее заметить, чем после ImageAlpha. Есть версия для Windows.

Скриншот приложения JPEGmini

У него есть только один недостаток — в отличие от предыдущих утилит, которые бесплатны и open source, JPEGmini платный. Правда, у него есть бесплатная Lite версия, которая позволяет обрабатывать 20 файлов в день.

Не забудьте после ImageAlpha и JPEGmini пропустить изображение через ImageOptim, чтобы сэкономить ещё пару процентов места.

Если вы хотите найти «более лучшую» утилиту: сравнение эффективности описываемых мной утилит с другими популярными оптимизаторами изображений.

Мой Workflow и ImageOptim-CLI

У оптимизации изображений, кроме неоспоримых плюсов, таких как уменьшение места, необходимого для их хранения (что на веб-сервере далеко не лишнее), уменьшение бесполезного трафика вашего веб-сервера и ускорение открытия ваших сайтов, есть один большой недостаток: изображения надо оптимизировать.

То есть, каждый раз, перед тем как выложить изображение на сайт, необходимо выполнить одно и то же сочетание действий: запустить ImageAplpha или JPEGmini, открыть в нём изображение, подождать результата, потом прогнать эту же картинку через ImageOptim. А если затем изображение пришлось отредактировать, то процесс придётся повторить.

Всё это начинает быстро и очень сильно раздражать и, я бы даже сказал, бесить. Но, к счастью, человек по имени Jamie Mason позаботился об этой проблеме и обернул все три утилиты в AppleScript и Shell, так что можно обрабатывать много файлов за раз, выполнив всего одну команду.

Страница проекта ImageOptim-CLI на GitHub.

Установка ImageOptim-CLI

Если у вас установлен node.js (а точнее пакетный менеджер npm, который ставится вместе с node.js), то установить ImageOptim-CLI очень просто, достаточно выполнить в Терминале:

sudo npm install -g imageoptim-cli

Если же у вас нет node.js, то установка будет выглядеть так:

  1. Открываем Терминал и скачиваем ImageOptim-CLI:

    curl ‑‑output ~/Downloads/imageoptim-cli.zip https://codeload.github.com/JamieMason/ImageOptim-CLI/zip/1.7.10
  2. Распаковываем в то место, где хотим, чтобы он лежал, например, в домашнюю директорию:

    unzip ~/Downloads/imageoptim-cli.zip ‑d ~/
  3. И добавляем imageOptim в PATH, чтобы его можно было запускать, не указывая весь путь к утилите полностью:

    export PATH=$PATH:~/ImageOptim-CLI-1.7.10/bin

Запуск ImageOptim-CLI

Теперь чтобы оптимизировать все изображения внутри какой-либо директории, достаточно выполнить:
imageOptim ‑j ‑a ‑d ~/Sites/MyProject, где

  • ~/Sites/MyProject — это путь к вашему проекту с картинками,
  • ‑j пропустить изображения через JPEGmini,
  • ‑a пропустить изображения через AlphaImage,
  • ‑d обработать изображения в директории.

Скорее всего, чтобы опция ‑j работала и приложение JPEGmini могло быть автоматизировано, необходимо разрешить так называемый «доступ для вспомогательных устройств и программ« (Enable access for assistive devices).

Для этого надо открыть «Системные настройки» (System Preferences), и если у вас Mac OS X Mavericks (10.9), выполнить следующие действия:

  1. В «Системных настройках» (System Preferences) кликнуть по «Защита и безопасность» (Security & Privacy).
  2. Перейти на вкладку «Конфиденциальность» (Privacy).
  3. В списке справа выбрать пункт «Универсальный доступ» (Accessibility).
  4. Щелкнуть по значку замка в нижнем левом углу окна. И затем ввести имя и пароль администратора.
  5. И, наконец, поставить галочку напротив приложения Терминал (Terminal).

Тем, кто не обновился до Mavericks, проще — достаточно отрыть «Универсальный доступ» (Accessibility) сразу в «Системных настройках» (System Preferences). И поставить галочку рядом с «Разрешить доступ для вспомогательных устройств и программ« (Enable access for assistive devices).

Теперь самый простой способ оптимизировать все изображения вашего сайта:

  1. Скачать при помощи FTP клиента директорию со всеми изображениями, например, папку wp-content/uploads, если у вас сайт на WordPress.
  2. Натравить на эту папку ImageOptim-CLI, например так:
    imageOptim -j -a -d ~/Sites/example.com/wp-content/uploads
  3. Выпить чаю, пока изображения обрабатываются.
  4. Порадоваться тому, сколько места было сэкономлено и загрузить изображения обратно.

Плагин для WordPress

Если у вас сайт работает на WordPress, вы не стремитесь к максимально возможной степени сжатия при оптимизации и не хотите разбираться со всеми описанными выше утилитами, то для вас есть решение — плагин для WordPress EWWW Image Optimizer.

Сам я этим плагином не пользуюсь, потому что предпочитаю обходиться минимумом плагинов. Плюс как максималист я стремлюсь к максимально возможной степени оптимизации изображений :)

Заключение

Оптимизация изображений — это обработка изображений специальными утилитами, которые удаляют ненужные метаданные и применяют наилучший алгоритм сжатия к графическим файлам, что в итоге уменьшает объём данных, который эти изображения занимают.

Оптимизировать изображения для сайта
Источник изображения: psdgraphics.com
Оптимизация бывает с потерей качества (lossy) и без потери качества (lossless). Существуют инструменты для оптимизации всех самых распространённых форматов изображений: jpeg, png, gif.

Оптимизация нужна для:

  • ускорения открытия вашего сайта,
  • экономии места, занимаемого изображениями,
  • уменьшения времени создания бэкапа сайта,
  • экономии трафика веб-сервера.

Оптимизировать изображения можно утилитами: ImageOptim, ImageAlpha и JPEGMini, а можно использовать их все вместе при помощи ImageOptim-CLI.

Добавить комментарий