Суббота , 18 Ноябрь 2017
Как новичку заработать в интернете?
ДомойПубликацииОптимизация изображений для сайта: пакетная обработка с помощью jpegtran | optipng | pngout

Оптимизация изображений для сайта: пакетная обработка с помощью jpegtran | optipng | pngout

Сайт без изображений — анахронизм. Так думают многие, и это не лишено здравого смысла. Вспомните, давно ли вы в последний раз попадали на такой сайт и как долго пробыли на нём.

Текстовые данные занимают гораздо меньший размер, нежели изображения. Но люди, как известно, любят глазами. Стало быть, картинки будут несомненным плюсом повествованию.

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

OptimizeImg — оптимизация JPG и PNG файлов

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

Давным-давно, когда Путин не казался вечным, делал я свой первый веб-портал медицинской направленности. Нужно было разместить картинки к атласу. Очевидно, что анатомическое строение тела без рисунков представить довольно сложно, и тем более описа́ть словами. И я, не мудрствуя, залил картинки в bmp (формат без сжатия). Нужно ли говорить, что весили они дофигища? Более того, часть браузеров не умела показывать такие картинки.

Так зачем же оптимизировать изображения? Простой пример — фото. Современные телефоны имеют камеры в 8, 12 и даже больше, мегапикселей. 12 МП соответствует изображению в 4000×3000 пикселей. В зависимости от сложности сцены, это соответствует размеру 2-5 мегабайт, и даже больше. Десяток фото — и размер страницы сильно раздувается. Изображение вписывается в область контента, значит браузер должен сначала всё скачать, отмасштабировать и лишь потом вывести. Для слабых процессоров или при небольшом размере оперативной памяти — катастрофа.

А теперь представим, что пользователь смотрит сайт с телефона. В этом случае загрузки страницы можно просто не дождаться. Значит, картинки нужно предварительно уменьшать.

Кто-то возразит, что смысла в этом никакого, современные CMS при загрузке изображений автоматически делают уменьшенные копии. Но все ли располагают свои сайты на VPS или VIP-тарифах? Загрузить одно 12 МП изображение может и выйдет, но для его обработки PHP потребуется выделить 35+ мегабайт (в теории, на деле больше) для хранения, а затем ещё невесть сколько для создания уменьшенной копии. Дешёвые тарифы сразу упрутся в превышение ресурсов. Хороший хостер попросит пользователя больше так не делать, плохой — проигнорирует, ибо для него важны только деньги, а не работоспособность сервисов.

И вот, мы решили действовать правильно. Сами предварительно уменьшаем изображения, после чего заливаем на сайт. Так и движку проще, и людям. Всё? Не совсем.

Многие редакторы сохраняют исходные чанки (мета-информация, части файла, не относящиеся к изображению), содержащие дополнительную информацию. Например, если сфотографировать что-то на телефон, перекинуть файл на комп, жмакнуть по нему правой клавишей и выбрать «Свойства → Подробно», увидим данные по устройству: на какую камеру фотографировали, выдержку, ISO и прочее. Для пользователя эта информация бесполезна, значит, от неё можно избавиться.

Ну подумаешь, один чанк. Что там, ворох информации что ли содержится? Представьте себе. Иногда получаешь изображения, в которых сотни килобайт таких данных. Буквально сегодня, прислали для размещения лого размером 584 КБ. При этом, полезная информация составляла всего 14 КБ! Как по мне, не совсем правильно заставлять посетителя качать 570 КБ сверху.

Давайте подведём промежуточные итоги. Для того, чтобы пользователям сайта сделать хорошо, нужно:

  1. Уменьшить размер изображения. В помощь любой графический редактор.
  2. Выбросить из файла ненужны части. По сути, пользователю нужна лишь картинка.
  3. Попытаться дополнительно уменьшить размер изображения.

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

А вот пункты 2 и 3 можно отдать на растерзание специальным программам. Софта для работы с изображениями множество. Гугл рекомендует следующие программы:

  • jpegtran для изображений формата JPG.
  • optipng и pngout для изображений формата PNG.

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

Предпосылки

Год назад массово заговорили о сервисе PageSpeed Insights от Google. По сути, это рекомендации поискового гиганта на тему «как сделать хорошо». Просто вбейте адрес сайта и получите список предложений по оптимизации. Там же можно скачать уже оптимизированные ресурсы, включая изображения, для своего сайта. Правда, это актуально только для проверяемой страницы.

Если у Вас есть сайт, обязательно посмотрите эту статью. Особо полезно тем, кто используется WordPress.

Используем рекомендации для изображений

Вроде просто: скачать указанные Гуглом программы и прогнать все имеющиеся на сервере файлы через них. Проблема в том, что данные утилиты консольные. Они за раз принимают лишь 1 файл. Но мы же не зря в прошлой статье уделили время пакетным файлам, верно?

Информации из статьи вполне достаточно, чтобы создать свой обработчик файлов скопом, поэтому расписывать где что не буду. Просто предлагаю скачать готовую сборочку, которой пользуюсь сам.

