Оптимизация изображений для Web

21

Сегодня я расскажу вам о том, как можно быстро и бесплатно оптимизировать изображения для веб. Думаю, не нужно объяснять, для чего мы будем «городить огород» и как это отразится на скорости загрузки ваших блогов, сайтов или интернет магазинов.

Эта статья откололась от другого workflow, где я подробно описал все свои уловки по работе с картинками, начиная от автоматического «вылавливания» скриншотов в Фотопотоке и заканчивая загрузкой финального результата на сервер. Но об этом уже совсем скоро, а сегодня только об изображениях и технологиях сжатия.

Задача

Наша задача — c минимальным количеством телодвижений сжать пачку любых изображений и поместить их в какую-то условную папку Compressed. Конечным результатом я остался доволен, все это можно сделать всего одним шорткатом.

Тот, кто следит за циклом статей по моим workflow, помнит, что раньше я сжимал изображения при помощи Photoshop. Причин на то было несколько. Во-первых, была лицензия, во-вторых, в Photoshop можно гибко настроить макросы и быстро экспортировать группу фотографий для веб. Способ реально рабочий и прослужил мне верой и правдой больше года. Но глупо рекомендовать вам покупать Годзиллу в виде Photoshop, когда даже лучший результат можно получить не только быстрее, но и бесплатно.

Инструменты

Оптимизация картинок для Web одним шорткатом. Вроде звучит просто. Но под капотом у этой простоты не мало специальных инструментов. Итак, в нашем workflow будут задействованы следующие элементы:

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

К установке первых двух программ пояснений не требуется. Просто загружайте и копируйте их в папку Приложения. Про JPEGmini я уже подробно рассказывал в соответствующем обзоре. Это отличная программа для сжатия JPEG за 19 $. Но, если вы обрабатываете меньше 20 фотографий в день, то подойдет и light-версия.

ImageOptim CLI — это набор скриптов, которые позволяют управлять программой ImageOptim через командную строку. Для их установки загрузите архив ImageOptim CLI и скопируйте содержимое папки /bin (два файла) в вашу папку /usr/bin (чтобы быстро попасть в неё, нажмите в Finder CmdShiftG и вставьте путь к папке).

Как и что будем оптимизировать?

Особенность моей работы состоит в том, что все иллюстрации (скриншоты) в 99% имеют формат PNG. Они очень хорошо сжимаются, если имеют немного цветов (новая iOS, интерфейсы OS X). Но, чем больше цветов, тем сильнее раздувается PNG’шка. Для примера, взгляните на эти два скриншота.

Оригинальный размер левой картинки — 168 Кб. После оптимизации — 48 Кб. Оригинальный размер правой — 409 Кб. После оптимизации — 301 Кб.

«Цветастый» скриншот выглядит очень хорошо, но все ещё имеет большой размер. В таких случая имеет смысл конвертировать его в JPEG, а потом дополнительно сжать. С приемлемыми артефактами (помните, что мы не работаем с фотографией, это все технические иллюстрации) файл стал в пять раза меньше — 76 Кб.

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

  • Первая, будет оптимизирует PNG файлы
  • Вторая — конвертировать PNG в JPEG стандартными средствами OS X, а потом оптимизировать их при помощи JPEGmini и ImageOptim.

Оптимизация PNG-файлов для Web

Загрузите мою службу Automator, откройте и внесите в неё несколько правок.

  1. В первом шаге нужно указать папку, в которую вы собираетесь переместить файлы для оптимизации. В моем случае, она называется Tmp. Обратите внимание, что при копировании вы сохраните оригиналы. Мне они нужны редко, поэтому я перемещаю изображения, а не копирую.
  2. Во втором шаге скрипту ImageOptim нужно указать путь к файлам, которые он будет конвертировать. В нашем случае — это путь к папке Tmp. Параметр –image-alpha указывает на то, что после ImageOptim по нашим картинкам пройдётся ещё утилита ImageAlpha. –quit автоматически закроет ImageOptim после завершения обработки
  3. Последний шаг переместит оптимизированные файлы из Tmp в папку Optimised. Это важно, так как перед следующей оптимизацией нам нужно, чтобы папка Tmp была пустой, чтобы скрипты повторно не подгружали уже обработанные картинки.

