Примечание: ниже расположен перевод заметки Image Optimization, Part 3: Four Steps to File Size Reduction от Stoyan Stefanov. В ней рассматриваются наиболее популярные консольные утилиты для минимизации изображений с точки зрения их дальнейшей автоматизации. Мои комментарии далее курсивом.
Об авторе: Stoyan Stefanov работает веб-разработчиком в команде Yahoo! по исключительной производительности и руководит разработкой инструмента для анализа производительности — YSlow. Он также внес значительный вклад в программы, разрабатываемые с открытым исходным кодом, выступает на конференциях и является техническим писателем: его последняя книга озаглавлена Объектно-ориентированный JavaScript.
Эта третья часть серии статей, посвященных оптимизации изображений (в первых двух была сплошная вода, но на досуге почитать интересно). С предыдущими частями можно ознакомиться по ссылкам:
Текущая заметка посвящена некоторым наиболее часто используемым инструментам, которые можно применить для уменьшения размера изображений. Идея заключается в следующем: мы можем получать все изображения от дизайнера, но не оставлять их в исходном виде, а немного уменьшать в размере, используя указанные ниже инструменты. Это позволит автоматизировать процесс без необходимости глубокого анализа структуры изображения.
Хорошие новости заключаются в том, что процесс этот выполняется:
PNG-файлы хранят информацию в так называемых «чанках», и далеко не все эти чанки необходимы для отображения самого изображения. В большинстве случаев они вообще не нужны. С этой точки зрения можно вполне безопасно использовать инструмент наподобие pngcrush и вырезать все ненужные чанки. Например:
> pngcrush -rem alla -brute -reduce src.png dest.png
Давайте рассмотрим параметры запуска в командной строке:
src.png — исходное изображение, dest.png — результируюее изображение.-rem alla удаляет все чанки, но сохраняет один-единственный, содержащий прозрачность.-reduce пробует уменьшить число цветов в палитре, если такое возможно.-brute пробует более сотни различных методов для оптимизации изображения дополнительно к 10 по умолчанию. Это работает медленно и в большинстве случаев не сильно улучшает ситуацию. Но если вы собираетесь делать это не на боевом сервере, одна или две дополнительные секунды ни на что не повлияют, а шанс того, что финальный размер файла будет меньше, увеличивается. Этот параметр можно удалить в том случае, если нам критична общая производительность.Запуск этой команды для PNG-файлов, скачанных с сайтов, находящихся в top10 Alexa, позволил уменьшить их размер на 16,05%. Это означает, что можно легко уменьшить размер ваших PNG-изображений, сэкономить на канале и месте на диске, а также улучшить время загрузки. И все это возможно без какого-либо ущерба для качества и без вмешательств в исходный код вашего веб-приложения.
PNGcrush не является единственной утилитой, которая позволяет так поступить с PNG. Также можно попробовать некоторые из нижеперечисленных инструментов, которые обладают подобным функционалом:
Теперь, когда мы окончательно разобрались с PNG-форматом, мы можем приступить к препарированию изображений других типов. Едем дальше.
JPEG-файлы содержат некоторое количество метаданных, которые включают:
Все эти метаданные не являются необходимыми для отображения картинки на экране браузера, поэтому их можно совершенно безопасно удалить безо всякой потери качества отображения каждого конкретного пиксела. Мы уже обсуждали (в предыдущих статьях), что JPEG является формат изображения с потерями качества. Это означает, что эти самые потери происходят каждый раз при сохранении изображения. Но, к счастью, существует некоторый набор операций, которые можно выполнить без потерь. Он включает кадрирование части картинки (если размер получившегося фрагмента кратен 8x8 или 16х16 — зависит от размера минимальных блоков (MCU) в JPEG, спасибо
Ниже приведена характерная консольная команда, которая копирует исходное изображение, оптимизирует его и не добавляет никаких лишних метаданных:
> jpegtran -copy none -optimize src.jpg dest.jpg
Стоит заметить, что в последних версиях в конце используется синтаксис src.jpg > dest.jpg
Параметр -optimize позволяет jpegtran оптимизировать таблицы Хафмана (Huffman) и улучшать компрессию (без потери качества).
Запуск этой команды для сайтов из top10 Alexa вылился в уменьшение изображений на 11,85%.
Если вы хотите попробовать оптимизировать изображение и дальше, то можно использовать у jpegtran параметр -progressive. Результатом будет создание JPEG, которые загружаются в браузере постепенно, начиная с совсем плохого качества и улучшая его с появлением новой информации. Пример такого поведения можно посмотреть на фотографиях с Picassa. Но при этом лучше переключать фотографии побыстрее, иначе пока вы смотрите на одну фотографию, следующая будет загружаться в фоновом режиме.
При применении jpegtran стоит оперировать только вашими собственными изображениями, потому что утилита вырезает все метаданные, в том числе и любые копирайты.
Как лучше всего оптимизировать GIF-изображение? Перевести его в формат PNG! Как бы смешно это не звучало, это правда. В большинстве случаев мы получим файл меньшего размера (исключая те моменты, когда исходный файл слишком мал, чтобы всерьез заботится о его оптимизации) при том же качестве изображения и такой же поддержке со стороны браузеров, как мы уже обсуждали в предыдущей статье. Стоит заметить, что PNG-файлы не всегда будут меньшего размера, чем исходные GIF. Поэтому всегда стоит проверить размер результирующего файла после конвертации и взять минимальный из двух.
Чтобы автоматизировать процесс изменения ваших GIF-файлов можно воспользоваться консольной утилитой ImageMagick — convert:
> convert image.gif image.png
Для указания конкретного PNG-формата для сохранения результата можно воспользоваться:
> convert image.gif PNG8:image.png
Вполне возможно, что это излишняя мера предосторожности, поскольку ImageMagick всегда переводит GIF-изображения в PNG8 в силу палитры в 256 цветов.
После того, как вы перевели GIF в PNG-формат, не стоит забывать о давилке PNG-файлов, описанной в шаге 1, с помощью которой можно дополнительно уменьшить результирующий файл.
Если бы 10 самых популярных сайтов перевели все GIF-изображения в PNG (за исключением, пожалуй, тех, которые совсем маленькие по размеру), то, в среднем, размер этих файлов уменьшился бы на 20,42%. Единственный минус в замене GIF-файлов на их PNG-аналоги заключается в том, что нам нужно написать скрипт для нахождения и замены всех вхождений вызова первоначального изображения на его новую PNG-версию.
Другой полезной утилитой по конвертации GIF в PNG будет gif2png. Ее запуск из командной строки выглядит следующим образом:
> gif2png -nstO image.gif image.png
Теперь, когда все GIF-изображения переведены в PNG-формат, PNG ужаты и минимизированы, равно как и JPEG-файлы, что нам остается? Анимированные GIF-файлы. Есть один инструмент, предназначенный для этого случая. Он известен под названием GIFsicle. Поскольку анимация состоит из кадров, некоторые части которых не изменяются при переходе от одного фрейма к другому, GIFsicle может удалить повторяющую попиксельную информацию. Мы можем добиться этого так:
> gifsicle -O2 src.gif > dest.gif
Как было упомянуто в самом начале заметки, вся прелесть этих четырех шагов заключается в том, что они не уменьшают качество исходного изображения, поэтому не нужно сравнивать результаты до и после. И все они являются утилитами командной строки, что позволяет их спокойно использовать для любой автоматизации. И вы ничего не потеряете, если запустите эти скрипты для изображений перед тем, как загрузить их по FTP на веб-сервер. Вы только выиграете.
И конечно, вы всегда можете воспользоваться сервисом smush.it, например, чтобы оценить, насколько можно потенциально уменьшить все ваши файлы изображений.
Пакетная оптимизация на webo.in также сделана с применением всех рекомендаций и анализом ситуации до и после. Кроме оптимизации изображений (согласно всем вышеприведенным советам) также минимизируются CSS- и JavaScript-файлы при помощи YUI Compressor и затем сжимаются в архивы. При преобразовании GIF-изображений в PNG их вызовы заменяются в исходных файлах на соответствующие.
favicon.ico — это как?canvas и PNG-картинокcanvas и PNG-картинок