Скачать архив (212 КБ)

Структура архива

В архиве содержится папка [OptimizeImg]. Для начала работы распакуйте её куда-нибудь. У меня размещена в c:\temp\ но это не принципиально. Главное, чтобы путь не содержал восклицательные знаки.

Далее. В этой папке содержится поддиректория [uploads]. Сюда нужно помещать файлы, требующие обработки. Самое приятное, что можно запихнуть хоть структуру папок/файлов.

Есть ещё 3 программы: jpegtran.exe | optipng.exe | pngout.exe — это те самые утилиты, рекомендуемые Гуглом. Скачаны с соответствующих официальных сайтов/репозитариев. Если сомневаетесь, или просто хотите обновить версию, скачайте из доверенного источника и замените имеющиеся.

И, наконец, сердце тулзы. Батнички:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-to-out.bat
  • 3-out-to-opti.bat

Первый файл — 1.bat — воссоздаёт структуру из [uploads]. Создаются 3 дополнительные папки: [jpg_jpegtran] [png_optipng] [png_pngout] с обработанными минимизированными файлами своего типа (jpg — только *.jpg-файлы, аналогично и с png).

3.bat последовательно запускает на исполнение три пакетных файла:

  • 3-go.bat практически аналогичен 1.bat. Пропускает jpg/png файлы через минимизаторы. Результатом работы будут 3 папки (см. выше) с соответствующими изображениями.
  • 3-opti-to-out.bat создаёт папку [png_optipng-to-pngout], в которую пишутся файлы, обработанные optipng + pngout (именно в такой последовательности).
  • 3-out-to-opti.bat создаёт папку [png_pngout-to-optipng], в которую пишутся файлы, обработанные pngout + optipng. Аналогично предыдущему, только в иной последовательности.

В принципе, для наших нужд достаточно только 1.bat. Пакетники 3x появились в результате изысканий и ошибки в работе предыдущей версии батника. Так получилось, что в ходе ошибки файлы для pngout брались из директории optipng. И каково же было моё удивление, когда запуск старой версии выдавал в 1.5 раза меньший размер, нежели в обновлённом батнике. В итоге оказалось, что двойная обработка может неплохо «доужать» картинки. Но это требует почти в 2 раза больше времени. Так что сами решайте, нужно ли оно.

Краткая инструкция по работе

  1. Скачать архив.
  2. Распаковать его.
  3. Зайти в свежераспакованную папку [OptimizeImg].
  4. Все файлы, требующие ужатия, скопировать в папку [upload].
  5. Запустить 1.bat и ждать. Если файлов много, и они png, ждать долго.
  6. Когда в чёрном окошке появится сообщение о необходимости нажать клавиши для продолжения — всё готово. Просто взять содержимое созданных папок и скопировать, перезаписывая старые файлы.

Для примера. Пусть у Вас блог на WordPress. Все изображения хранятся в [/wp-content/uploads/]. Заходим в папку сайта (по фтп), заходим в [wp-content] и просто копируем [uploads] в одноимённую папку OptimizeImg. Запускаем 1.bat и ожидаем. После окончания работы содежимое [jpg_jpegtran] (заходим туда!) заливаем на сервер. На запросы об имеющихся файлах отвечаем перезаписью. Аналогичный трюк для png, только сначала смотрим, какая папка — [png_optipng] или [png_pngout] — занимает меньше места, её содержимое и заливаем.

Не нужно бояться повредить остальные файлы. Батники работают только с jpg/png, и в новосозданные папки пишутся только изображения этих типов.

Надеюсь, кому-то будет полезно. Успехов!


Дополнения

  1. Путь к [OptimizeImg] не должен содержать восклицательных знаков ! и процентов %
  2. Запускать скрипты от имени администратора не нужно. Более того, в этом случае они могут не работать!


Рейтинг: 1

Автор публикации

1 634
не в сети 11 часов

x64 (aka andi)

Комментарии: 2451Публикации: 326Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (2 голосов, в среднем: 5,00 из 5)
Загрузка...