Я очень долго бился над тем, чтобы скрипт нормально подхватывал выделенные файлы в Finder, без привязки к какой-то папке, но у меня так и не получилось. Именно поэтому нам и нужна некая буферная папка Tmp.

Теперь перейдём к настройкам оболочки ImageOptim. Как я уже говорил, это просто GUI над несколькими популярными скриптами по обработке PNG и JPEG. По умолчанию он прогоняет картинки по всем скриптам, что занимает просто ЧУДОВИЩНОЕ количество времени. Особенно прожорливым является pngout, который может более минуты пыхтеть над несколькими мегабайтными скриншотами.

Для обработки скриншотов оптимальным вариантом оказался advPNG. Он работает очень быстро и по сжатию практически идентичен pngout.

Уровень оптимизации задается в настройках. Всего четыре, самый последний соответствует параметру «безумный».

Конвертирование PGN в JPEG и оптимизация для Web

Загрузите вторую службу Automator. Здесь практически все так же, просто появился ещё один шаг, который конвертирует PNG в JPEG стандартными средствами OS X.

Это конвертер сам по себе справляется не плохо, но сжатие в нем нельзя контролировать. Поэтому мы дополнительно пройдёмся по нашим JPEG’ам утилитой JPEGmini и ImageOptim. О запуске первой говорит параметр –image-mini. Вот здесь как раз и проявляется вся прелесть ImageOptim CLI, который начинает управлять «дубовым» JPEGmini прямо через интерфейс. Вы просто сидите и смотрите на магию под названием автоматизация :)

Если вам покажется, что связка JPEGmini и ImageOptim через чур пережимает снимки (явные артефакты), то можно остановиться на стандартном конвертере OS X, удалив shell-скрипт.

И наоборот, если вы работаете с нормальными JPEG (фото), то удалите лишний шаг по конвертации в PNG. В таком случае на выходе вы получите весьма качественную картинку от JPEGmini.

Настройка шорткатов

Обе службы уже доступны через соответствующее меню. Но удобнее повесить их на какие-то шорткаты. У меня это любимое сочетание с Caps Lock: шорткат Caps LockP дает на выхоте PNG, а Caps LockJ — JPEG.

Привязать шорткаты к нашим службам можно в Системных настройках → Клавиатура → Сочетания клавиш → Службы.

На практике

Пора проверить наши изыскания в действии. Выделите в Finder несколько изображений и попробуйте оптимизировать их обоими вариантами. Если все настроено правильно, то в вашей папке Optimised появятся новые файлы, а Tmp останется пустой.

Искать и открывать папку Optimised мне лень, поэтому я создал в Automator Действие папки, которые открывает её как только там появятся новые картинки. Загрузить пример можно вот тут.

Стоила ли овчинка выделки?

Наконец-то пришло время взглянуть на результаты оптимизации пачки изображений разными способами. Для тестирования и использовал четыре скриншота с iPhone 4S и три с OS X.

Как видите, самой эффективной оказалась связка JPEGmini и ImageOptim. Но иногда на картинках заметны дефекты, поэтому я остановился на варианте ImageOptim + ImageAlpha. Это полностью бесплатное решение, которое, в отличие от JPEGmini, не имеет ограничений по количеству фотографий и работает раза в два быстрее. Результат также гораздо приятнее для глаза.

О Photoshop и говорить не стоит, больше для компрессии скриншотов я его не использую.

На этом с темой оптимизацией изображений для веб ставим временную точку. Если есть вопросы или какие-то дельные советы — пишите в комментариях, сможем улучшить workflow вместе.

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

Поделиться
Сохранить
  • Aleksey Nikolaev

    Как раз на днях делал похожее, только через Alfred2,
    остановился на просто оптимизации imageOptim.
    хотел сделать через imageOptim-CLI но так и не получилось заставить работать.
    у меня в Workflow записана команда:

    open -a imageOptim {query}

    пробовал

    imageOptim -j -a -q -d {query}

    не срабатывает, хотя через терминал работает.
    может вы подскажете в чем проблема.
    вот мой Workflow: http://j.mp/19HnKKT

    • Вот так попробуйте и все заработает:

      open -a /Applications/ImageOptim.app/Contents/MacOS/ImageOptim {query}

      Туда же можно поставить мой скрипт, но нужно все же ввести промежуточную папку:

      imageOptim —directory ПУТЬ_К_ПАПКЕ —image-alpha —quit

      К достоинствам отнесем автоматическое закрытие imageOptim и imageAlpha, которые ужимает файлы еще раза в два ;)

      • Aleksey Nikolaev

        первый вариант работает и без полного пути,
        а вот при втором варианте вообще глухо, пробовал

        imageOptim -j -a -q -d {query}

        и так

        imageOptim -d {query} -j -a -q

        ни какой реакции

        а вот так /usr/local/bin/imageOptim -a -j -d {query} -q

        пошло. (в путях какой то косяк)
        но обрабатывает только директории, если убрать параметр -d то опять ни какой реакции.

        • Хм,у меня без полного пути обрабатывал только одну фотку. А что за параметры? я никакой документации на сайте не нашел.

          • Aleksey Nikolaev

            документации как таковой нету, есть небольшое readme
            https://github.com/JamieMason/ImageOptim-CLI
            Usage: imageOptim [options]

            Options:

            -d, —directory directory of images to process
            -a, —image-alpha pre-process PNGs with ImageAlpha.app *
            -j, —jpeg-mini pre-process JPGs with JPEGmini.app **
            -q, —quit quit all apps when complete
            -h, —help display this usage information
            -e, —examples display some example commands and uses
            -v, —version display the version number

            а параметры и ссылку на Workflow я здесь привёл.

          • Да, вот именно поэтому у меня и фигурирует папка tmp :))

  • Andrey Preobrazhenskiy

    Влад а у вас не возникает таких надобностей как например привести картинку к определенным размерам? У меня перед размещением картинок постоянно требуется обрабатывать картинки. И как правило все картинки одного размера

    • Есть в Automator такая служба. «Изменить масштаб изображения» называется. Ее можно поставить куда-то в начало моих сервисов.

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

  • kashaev

    спасибо!

    вот задачка из фотошопа )
    уменьшить кучу фоток до 900px по большей стороне и наложить полупрозрачный водяной знак в левом нижнем углу..
    связка описанная в статье справиться?

    • она сделает все, кроме водяного знака, для этого надо ещё привлекать какой-то софт.

      • kashaev

        тогда лучше остаться с экшеном в фотошопе )

  • saannneeekkk

    Мне однозначно нравится ваш уклон в сторону веб приложений! Очень интересно, спасибо ;)

  • Влад поскажи. Оптимизация png работает, а вот с jpg получаю ошибку скрипта. Файл преобразуется в jpg и сжимается, но застряет в папке «tmp».
    Скриншоты прилагаю

    • И JPEGmini срабатывает? Иногда так бывает. Попробуй просто удалить все блоки и добавить по новой. Мне помогает. Ещё там в первом скрипте в «Передать ввод» лучше выбрать «как аргумент».

    • Если есть Pixelmator, то в JPEG лучше перегонять им, а не через Превью. Качество получается лучше.

      • А что эффективнее — pixelmator или imageOptim?
        Не работает вот это
        imageOptim —directory /Users/NBibikov/Pictures/Screens/tmp —jpeg-mini —quit

        • Pixelmator просто конвертирует PNG в JPEG, а imageOptim сжимает PNG и JPEG. Pixelmator лучше конвертирует, чем стандартная функция OS X (которая стоит у меня в пример и у тебя). По этому, если есть Pixelmator, используй его. Ну а для того, чтобы работала указанная строка, должен стоять JPEGmini. Стоит? http://macosworld.ru/jpegmini/

          • Максим

            Добрый день Влад
            У меня не срабатывает команда imageOptim —directory /Users/NBibikov/Pictures/Screens/tmp —jpeg-mini —quit в Automator, почему понять не могу. Если через терминал запустить вот так imageoptim -a -d /Users/fox2/Downloads/temp/ -q или вот так imageoptim -a -d — q/Users/fox2/Downloads/temp/ все работает на ура. но когдая прописываю точно такие же команды в Automator, то на шаге подключение скрипта обрыв(((( Можете подсказать в чем не так или где не то делаю?

  • Хе-хе-хе, а лучшие-то оптимизаторы — под Виндой. Один Color Quantizer чего стоит!

  • modesco

    Привет всем! В OS X El Capitan доступ к папке /usr/bin закрыт, нужно отключать System Integrity Protection.

  • Спасибо, заметка очень помогла.