11 комментариев

  1. Здравствуй, Анди! Радуешь очередным, офигенно подробным и полезным мануалом. Мне даже захотелось все это попробовать, но руки не дойдут, наверное…

    Попадись мне такая статья пару лет назад — я бы визжал и плакал от восторга. Суть ее очень полезнотворная. А в нынешнее время чего-то как-то накатилося всего… Не до чего…

    Может, кто-нибудь из читателей блога — отпишется по использованию мануала? Такой труд не должен оставаться без внимания, ведь проделанная работа может существенно сократить размер детища любого блоговода…

    Рейтинг: 2
  2. Приветствую, x64 (aka andi). Благодарю за скрипт. Проверил его в работе. Мне понравился.

    Для начала небольшое замечание: в папке в пути которой есть кирилические символы картинки не обработались. После переноса папки скрипта в корень диска файлы обработались.

    После оптимизации размер картинок уменьшился почти на 40%. При этом сервис PageSpeed Insights сообщает, что можно сжать ещё на 20%. Интересно, почему так получается. Кстати, оценка сайта сервисом после оптимизации картинки существенно повышается.

    Рейтинг: 2
    • Доброго дня.
      По кириллице — да, был косяк. Вроде поправил, архив обновил, с этим должно быть ок.
      По сервису, тоже сначала как-то убивался, но когда он показал, что файл можно сократить на 19 КБ (при этом размер файла был 12 КБ), поостыл. Глюки налицо.

      Если говорится, что jpg можно уменьшить на столько, даже не знаю, что тут можно сделать.

      А вот с png ситуация весьма забавная, и для этого случая в архиве есть 3.bat, который, помимо штатного прогона файлов через минимизаторы (pngout и optipng), прогоняет обработанные файлы через «соседей» (optipng и pngout соответственно). И получится может такая штука, как на скриншоте. Исходный файл весит 3172 байта, обработанный optipng + потом pngout — 1155 байт. Экономия почти 10% относительно одного лишь optipng. Мистика, не иначе) С другой стороны, проги не безупречны, и им явно есть куда улучшаться.

      Спасибо!

      Рейтинг: 1
    • Здравствуйте, уважаемый cefp!

      Очень рад, что труды Анди не пропали даром и нашелся человек, который извлек из этого пользу. А самое главное в том, что Вы дали обратную связь, что для автора, на мой взгляд, является важным и мотивирующим фактором.

      Рейтинг: 1
  3. Ещё кое что заметил. Если запустить 3.bat после 1.bat или 3.bat, то он запрашивает подтверждение перезаписи каждого файла после его обработки. Чтобы не ждать, я просто оставил клавишу «y» и оставил компьютер работать. Если запустить файл 3.bat один раз, не запуская до него других то он не обрабатывает последовательно двумя программами. Поэтому приходится запускать 2 раза. Это все было в прежней версии скрипта.

    По поводу максимально возможного сжатия, что выдаёт сервис гугла, есть одна догадка. Он выдаёт ссылки на программы для сжатия картинок. Как я понял они работают из под линукс. Может быть, что для анализа гугл пользуется результатами работы этих программ.

    Здравствуйте, pessimist. У меня как и у Вас тоже много всяких дел, да и у многих наверно так. Иногда при мыслях об этом вспоминаю слова Кийосаки о крысинных бегах. Но ведь без дел тоже нельзя, приходится как-то оптимизировать.

    Рейтинг: 2
    • Честно говоря, такое поведение и закладывал. В том смысле, что не придумал сценарий, когда понадобится производить запись поверх существующих файлов.
      А вот про двойной запуск 3.bat — что-то странное. У меня при запуске создаётся 5 папок рядом с uploads, и в каждой свои «минифицированные» файлы. Может, от Виндузы зависит? Ибо не знаю, на что подумать. У меня win 8.1

      Рейтинг: 1
      • У меня седьмая. Папки сначала создаёт пустые, для заполнения запускал повторно.

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

        Ещё до того как увидел картинки от гугл возникло предположение с чем это может быть связно. Можно сжимать картинки с помощью цветовой субдескритизации. Суть которой заключается в сжатии цвета при сохранении качества яркости. Предполагается, что человек лучше воспринимает изменение яркости чем цвета. В jpegtran я не нашел такой функции. По открытой информации фильтр позволяет сократить объём на 17-20 %. Его часто используются для сжатия видеосигнала. Можно проверить эту теорию на практике, но увидев какое качество картинки получается, я пока приостановил изучение в этом направлении.

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

        x64 (aka andi), не думали о прогрессивном сжатии? У меня складывается мнение, что оно лучше обычного. Так как почти не влияет на объём картинки и позволяет видеть её очертания до полной загрузки.

        Кстати, скачал программу RIOT для сжатия с учетом цветовой субдескритизации и заметил, что при прогрессивной оптимизации у него объем картинки меньше чем при стандартной.

        Рейтинг: 2
        • И ещё раз спасибо! smile
          Папки пустые (структура каталогов) создаются предварительно, за это ответственна [i]xcopy[/i]. Попробую на виртуалке повторить этот финт. Вообще, весьма странно выходит, не наблюдал подобного поведения ни разу.
          За прогрессивный формат — отдельное спасибо. К счастью, эта возможность есть, нужно добавить ключ -progressive к параметру jpegtran_params. Обновил архив с учётом данного ключа.
          При желании, можно изменить качество выходного файла. В тот же параметр добавить ключ:
          -quality val
          где val — числовое значение от 5 до 95. Но это неминуемо приведёт к ухудшению качества изображения.

          Рейтинг: 1
  4. Благодарю за нововведение. Прогрессивный формат в jpegtran сжимает ещё лучше, чем обычный.

    Качество 95 не сильно отличается от 100, на глаз не заметно, но объём уменьшается значительно. Такой вывод сделал экспериментально по разным программам. Я этот параметр не задаю, так как исходные картинки разного качества и боюсь как бы не увеличить размер пересжатых ранее картинок.

    Рейтинг: 2

Оставить комментарий

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля