За годы существования браузеров их производители встроили в них поддержку, без сомнения, гигантского количества форматов графики: GIF, JPEG,
Часть форматов исчезла (как поддержка
Интересным также является формат SVG, который активно прокладывает себе дорогу, но, к сожалению, не поддерживается Internet Explorer; впрочем, есть надежда, что следующая версия этого браузера его поддерживать будет. Так что мы рассмотрим и его, с расчетом на будущее.
О формате ICO мы говорить не будем, хотя он и поддерживается всеми браузерами: его использование, во-первых, весьма специфично, а во-вторых, детально было рассмотрено в книге "Разгони свой сайт".
Итак, четыре формата графики: GIF, JPEG, PNG и SVG, у каждого из них своя специфика, у каждого свои особенности, каждый поддается, в разной степени, оптимизации по размеру. Эти вопросы и будут рассмотрены в этой лекции подробнее.
Придуманный в 1987 году фирмой
Это первый формат (наряду с XBM), применявшийся в вебе, что наложило свой отпечаток: статичное изображение или кадр анимации могут содержать не более 256 цветов.
До появления PNG, который будет рассмотрен ниже, в этом формате ценилось наличие прозрачности, которого не было в JPEG. Но и сейчас формат популярен, в основном из-за наличия в нем анимации, поскольку альтернативные форматы анимации (APNG,
Изображения GIF хорошо поддаются оптимизации. В параграфе № 8 "Ководства" Артемия Лебедева есть небольшое, но интересное исследование особенностей этого
Некоторые программы содержат специальные инструменты, вносящие в изображение регулируемые горизонтальные искажения, которые позволяют добиться лучшего сжатия, пусть и ценой некоторой потери качества.
В Adobe Photoshop этот инструмент называется "Ctrl+Shift+Alt+S ) формата GIF.
Инструмент удобно применять в изображениях, где много визуального шума, регулируя искажения так, чтобы они не бросались в глаза. В некоторых случаях этот инструмент способен даже улучшить качество изображения — например, там, где из-за недостатка цветов получаются резкие неестественные переходы, искажения, вносимые "
(рис 3.1) Применение инструмента "Lossy" со значением 13 позволило смягчить переходы и уменьшить вес изображения с 596 Кб до 281 КбРецепт, конечно же, не универсален. Но существует еще несколько способов сделать GIF меньше: изменение параметров сжатия (размер словаря), уменьшение количества цветов, удаление опциональной информации (например, комментариев), а также исключение признаков конца кадра и оптимизациякадров изображения, если изображение содержит анимацию.
С большей частью описанных способов лучше справятся специализированные программы, которые будут рассмотрены ниже, а вот уменьшение количества цветов может сделать только человек. Автоматически невозможно оценить, насколько допустимо будет изменение качества изображения в этом случае.
Формат поддерживает фиксированное число цветов в изображении: 2, 4, 8, 16, 32, 64, 128, 256, но часть палитры может быть не использована. Если выбрать, например, 200 цветов, то в палитре будут указаны 256 цветов, 56 из которых не будут задействованы. Но чем меньше цветов использовано в изображении, тем лучше оно сожмется.
Еще одним параметром, влияющим на размер изображения, является выбор алгоритма уменьшения количества цветов, что актуально, если в формате GIF сохраняется изображение из полноцветного оригинала.
Adobe Photoshop предлагает на выбор четыре алгоритма сокращения:
Последний режим дает наихудшее качество и обязан своему существованию причинам скорее историческим: он подгоняет палитру изображения под 216 цветов, которые отображаются одинаково на всех устройствах с 256 цветами.
Режим
Selective лучше всего подходит для ярких и четких изображений; режим нацелен на сохранение цветов однотонных элементов.
В режиме Adaptive для палитры выбираются части спектра, где представлено большинство оттенков изображения; в этом режиме изображение, как правило, занимает чуть больше, чем в других.
При уменьшении количества цветов выбранная вами программа будет пытаться заменить недостающий цвет узором из имеющихся цветов, применяя для этого один из алгоритмов. Например, Photoshop предоставляет выбор из "No
Наиболее удобны для процесса выбора количества цветов и алгоритма их сокращения программы, показывающие одновременно исходное изображение и обработанный результат — например, уже неоднократно упомянутый Adobe Photoshop.
Для быстрой оптимизации изображений GIF удобны программы автоматической оптимизации. Ни одна из них уже не развивается, что, впрочем, не мешает их использовать.
Чтобы выяснить, насколько качественно справляются программы автоматической оптимизации GIF со своей работой, были использованы три набора изображений.
Первый набор — 494 иконки с небольшим количеством цветов, общим объемом 310 килобайт. Второй набор — 10 произвольных фрагментов фильмов, скачанных с сайта GIFTUBE, характеризующихся отсутствием статичных межкадровых элементов и использованием всей палитры цветов, объем 7,63 Мб. Третий набор — 411 анимированных изображений, с использованием неполной палитры; в изобилии присутствуют статичные элементы, объем — 21,95 Мб.
| Статичные иконки | Фильмы | Простая анимация | |
|---|---|---|---|
| Gifsicle 1.5 | 258 Кб (17%) | 7,63 Мб (0 %) | 21,53 Мб (2%) |
| GIFLite 2.10 | 275 Кб (11%) | 6,19 Мб (19%) | 19,22 Мб (12%) |
| SuperGIF 1.5 | 188 Кб (40%) | Файлы испорчены* | 17,78 Мб (19%) |
| Advanced GIF Optimizer 4.0.12 | 250 Кб (19%) | 7,63 Мб (0%) | 21,57 Мб (2%) |
| Real GIF Optimizer 3.0.5 | 250 Кб (19%) | 7,63 Мб (0%) | 21,57 Мб (2%) |
| Ultra GIF Optimizer 1.02 | 250 Кб (19%) | 7,63 Мб (0%) | 21,57 Мб (2%) |
| A Smaller GIF 1.22 | 293 Кб (5%) | 7,63 Мб (0%) | 21,89 Мб (>1%) |
* SuperGIF показал потрясающие способности (файлы были уменьшены более чем наполовину), но при проигрывании на всех оптимизированных изображениях появился шлейф от движущихся объектов.
Как показывают тесты, лучше всех справляется с оптимизацией изображения программа SuperGIF (платная программа BoxTop Software, $49,95), но результат ее работы нужно контролировать: полноцветную анимацию она портит. Единственная программа из наших тестов, которая успешно оптимизировала такие изображения, — это GIFLite, тоже платная программа компании White River Software (цена $30, но существует ли компания — неясно), закончившая свое развитие в 1995 году (программа под DOS).
Если с запуском SuperGIF проблем нет — это программа с графической оболочкой и почти без настроек, — то GIFLite запустить сложнее: она работает только из командной строки, не поддерживает длинные имена файлов и не умеет самостоятельно выбирать метод, который оказался лучшим для конкретного файла. Эти печальные недостатки устраняет следующая программа, написанная на языке пакетных файлов Windows:
@ECHO OFF REM Написал Евгений "BOLK" Степанищев. 2007. MKDIR GIFLITE.$$$ 2>nul REM Основной цикл обработки файлов GIF FOR /R %%N IN (*.gif) DO @CALL :method %%N REM Удаляем весь мусор, который мог остаться DEL /Q giflite.tmp 2>nul RMDIR /S /Q GIFLITE.$$$ EXIT :method REM Перебираем методы FOR %%M IN (0 1 2 3) DO @CALL :giflite %%M %%~s1 %1 REM Сортируем полученное по размеру и забираем последний REM (наименьший) файл FOR /F "usebackq skip=3" %%R IN (`DIR /B /O-S GIFLITE.$$$`) ? DO @CALL :getresult %%R %1 GOTO :EOF :getresult REM Переписываем файл на место прежнего, удаляем мусор MOVE /Y GIFLITE.$$$\%1 %2 DEL /Q GIFLITE.$$$\*.* GOTO :EOF :giflite REM Запускаем преобразование GIFLITE.EXE -t -h -m%1 -o %2 GIFLITE.$$$\%1
Уменьшить размер анимированного GIF можно и самостоятельно, работа нетрудная, но долгая и рутинная. Анимация в GIF устроена достаточно просто: каждый последующий кадр перекрывает предыдущий, причем размеры кадров могут быть меньше размера изображения, и в этом случае на экране будет содержимое двух кадров: текущий кадр и то, что не было перекрыто из предыдущего.
Отсюда получается, что если в анимированном изображении есть статичные элементы (например, задний фон), то их нужно оставить на предыдущем кадре, перекрыв следующим лишь то, что изменилось. Причем если использовать прозрачность, то перекрывать можно области любой формы. Размеры и палитра кадров уменьшится, а значит, уменьшится и размер файла с анимацией.
Очень хочется упомянуть вытекающий из предыдущего рецепта способ создания полноцветных изображений в формате GIF, тем более что такой способ также иногда позволяет получить выигрыш в размере.
Самый простой принцип получения полноцветного GIF следующий: исходное изображение разбивается на несколько кусков, так, чтобы количество цветов в каждом из них было не более 256 (проще всего — сделать куски 16x16, это как раз 256 пикселей, значит, и цветов не может быть больше). Каждый кусок вставляется в отдельный кадр, и между ними выставляется нулевая задержка. Таким образом, пользователь увидит все кадры одновременно, и они сложатся в цельную картинку.
(рис 3.2) Пример изображения, занимающего меньше в полноцветном GIF, чем в pngСуществуют несколько программ, работающих подобным или чуть более сложным способом. Лучшая, на наш взгляд, — платная программа itsagif, фирмы Pedagoguery Software.
Авторы itsagif заявляют, что полноцветный GIF может выиграть у PNG по эффективности сжатия на изображениях с количеством цветов от 300 до 1000. Это действительно так, если в изображении не встречаются элементы, которые PNG умеет сжимать лучше GIF, например, градиенты.
Вот этот рисунок бабочки 756x488 пикселей содержит 1073 уникальных цвета. В файле PNG, оптимизированном программой PNGout, он занимает 77,6 Кб, тогда как в полноцветном GIF — 68,4, экономия составляет 12%.
Из рассмотренного нами материала можно сделать следующее резюме. Несмотря на конкурирующий формат (PNG) GIF еще может быть полезен: некоторые изображения занимают в этом формате меньше места, и это пока единственный универсальный для всех браузеров способ получить анимированное изображение.
Однородные по горизонтали изображения сжимаются лучше, чем остальные, поэтому в зашумленные изображения имеет смысл вносить горизонтальные искажения инструментом "
Для программной оптимизации полезны программы GIFLite и SuperGIF, причем результат работы последней необходимо контролировать.
Анимированные изображения можно оптимизировать как вручную, если воспользоваться неполным перекрытием кадров, так и автоматически, при помощи уже упомянутых программ. Интересной техникой оптимизации, основанной на анимации с нулевыми задержками, является использование программы itsagif фирмы Pedagoguery Software, которая позволяет получать полноцветные изображения, в определенных условиях занимающие меньше, чем PNG.
Алгоритм JPEG появился в 1992 году стараниями группы
В отличие от GIF JPEG является форматом сжатия с потерями: это значит, что сохраненное изображение будет отличаться от оригинала некими допустимыми потерями, часто не заметными на глаз. При сохранении выбирается так называемое "качество", которое обычно варьируется от 0 до 100, где ноль означает наихудшее качество (впрочем, может быть и иначе: в Paint
В вебе стандарт появился после GIF, впервые в браузере
Формат JPEG не стоит на месте: появился стандарт
Это кажется странным, но у браузеров есть проблемы с отображением JPEG. Эта тема лишь косвенно относится к оптимизации, тем не менее нам она представляется достаточно важной, чтобы о ней упомянуть.
Во-первых, Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG (когда качество изображения улучшается по мере его загрузки): он показывает файл только после его полной загрузки, что сильно отличается от поведения "традиционного" JPEG, когда изображение отображается сверху вниз, по мере загрузки. Проблема в том, что пользователь может подумать, что загрузка страницы закончена, тогда как некоторые
Во-вторых, некоторые программы (например, Photoshop) сохранят JPEG в цветовом пространстве CMYK, если при работе с изображением выбран именно этот режим. Определенные, используемые в настоящее время браузеры (среди них Firefox 2, Internet Explorer 6, Google Chrome 2) не смогут отобразить такое изображение, а Safari, вплоть до версии 4, отобразит его инвертированным.
(рис 3.3) Диалог выбора цветового пространства в программе Adobe PhotoshopВ-третьих, Firefox (включая текущую версию — 3.5.3) в версии под Windows иногда неверно декодирует JPEG-файлы: на некоторых изображениях только в этом браузере появляются едва заметные полосы. Увидеть их достаточно просто: создайте новый файл в Photoshop, залейте его цветом #5c6264 и сохраните с качеством 80%.
Распространенных программ для редактирования изображений немного. Определенным стандартом, по всей видимости, стали две из них: Adobe Photoshop и бесплатный редактор GIMP.
Любопытно сравнить это две программы, чтобы посмотреть, как они справляются с сохранением изображения в формат JPEG.
Для сравнения графических редакторов мы выбрали три фотографии 800x600. На первой в кадре много довольно крупных объектов: мотоциклы, деревья, люди, на второй всю фотографию занимает саркофаг с мелким орнаментом, на третьей почти ничего нет, кроме неба и океана.
Степень сжатия выставлялась в каждой программе из субъективных соображений: чтобы на глаз не были заметны искажения, вызванные сжатием.
| Программа | Крупные объекты | Мелкие объекты | Однородное фото |
|---|---|---|---|
| Adobe Photoshop CS2 | 198,4 Кб | 108,7 Кб | 35,9 Кб |
| GIMP 2.6.6 | 124,3 Кб | 73,5 Кб | 28,9 Кб |
Убедительную победу одержал GIMP: его многообразие настроек позволяет гибко управлять размером файла.
(рис 3.4) Диалог сохранения файла в формате JPEG в редакторе GIMPУказание текста комментария, использование маркеров перезапуска, сохранение эскиза и
Смысл значений параметра "Субвыборка" (или цветового прореживания) — уменьшение информации о цвете. Форматов записи этого параметра несколько, но наиболее распространенный — три цифры с разделителями. Читаются они очень просто: например, "4:2:2" означает "на каждые четыре пикселя сохраняется четыре значения яркости и по два значения на каждый компонент цвета". Из этого правила есть одно исключение: "4:2:0" расшифровывается как "на каждые четыре пикселя в квадрате 2x2 сохраняются четыре значения яркости и по одному значению цвета".
Значение "4:2:0" часто называют "2x2", а "4:4:4"— "1x1". Как видно, GIMP использует другие, более понятные значения субвыборки. К примеру, "2x2, 1x1, 1x1" означает: для квадрата 2x2 пикселя сохраняются все значения яркости, одно значение по вертикали и одно по горизонтали для первой компоненты цвета, а также одно по вертикали и горизонтали для второй компоненты.
Чем меньше информации о цвете сохраняется, тем меньше файл и тем более он далек от оригинала. Легко сделать оправданный вывод, что субвыборка "4:2:2" больше скажется на четких вертикалях, а "4:2:0" сделает более расплывчатыми и вертикальные, и горизонтальные линии.
Параметр "Метод
Параметр "Маркеры перезапуска" влияет на расстановку специальных маркеров, используемых для нейтрализации ошибок. В вебе они едва ли полезны, а их применение увеличивает размер файла.
Параметр "Прогрессивная загрузка" с вероятностью 75% уменьшит размер изображения, если оно меньше 10 Кб, и с вероятностью 94% увеличит его, если оно больше этого размера. Если вам не важны соображения совместимости с Internet Explorer, изложенные выше, то вы можете попробовать включить этот параметр, чтобы посмотреть, не уменьшится ли размер.
На размер изображения также влияют резкие переходы (границы): чем их меньше, тем лучше оно сжимается. Поэтому GIMP на экране сохранения JPEG-изображения содержит инструмент для его сглаживания. Для некоторых типов изображений (например, мелкий лиственный рисунок) легкое увеличение сглаживания не вызовет ухудшения восприятия, но уменьшит размер.
Справедливости ради надо заметить, что на размер влияют еще два параметра изображения: чем ниже его контрастность (
Параметр "Качество" влияет на изображение очевидным способом. Хороший алгоритм — выбрать качество 75% и, если искажения слишком заметны, попробовать его увеличить. Если исходная картинка уже невысокого качества, можно попробовать снизить этот параметр до 50%. Никогда не сохраняйте изображения с качеством выше 95%, это не даст улучшения качества изображения, но серьезно увеличит его размеры. Качество "100%" не означает "сохранить без потерь", это всего лишь математический предел алгоритма.
Куда более сложным, но и более мощным средством оптимизации изображений при сохранении является платная программа JPEG Optimizer фирмы Xat. Она дает экономию большую, чем GIMP, но чтобы ее добиться, придется потратить куда больше времени.
(рис 3.5) Интерфейс программы Xat JPEG OptimizerПринцип обещаемой чудесной оптимизации заключается в том, что JPEG позволяет сохранять разные области изображения с разным качеством. Например, более темные или однородные области можно сохранить с качеством похуже, содержащие мелкие детали — с наилучшим.
Вообще-то JPEG Optimizer имеет автоматический режим, но, на наш взгляд, эффективнее всего работать с программой в режиме эксперта ( "Options — ).
Для обработки изображения первым делом нужно выбрать минимально допустимое качество, для этой цели сверху есть специальный ползунок.
Далее нужно определить, какие области изображения можно сохранить с наихудшим качеством. На фотографии выше это, например, песок слева снизу, темное пятно справа вверху и столб с левой стороны рисунка. Выбираем режим "Compress Much More" (F8) при помощи инструментов "
Для областей, где настолько сильное сжатие применять нельзя, можно выбрать режимы "Compress Even More" (F7) или еще более слабый "Compress More" (F6). Если какую-то область вы сжали слишком сильно, не беда, можно воспользоваться инструментом "Undo" (Ctrl-Z) или переключиться в режим "Remove Extra Compression" (F5) и выделить нужную область.
Потрудившись, можно уменьшить размер изображения на 3-20% по сравнению с GIMP, в зависимости от изображения.
Два этапа JPEG-сжатия представляют для ручной оптимизации непосредственный интерес: это перевод цветов в пространство
Начнем с блоков. По алгоритму, после преобразования цветовой модели изображение разбивается на небольшие блоки 8x8 пикселей и уже с ними производится остальная работа.
(рис 3.6) Последствия сохранения изображения в формат JPEG с выравниванием границ по сетке (слева) и без выравнивания (справа)Посмотрим на эти два идентичных изображения, сохраненных в формате JPEG с качеством ноль. Почему изображение слева чистое, а справавокруг квадратов виден "мусор"? Ответ очень прост: на изображении слева границы цветов выравнены по решетке 8x8 пикселей, каждый квадрат 8x8 содержит только один цвет, а изображение справа сдвинуто на один пиксель вправо и вниз.
На практике это означает, что если у вас в изображении есть прямоугольные области, лучше выровнять их границы по решетке 8x8. В Photoshop для этой цели очень удобно пользоваться инструментом "Grid" ( Ctrl+' ), выставив в настройках ( Ctrl+K, Ctrl+6 ) удобный шаг решетки. Важно также знать, что Photoshop при сохранении JPEG с качеством 0-50 оптимизирует цвета по решетке 8x16.
После выравнивания изображение можно попробовать сохранить в более низком качестве — качество не пострадает, тогда как размер уменьшится.
Когда выровнять все границы не получается и вокруг одной из них слишком много "мусора", можно поменять параметр "цветовое прореживание" ("
Следующий метод был позаимствован из статьи "Техногрета" студии Артемия Лебедева "Оптимизация JPEG. Часть 2", работает только на изображениях с контрастной мелкой текстурой (например, мелкий темный текст на светлом фоне) и является относительно сложным.
Как уже было упомянуто, по алгоритму JPEG изображение первым делом переводится в пространство цветов
В Photoshop есть цветовой режим Lab, где канал "L" задает яркость, а две хроматические составляющие "a" и "b" описывают, соответственно, положение цвета в диапазоне от зеленого до пурпурного и от синего до желтого. Именно в этом режиме проще всего производить все дальнейшие манипуляции, а монитор хорошо бы предварительно отка-либровать.
Для иллюстрации этого метода мы выбрали фотографию сухого завтрака 700x432, которая подходит как нельзя лучше: в ней есть области, разные по яркости и текстуре.
(рис 3.7) Фотография сухого завтрака поможет нам проиллюстрировать, как меняется размер файла при удалении из него не воспринимаемой глазом информацииДо всех манипуляций эта картинка, сохраненная в Photoshop с качеством 55%, занимает 105,5 Кб.
Откроем нашу картинку в Photoshop и перейдем в цветовой режим Lab ( Image — Mode — Lab Color ), после этого сделаем дубликат картинки, чтобы контролировать процесс ( Image — Dublicate ). Обе картинки лучше поставить рядом, для наглядности.
У редактируемого изображения посмотрим каналы "a" и "b" ( Ctrl+2, Ctrl+3 ), на экране будет видна текстура нашего изображения, с двумя выраженными зонами:
(рис 3.8) Сухой завтрак, канал "b"Каждую из двух зон нужно обработать отдельно. Переключимся в канал "a" ( Ctrl+2 ), выделим (инструментом "Lasso Tool") поочередно каждую зону и применим к ним фильтр Filter — ). Значение Radius надо выбирать минимальное, при котором пропадает структура. Для первой зоны у нас получилось значение 24, для второй — 34.
Включаем все каналы ( Ctrl+~ ), сравниваем с оригиналом и убеждаемся, что изображение стало более насыщенным. Выделяем редактируемые нами блоки и вызываем окно Levels ( Ctrl+L ). Сдвигаем средний бегунок влево, пока картинка не становится похожей на оригинал.
То же самое повторяем для канала "b". После всех манипуляций размер файла при сохранении в JPEG уменьшился на 10%.
Помимо самого изображения формат позволяет хранить произвольное количество метаинфор-мации. Самые известные примеры: комментарий, превью изображения и структурированные, расширенные данные, известные как
В
Для программ, оптимизирующих уже готовые файлы, были взяты 360 картинок из блога одного из авторов, объемом в 10,94 Мб. В части файлов присутствуют комментарии и другие метаданные. Программ для оптимизации уже готовых JPEG (без изменения их качества) оказалось совсем немного. Кроме удаления лишних данных они производят небольшую оптимизацию кодов Хаффмана, что тоже помогает уменьшить размер.
| Программа | Результат |
|---|---|
| PureJPEG 1.0 | 10,82 Мб (1%) |
| jpegtran 08-Feb-2005 | 10,67 Мб (2,4%) |
| Jpegoption 1.2.2 | 10,78 Мб (1,7%) |
Лидирует тут jpegtran набора утилит Independent JPEG Group, но результат ее работы трудно назвать значительным. Так что этот метод следует рассматривать как дополнительный и завершающий по отношению ко всем прочим.
Рассмотрев различные рецепты оптимизации, мы можем сделать следующий вывод. Графические редакторы, позволяющие сохранять изображения в формате JPEG, при одинаковом визуальном качестве дают различный размер изображения; если необходимо еще более уменьшить размер, ручную оптимизацию можно произвести при помощи Xat JPEG Optimizer. Цветовые границы изображений, сохраняемых в этом формате, рекомендуется выравнивать по сетке 8x8 (и 8x16, если используется Photoshop и качество 0-50) , а мелкие контрастные текстуры оптимизировать, минимизировав информацию о цвете вручную. После всех манипуляций изображение нужно обработать утилитой jpegtran.
История PNG началась 4 января 1995 года, так что это самый молодой из поддерживаемых всеми браузерами растровых форматов. Формат обеспечивает глубину цвета до 48 бит, полупрозрачность (
Формат, так же как и GIF, поддерживает индексированную палитру и бинарную прозрачность, что позволяет использовать PNG для хранения как полноцветных изображений без искажений, так и изображений с малым количеством цветов.
Разработанный для хранения статичного изображения, формат не поддерживает анимацию, но попытки исправить текущее положение вещей предпринимаются. Сейчас стандартом де-факто становится APNG — довольно удачное расширение PNG; что интересно — изображения в этом формате отображаются в браузерах, которые его не поддерживают, как статичные изображения.
На текущий момент APNG поддерживают Opera (с версии 9.5) и Mozilla Firefox (версия 3.0 и выше).
К сожалению, использование формата тормозит один из распространенных браузеров — Internet Explorer. Все версии этого браузера, начиная с четвертой (где впервые появилась поддержка), имеют проблемы в отображении PNG:
Впрочем, у остальных браузеров тоже не все гладко, хотя список их прегрешений не столь впечатляет:
Как было сказано выше, Internet Explorer до седьмой версии не поддерживал полупрозрачность в изображениях PNG. Этот недостаток исправляется одним из двух методов: использование фильтра AlphaLoader, который позволяет загружать
Оба метода обладают недостатками. Применение фильтров вообще и AlphaLoader в частности приводит к повышенному расходу памяти и ухудшению времени отклика браузера. Для иллюстрации проблемы можно привести исследование Стояна Стефанова (http://ap-project.org/Russian/ Article/View/83/Russian translation/), где рассматривалось сто иллюстраций с фильтром и без него. Использование фильтров увеличило время от-рисовки страницы в 27 (!) раз, а размер задействованной памяти — в 78(!) раз.
Использование
Так что для старых версий Internet Explorer рекомендуется пользоваться, где возможно, PNG с индексированными цветами и бинарной прозрачностью вместо полупрозрачности, прибегая к DDbelatedPNG (http://dillerdesign.com/experiment/ DD belatedPNG/).
Один недостаток отображения файлов PNG в браузерах связан не с ошибками, а с добрыми намерениями авторов формата. Дело в том, что одни и те же цвета выглядят в различных операционных системах по-разному.
Разработчикам PNG это показалось неправильным. Они ввели в формат несколько полей, куда записываются характеристики машины и операционной системы, на которой создано изображение. В дальнейшем, если параметры оборудования или ОС на машине, где изображение показывается, отличается, производится специальная коррекция.
Идея хорошая, но в вебе помимо PNG используются и другие форматы, в которых такая коррекция не применяется. Это приводит к тому, что стык PNG с JPEG может отличаться по цвету в Mac OS, если оба изображения готовились под Windows.
Можно не использовать PNG вообще и не задумываться о таких проблемах, альтернатива — удалить из файла всю цветокорректирующую информацию. Утилита optipng делает это по умолчанию, но можно для той же цели применить устаревшую во всех отношениях утилиту PNGcrush:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png J outfile.png
К счастью, новые версии Adobe Photoshop (начиная с CS4) не записывают в файл эту информацию, GIMP же не заполняет поле gAMA, без которого браузеры коррекцию не производят.
PNG, как уже частично рассматривалось выше, умеет хранить несколько типов изображения: полутоновое изображение (оттенки серого) с глубиной цвета 8 бит, цветное индексированное (восьмибитовая палитра цветов глубиной 24 бита) и полноцветное изображение с глубиной 48 бит.
Кроме того, в PNG есть два типа прозрачности: полупрозрачность (256 уровней альфа-канала) и бинарная прозрачность (как в GIF — либо 100% прозрачно, либо нет).
Большей частью выбор типа изображения очевиден, но есть тонкости.
Изображение, содержащее исключительно оттенки серого (так называемое "черно-белое"), выгоднее всего сохранять в специально предназначенном для этого формате с глубиной цвета 8 бит. Из-за того, что компоненты цвета записываются меньшим количеством байт, файл занимает меньше места.
В редакторе Adobe Photoshop для сохранения изображения в файле этого типа нужно воспользоваться инструментом "Save As..." ( Shift+Ctrl+S ), а не "Save for Web" ( Alt+Shift+Ctrl+S ), последний этот тип формата не поддерживает. Конечно, чтобы Photoshop понял, что нужно сохранить именно с такой глубиной цвета, режим изображения должен быть "Grayscale" ( Image — Mode — Grayscale ).
(рис 3.9) Рис. 3.9. Слева фотография, сохраненная с глубиной цвета 24 бита (349 Кб),справа — 8 бит (253 Кб)Редактор GIMP также умеет сохранять такие изображения правильно. Если выбранный вами редактор этого делать не умеет — не беда, можно использовать утилиты OptiPNG или PNGout (их мы еще рассмотрим ниже), умеющие понижать глубину цвета:
optipng -o7 dog.png -out dog-optimized.png pngout /c0 dog.png dog-optimized.png
Другая особенность относится к сохранению картинок с малым количеством цветов и без прозрачности — некоторые изображения занимают меньше места в PNG с глубиной в 24 бита, чем при использовании индексированной палитры. В основном это касается градиентных изображений.
Сергей Чикуенок, специалист по оптимизации изображений, советы которого легли в основу этой лекции, объясняет это тем, что в полноцветных изображениях цвет описывается тремя байтами (RGB), тогда как в формате с индексированными цветами — четырьмя (RGB + один байт в палитре). Помимо этого само изображение может быть настолько эффективно сжато, что добавление к файлу таблицы палитры (которая не сжимается) может чувствительно увеличить его размер.
Существенную экономию дает в некоторых случаях малоизвестная возможность PNG — использование полупрозрачности в файлах с индексированной палитрой, где каждый элемент палитры описывается не тремя составляющими (RGB), а четырьмя —
(рис 3.10) PNG с индексированной палитрой и полупрозрачностью в Internet Explorer 6.0 и в остальных браузерахРедактор Photoshop, опять же, не поддерживает этот формат, но optiPNG автоматически преобразует изображения с полупрозрачностью, содержащие 256 цветов и меньше, в файл такого типа. Полноцветные изображения при желании можно преобразовать утилитой "
Интересно поведение Internet Explorer 6.0 при отображении файлов такого типа. Как известно, полупрозрачность в PNG он не поддерживает, а такие файлы, без применения хаков, отображает как GIF — с бинарной прозрачностью, что лучше, чем серый цвет, которым IE заполняет прозрачные области обычных PNG.
Давайте отвлечемся от приемов ручной оптимизации и рассмотрим инструменты, которые помогут произвести оптимизацию автоматическую. Насколько большой выигрыш можно получить, если взять обычные изображения, сохраненные в графическом редакторе, и обработать такими утилитами?
Для тестирования были выбраны три утилиты: PMT (PNGcrush), optiPNG и PNGout. Поскольку pngout не умеет сама перебирать методы оптимизации, для нее был написан небольшой командный файл, использующий для перебора optiPNG (метод взят с блога blog.ad.by):
@ECHO OFF IF "%1"=="" EXIT 1
FOR /F "usebackq delims==,IDAT tokens=5" %%i in J
('optipng -o4 -full -sim DO SET f=%%i
IF "%2"=="" (
pngout /k0 /n2 /f%f:—1,1% || EXIT 3
) ELSE (
pngout /k0 /n2 /f%f: —1,1% "%1" "%2" || EXIT 3
)
Для тестов мы взяли по 10 иллюстраций каждого типа: фотографии (глубина цвета — 24 бита), полноцветные синтетические (глубина цвета — 24 бита), синтетические с градациями серого (8 бит) и с индексированной палитрой (8 бит).
| Программа | Фото | Полноцветное | Серое | Индексированное |
|---|---|---|---|---|
| optiPNG 0.6.3 | 4,52 Мб (5%) | 4,75 Мб (9%) | 2,67 Мб (21%) | 510,01 Кб (9%) |
| PNGout 21 Jun 2009 | 4,38 Мб (8%) | 4,55 Мб (13%) | 2,57 Мб (24%) | 495,13 Кб (11%) |
| PNGcrush 1.6.15 | 4,55 Мб (4%) | 4,99 Мб (4%) | 3,20 Мб (5%) | 515,21 Кб (8%) |
| PNGoutwin 1.0.1 | 4,54 Мб (4%) | 4,07 Мб (22%) | 3,07 Мб (9%) * | 484,87 Кб (13%) |
* неожиданно плохие результаты PNGoutwin на изображениях серого объясняются просто: программа не справилась с понижением глубины цвета до 8 бит; если понизить глубину заранее (выше было рассмотрено, как это делается), то PNGoutwin справляется с заданием успешнее всех — 2,56 Мб (24%).
По всей видимости, на первое место стоит поставить платную программу PNGoutwin, на второе — PNGout (в паре с optiPNG для подбора параметра оптимизации изображения), а аутсайдером по качеству является PNGcrush.
Конечно, для оптимизации изображения PNG можно применять все те же методы, что и для GIF, — например, уменьшение количества цветов; рассматривать здесь дважды один и тот же материал смысла не имеет.
Даже настройки сохранения PNG с индексированной палитрой в Adobe Photoshop те же, но не хватает одного инструмента — "
В случае PNG это правило тоже иногда действует, но соответствующего инструмента нет. Выход один — сохранить изображение сначала в GIF, а потом преобразовать в PNG.
Другой искажающий способ оптимизации — постеризация. Если говорить бытовым языком, то постеризация — это изменение количества используемых цветов. Чем меньше уровень постеризации, тем меньше цветов в изображении и тем крупнее одноцветные области.
В Photoshop инструмент для постеризации изображения вызывается Image — Adjustments — .
Благодаря снижению количества цветов изображение лучше упаковывается и занимает меньше места. Особенно эффективен этот прием для фотографических изображений, где пастеризованные области обычно незаметны.
Способ очень простой, но есть неудобство: результатом постериза-ции управлять невозможно, но есть немало более управляемых способов снизить количество цветов в изображении.
Первым делом нам понадобится плагин PhotoFreebies plugin suite, скачать который можно с сайта производителя.
(рис 3.11) Исходное изображение (226,3 Кб)Откроем исходное изображение в Photoshop и создадим его дубликат ( Image — ), удалим из дубликата информацию о прозрачности ( Filter — Photo Wiz — Remove Transparency ) и сменим режим на "Индексированные цвета" ( Image — Mode — Indexed Color ).
В появившемся окне выбираем 50 цветов: этого достаточно, чтобы львенок смотрелся приемлемо, а также убираем галочку "
Следующий шаг — меняем режим обратно на RGB и копируем изображение в оригинальный файл в отдельный слой, который должен располагаться поверх оригинального. Используем нижний слой как маску ( Alt+Ctrl+G ) и сохраняем полученное изображение.
В данном случае картинка с львенком стала занимать 164,5 Кб, сократившись на 27%.
Изображения неоднородны по детализации, и было бы замечательно, если при снижении количества цветов программе можно было бы указать, что какой-то области нужно уделить "больше внимания", то есть выделить большее количество цветов, чтобы эта область выглядела лучше.
На наш взгляд, самая простая и эффективная программа, позволяющая это делать, — Color
Исходное загруженное изображение занимает 394 Кб в полноцветном PNG и 116,8 Кб с индексированной палитрой.
Некоторые инструменты, предоставляемые программой, нуждаются в пояснении. В центре — исходное изображение, клик левой клавишей мыши на нем показывает картинку в исходном качестве, что очень удобно для оценки искажений. На скриншоте программа находится в режиме редактирования маски повышения качества (включается кисточкой в верхней панели инструментов), светлыми мазками указаны места, где снижать качество нельзя. Толщину мазка регулирует инструмент справа от кисточки, подчищать маску можно ластиком.
Внизу слева находится выбор алгоритма замещения недостающих цветов, сообщается, что лучше всего работает "Флойд—Штейнберг", хуже всего — "Байер".
(рис 3.12) Color quantizer, редактирование маски повышения качестваПравее идет поле отладочной информации, еще правее — два поля, выбор количества цветов и поле, указывающее, сколько процентов палитры резервировать под второй проход. Второе поле сугубо экспериментальное, но неясным образом влияет на качество изображения.
Чуть ниже находятся два ползунка: первый влияет на качество преобразования (чем более влево, тем качественнее и тем медленнее работает программа), второй — экспериментальный, чем больше цветов задано, тем больше его нужно сдвинуть влево, но точного алгоритма тут нет.
Переключатель "RGB/
Справа от изображения видны уровни изображения и его текущая палитра, палитру можно отсортировать по количеству использований цвета (Weight), по оттенку (Color) или яркости (Light). На каждый элемент палитры можно кликнуть мышкой, левая клавиша показывает, где на картинке используется цвет, правая — выводит меню, где элемент можно заменить, удалить и так далее.
Итак, вернемся к нашему изображению. После снижения количества изображения до 120 цветов качество изображения вполне приемлемо, если бы не некоторые детали — полупрозрачные крылья, блики на усиках и боках пчел заметно исказились, поэтому мы наносим на них маску повышения качества. После проделанной операции рассматриваем остальные детали; если искажения в нихпочти незаметны и не требуют нанесения маски, но выглядят все же не идеально, можно попробовать изменить параметр "
В итоге изображение пчел стало занимать 66,48 Кб, что на 43% лучше, чем предыдущий результат.
На этапе подготовки этой книги вышла новая версия программы. Появилось несколько интересных улучшений: полный перебор всех параметров PNGout (включается отдельной кнопкой с двумя дискетами на панели инструментов), работает он очень долго, но эффективно, появился усредняющий фильтр ("метла" в панели инструментов), который усредняет соседние цвета, что способствует лучшему сжатию изображения. Фильтр позволяет указать алгоритм усреднения (например, "только по вертикали"), его "жесткость" и степень усреднения. Жесткий фильтр хорошо подходит для фотографий, мягкий может применяться для снижения шума в изображении.
Еще одно долгожданное улучшение — изменение масштаба рабочей области. Этот инструмент доступен в меню правой клавиши мыши, также масштабом можно управлять клавишами "+" и "-" на цифровой клавиатуре.
В Photoshop до версии CS4 был инструмент, позволяющий достигать того же эффекта, что и маска влияния качества в программе Color
На рисунке показано, где расположен инструмент, включающий маску влияния; доступен он только в режиме PNG-8. Рядом с параметром "
Инструмент, задающий маску, позволяет указывать канал (Channel), в котором записано, насколько много нужно уделять внимания этому участку. Для маски влияния на распределение цветов значение имеет яркость участка в канале: чем выше яркость, тем больше цветов Photoshop постарается сохранить на этом участке.
(рис 3.13) Маска влияния на распределение цвета в PhotoshopОткрываем наше изображение и в палитре "Channels" создаем новый канал, назовем его "color". Включаем канал "RGB", чтобы видеть само изображение, выбираем инструмент "Кисточка" и прикидываем, какие участки должны выглядеть наиболее качественно. Очевидно, что полупрозрачным крыльям и более темным местам изображения можно уделить меньше внимания, чем теням на светлых полосках пчел.
Сопоставляя таким образом важность, раскрашиваем наше изображение и время от времени переключаемся в "Save for Web" ( Alt+Shift+Ctrl+S ), чтобы увидеть результат. Работа куда более кропотливая, чем при использовании программы Color
Если изображение содержит полупрозрачные области, то, вероятно, в них находятся детали, которые вряд ли видны глазу, и чем область прозрачнее, тем менее важно, насколько качественно она прорисована.
Как видно, в изображении есть полностью прозрачная область вокруг шара и его полупрозрачное отражение. Кликаем с зажатой клавишей Ctrl на миниатюре изображения в палитре "Layers", переходим в "Channels" и нажимаем на кнопку "Save selection as channel" из ряда в низу палитры каналов (рис. 3.15).
(рис 3.14) Образец для наших экспериментов, отражающийся в "мокром полу" (2,44 Мб)
(рис 3.15) Создаем канал из выделенного участкаТеперь нам нужно отделить пиксели, которые в изображении наиболее заметны. Для этого снимаем выделение ( Ctrl+D ), инвертируем канал ( Ctrl+I ) и воспользуемся диалогом Threshold ( Image — Adjustments — Threshold ).
Меньшее значение параметра Threshold сохранит меньше деталей, а значит — уменьшит размер файла.
Кликаем с зажатой клавишей Ctrl на миниатюре канала в палитре "Channels" и выбираем фильтр "Filter — ). Его значение опять же нужно подобрать вручную; чем больше значение, тем меньше деталей сохранится и тем меньше будет размер файла.
При значениях Threshold, равному 138, и
Редактор Adobe Photoshop имеет одну малоизвестную особенность, иногда сильно увеличивающую размер файла PNG.
Попробуйте открыть в Photoshop какую-нибудь фотографию, выделить любым инструментом (например, "Lasso Tool") любой сложный контур, скопировать его в новый документ, после чего сохранить его через "Save For Web" ( Alt+Shift+Ctrl+S ).
(рис 3.16) Инструментом "Elliptical Marquee Tool" вырезаем сложный контурЛогично было бы предположить, что полностью прозрачные части заполнены одним прозрачным цветом, чтобы изображение лучше упаковывалось. Оказывается, это не так. Откроем сохраненное изображение программой XnView, в режиме просмотра выбираем "Рисунок" — "Преобразовать в цветное", в появившемся окошке выбираем "Применить".
(рис 3.17) Результат обработки нашего изображения программой XnViewКак видно, Photoshop оставил в невидимых областях много лишнего. Впрочем, избавиться от этого вполне нам по силам.
Если ваше изображение не содержит полупрозрачных областей, годится следующий простой способ: Ctrl+клик на миниатюре изображения в палитре "Layers", инвертируем выделение ( Ctrl+Shift+I ), удаляем выделенное (клавиша "Delete") и снова сохраняем наше изображение (Alt+Shift+Ctrl+S).
В случае, если полупрозрачные области присутствуют, придется потрудиться немного больше: Ctrl+клик на миниатюре изображения в "Layers", переходим в режим быстрой маски (клавиша "Q"), в диалоге Image — Adjustments — Threshold переставляем бегунок в крайнее левое положение и нажимаем "OK", выходим из режима маски (опять "Q") и инвертируем выделение ( Ctrl+Shift+I ). После чего заливаем выделенную область черным цветом ( Edit — Fill ), снова инвертируем выделение ( Ctrl+Shift+I ) и добавляем к слою маску (иконка "Add Layer Mask" внизу палитры слоев). Изображение можно сохранять.
В нашем случае экономия составила 7%. Хотим сразу предостеречь, что этот прием иногда не уменьшает, а увеличивает размер файла. Дело в том, что формат PNG исключительно хорошо сжимает участки определенных типов (например — градиенты), так что если за границей видимого осталась какая-то часть градиента, то она может не мешать, а способствовать сжатию.
Поэтому хорошая практика — попробовать сохранить оба варианта и выбрать меньший по размеру.
Суть следующего приема — в разделении изображения на два: в первом, в индексированной палитре, сохраняется само изображение, во втором, полноцветном — полупрозрачные области. В браузере оба изображения накладываются друг на друга, например, второе указывается как фон первого.
В качестве примера возьмем стилизованный земной шар, отражающийся в мокром полу, который мы использовали выше.
Открываем изображение в Photoshop. Если оно состоит из нескольких слоев, то его необходимо слить в один. Далее выделяем объект в слое, кликнув с зажатой клавишей Ctrl на миниатюре в палитре "Layers", переходим в палитру "Channels" и создаем новый канал, кликнув на "Save selection as Channel".
Снимаем выделение ( Ctrl+D ) и вызываем инструмент "Threshold" ( Image — Adjustments — Threshold ), перетаскиваем бегунок в крайнее правое положение. Теперь у нас есть маска для выделения непрозрачных областей.
Кликаем с зажатой клавишей Ctrl на миниатюре в маске Alpha 1, переходим в палитру "Layers", выбираем слой с изображением и выполняем команду "Layers via Cut" ( Shift+Ctrl+J ). Теперь у нас два слоя, которые нужно сохранить в отдельных файлах. Непрозрачные пиксели сохраняем в PNG с индексированной палитрой (или в GIF), при возможности выполняя оптимизацию (например, постеризацию), прозрачные — в полноцветном PNG.
В нашем случае суммарный объем двух получившихся картинок составил 1 Мб, а экономия — 59%.
Многообразие формата PNG дает широкий простор для оптимизации. Прежде всего, следует внимательно выбрать тип формата: использовать полноцветный, оттенки серого или индексированную палитру? Можно ли снизить количество цветов или детализацию? Нельзя ли разделить полупрозрачные области и непрозрачные? Если применялся Photoshop, не осталось ли чего-нибудь лишнего в полупрозрачных областях? После всего следует воспользоваться утилитами оптимизации.
Векторный формат SVG является наследником двух форматов —
Работа над SVG началась еще в 1999 году, то есть это достаточно старый формат, но широкую известность он приобрел только недавно, когда его ограниченная поддержка появилась в современных браузерах. К сожалению, Microsoft не включила поддержку SVG в недавно вышедший браузер Internet Explorer 8.0, но есть несколько плагинов, позволяющих браузерам Microsoft показывать изображения SVG.
Формат SVG является единственным общепринятым форматом векторной графики в вебе, но интересен еще и тем, что поддерживает анимацию, а также может быть изменен и создан браузером, поскольку представляет собой чистый XML.
Несмотря на то, что формату исполнилось десять лет, он не настолько изучен в плане оптимизации как остальные общепринятые форматы. Из интересных исследований, пожалуй, можно отметить документ фирмы Nokia "S60 Platform:
Каких-либо комплексных инструментов для оптимизации SVG нам найти не удалось. Одним из авторов книги была предпринята успешная попытка развить идеи Хёза и сделать такой инструмент самостоятельно.
К сожалению, данный инструмент панацеей не является, хотя иногда показывает потрясающие результаты (уменьшение файла на 83%), но некоторые вещи все равно нужно оптимизировать вручную.
Вот несколько советов, которые помогут вам уменьшить размер файла и повысить удобство пользователя при взаимодействии с интерактивными SVG.
Для выполнения большинства советов по оптимизации вручную вам потребуется графический редактор. Какие же инструменты присутствуют на рынке?
Adobe (Macromedia) FreeHand — удобный, гибкий инструмент, доступны версии для Windows и Mac, но есть два неприятных недостатка: не работает напрямую с SVG и больше не разрабатывается вследствие покупки Macromedia фирмой Adobe, у которой есть свой редактор векторной графики (рис. 3.18).
Adobe Illustrator — один из старейших инструментов, непростой в использовании, не столь удобный, но во многом очень гибкий, умеет работать с SVG. Существуют платные версии для Windows и Mac (рис. 3.19).
(рис 3.18) Редактор Macromedia FreeHand MX
(рис 3.19) Редактор Adobe IllustratorInkscape — популярный, простой в использовании, бесплатный редактор, созданный специально для редактирования SVG. Есть версии для Linux, Mac и Windows (рис. 3.20).
(рис 3.20) Редактор SVG Inkscape
(рис 3.21) Редактор графики GIMPGIMP — известный многим бесплатный конкурент Adobe Photoshop, умеет редактировать и векторную графику, хотя справляется с этим хуже специализированных программ. Умеет работать с SVG. Существует в версиях для Linux, Mac, Windows (рис. 3.21).
Sketsa — платный, написанный на Java специализированный редактор SVG (рис. 3.22).
(рис 3.22) Мультиплатформенный редактор Sketsa
Как уже было упомянуто выше, одним из авторов была написана утилита для автоматической оптимизации файлов SVG. Прототипом послужили две небольшие программы на Java, взятые с сайта Джоса Хёза.
Программа написана на языке PHP, скачать ее можно по адресу http://bolknote.ru/files/ svgcrush.phps
У программы есть несколько ключей настройки, которые по умолчанию установлены на максимальную оптимизацию. Единственный ключ, который необходимо задать программе, —f, он указывает имя обрабатываемого файла. Результат выдается в стандартный вывод и может быть перенаправлен в файл стандартной конструкцией:
php svgcrush.php -fpicture.svg > optimized.svg
Оптимизация производится в несколько этапов.
Программа, вероятно, будет совершенствоваться и дальше. Например, можно заменять числовое значение некоторых цветов на их английское название, если оно более короткое ("tan", "red", "plum"), объединять трансформации, преобразовывать rgb(r,g,b) представление в #rrggbb и так далее.
Формат запуска программы следующий:
php svgcrush.php [ОПЦИИ] -fd>AHJl > РЕЗУЛЬТИРУЮЩИЙ_ФАЙЛ
Опции, которые понимает программа:
-fФАЙЛ — файл, который будет обработан;
-rЧИСЛО — точность чисел (см. этап № 3) в атрибуте "d", тега path, от 1 до 9, по умолчанию — 1;
-D — не удалять атрибуты со значениями по умолчанию (частично исключает этап №4);
-C — не оптимизировать значения цветов (опять же, касается этапа № 4);
-I — не удалять неиспользуемые ID (исключает этап № 6); -F — форматировать XML (частично исключает этап № 1).
Для тестов эффективности мы использовали Open
Все современные браузеры поддерживают прозрачную распаковку контента, сжатого методами gzip и
Способы настройки веб-серверов для работы со сжатым контентом были рассмотрены во второй лекции.
Определенный интерес представляют сайты, позволяющие произвести автоматическую оптимизацию изображений. Хотя они не дают возможности контролировать процесс, но обладают неоспоримым преимуществом: все, что вам нужно для того, чтобы ими воспользоваться, — доступ в Интернет.
К настоящему времени существуют два сервиса, которые можно рекомендовать к использованию: принадлежащий Yahoo! сервис Smush.it(http://smush.it) и punyPNG (http://punypng.com), который разрабатывает Конрад Чу. И тот и другой оптимизируют все три общепринятых формата, статичные GIF с большой вероятностью будут сконвертированы в PNG с индексированной палитрой (если такое преобразование даст выигрыш в размере).
На данный момент punyPNG оптимизирует изображения лучше, в частности, из-за применения более современных утилит для оптимизации PNG (Smush.it использует устаревший PNGcrush в режиме полного перебора) и техники, описанной в разделе 3.3.10, для удаления лишнего из полностью прозрачных областей. Впрочем, ситуация еще может измениться.
Тестовая таблица с блога "Gracepoint After Five" (http://www.gracepointafterfive.com/punypng-benchmarks) с результатами оптимизации девяти PNG-файлов обоими онлайн-сервисами и двумя популярными утилитами оптимизации PNG:
| PunyPNG | Smush.it | OptiPNG | ImageOptim | |
|---|---|---|---|---|
| Ask Image 01 | 22% | 20% | 20% | 20% |
| Ask Image 02 | 46% | 39% | 40% | 2% |
| Ask Image 03 | 8% | 7% | 7% | 7% |
| Ask Image 04 | 35% | 1% | 33% | 34% |
| Blocks | 58% | 0% | 0% | 0% |
| Butterfly | 41% | 1% | 1% | 1% |
| 63% | 36% | 61% | 61% | |
| NASCAR | 37% | 28% | 28% | 28% |
| Yahoo! | 17% | 9% | 9% | 9% |
| Экономия: | 41% (112 Kб) | 14% (37 Kб) | 19% (51 Kб) | 20% (53 Kб) |
Помимо веб-интерфейса сервисы предоставляют API. На данный момент компания Yahoo! закрыла API для публичного использования, но им все еще можно воспользоваться. API punyPNG находится в стадии закрытого бета-тестирования (и может измениться), Конрад Чу любезно согласился предоставить нам доступ к тестовой версии.
Для того чтобы произвести оптимизацию изображения через API, вам нужно разместить его где-нибудь в интернете и узнать его URL. Именно URL используется в качестве источника данных. В обоих сервисах входные данные представлены как GET-параметры, а ответ производится в формате
URL, на который нужно обратиться: http://smushit.eperf.vip.ac4.yahoo.com/ysmush.it/ws.php
Параметры:
Пример успешного запроса: http://smushit.eperf.
{
"src":"http:\/\/www.publicdomainpictures.net\/pictures\/2000\/ ?
nahled\/1-1222847524s7rl.jpg",
"src_size":50219,
"dest":"http:\/\/smushit.zenfs.com\/results\/3144140b\/smush\/ ?
pictures%2F2000%2Fnahled%2F1-1222847524s7rl.jpg",
"dest_size":49198,
"percent":"2.03"
}
Все поля достаточно очевидны, в поле "dest" указан адрес, где можно скачать оптимизированное изображение.
Пример вызова, порождающего ошибку: http://smushit.eperf. Такой запрос вернет следующий ответ:
{
"src":"http:\/\/bolknote.ru\/imgs\/2009.09.29.jpg",
"src_size":148529,
"error":"No savings",
"dest_size":-1, "id":"test" }
Текст ошибки говорит о том, что Smush.it не смог оптимизировать изображение. Другими причинами возникновения ошибочной ситуации могут быть, например, слишком большое изображение (более одного мегабайта) или несуществующий адрес.
После того как автор закончит бета-тестирование API, получить доступ к нему можно будет, зарегистрировавшись на сайте и получив соро-кобитный ключ доступа, который нужно будет указывать при запросах на оптимизацию. В профиле, кстати, можно указать, нужно ли удалять из ваших файлов информацию
Интересной особенностью сервиса является возможность пакетной обработки — оптимизированные изображения можно скачать единым ZIP-архивом.
URL, на который нужно обратиться: http://www.gracepointafterfive.com/punypng/api/optimize
Параметры:
Пример успешного запроса: http://www.gracepointafterfive.com/punypng/api/optimize?img= J http://www.conradchu.com/images/portfolio/targets.gif J key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Запрос вернет следующий ответ:
{
"original_url": "http://www.conradchu.com/images/portfolio/ ?
targets.gif",
"original_size": 35071,
"optimized_size": 27922,
"optimized_url":"http://www.gracepointafterfive.com/punypng_staging/ ?
attachments/514367d961c0c9c5ef80e02cc3381660b24d77d8/targets.gif.png",
"group_id": null,
"savings_percent": 21,
"savings_bytes": 7149
}
Оптимизированное изображение, как видно, доступно по адресу, указанному в поле "optimized_url". Если вы использовали пакетный режим (то есть указали параметр "group_id" в запросе), то ZIP-файл с оптимизированными изображениями можно скачать по URL http://www.gracepointafterfive.com/punypng/api/download_zip?group_id=гpynna
Ключ для скачивания архива не требуется. Пример запроса, порождающего ошибку: http://www.gracepointafterfive.com/punypng/api/optimize?img=http://libpng.org/pub/png/img_png/ pnglogo-grr.pngkey= J XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Запрос вернет следующий ответ:
{
"error": "Sorry, the max file size supported is 150KB."
}
В настоящее время максимальный размер файлов ограничен в 150Кб, количество файлов для пакетной обработки не может быть больше пяти, а количество изображений, обрабатываемых за день, не может быть более 50. Автор планирует запуск платной версии, где ограничения можно будет снять.
За годы существования браузеров их производители встроили в них поддержку, без сомнения, гигантского количества форматов графики: GIF, JPEG,
Часть форматов исчезла (как поддержка
Интересным также является формат SVG, который активно прокладывает себе дорогу, но, к сожалению, не поддерживается Internet Explorer; впрочем, есть надежда, что следующая версия этого браузера его поддерживать будет. Так что мы рассмотрим и его, с расчетом на будущее.
О формате ICO мы говорить не будем, хотя он и поддерживается всеми браузерами: его использование, во-первых, весьма специфично, а во-вторых, детально было рассмотрено в книге "Разгони свой сайт".
Итак, четыре формата графики: GIF, JPEG, PNG и SVG, у каждого из них своя специфика, у каждого свои особенности, каждый поддается, в разной степени, оптимизации по размеру. Эти вопросы и будут рассмотрены в этой лекции подробнее.
Придуманный в 1987 году фирмой
Это первый формат (наряду с XBM), применявшийся в вебе, что наложило свой отпечаток: статичное изображение или кадр анимации могут содержать не более 256 цветов.
До появления PNG, который будет рассмотрен ниже, в этом формате ценилось наличие прозрачности, которого не было в JPEG. Но и сейчас формат популярен, в основном из-за наличия в нем анимации, поскольку альтернативные форматы анимации (APNG,
Изображения GIF хорошо поддаются оптимизации. В параграфе № 8 "Ководства" Артемия Лебедева есть небольшое, но интересное исследование особенностей этого
Некоторые программы содержат специальные инструменты, вносящие в изображение регулируемые горизонтальные искажения, которые позволяют добиться лучшего сжатия, пусть и ценой некоторой потери качества.
В Adobe Photoshop этот инструмент называется "Ctrl+Shift+Alt+S ) формата GIF.
Инструмент удобно применять в изображениях, где много визуального шума, регулируя искажения так, чтобы они не бросались в глаза. В некоторых случаях этот инструмент способен даже улучшить качество изображения — например, там, где из-за недостатка цветов получаются резкие неестественные переходы, искажения, вносимые "
(рис 3.1) Применение инструмента "Lossy" со значением 13 позволило смягчить переходы и уменьшить вес изображения с 596 Кб до 281 КбРецепт, конечно же, не универсален. Но существует еще несколько способов сделать GIF меньше: изменение параметров сжатия (размер словаря), уменьшение количества цветов, удаление опциональной информации (например, комментариев), а также исключение признаков конца кадра и оптимизациякадров изображения, если изображение содержит анимацию.
С большей частью описанных способов лучше справятся специализированные программы, которые будут рассмотрены ниже, а вот уменьшение количества цветов может сделать только человек. Автоматически невозможно оценить, насколько допустимо будет изменение качества изображения в этом случае.
Формат поддерживает фиксированное число цветов в изображении: 2, 4, 8, 16, 32, 64, 128, 256, но часть палитры может быть не использована. Если выбрать, например, 200 цветов, то в палитре будут указаны 256 цветов, 56 из которых не будут задействованы. Но чем меньше цветов использовано в изображении, тем лучше оно сожмется.
Еще одним параметром, влияющим на размер изображения, является выбор алгоритма уменьшения количества цветов, что актуально, если в формате GIF сохраняется изображение из полноцветного оригинала.
Adobe Photoshop предлагает на выбор четыре алгоритма сокращения:
Последний режим дает наихудшее качество и обязан своему существованию причинам скорее историческим: он подгоняет палитру изображения под 216 цветов, которые отображаются одинаково на всех устройствах с 256 цветами.
Режим
Selective лучше всего подходит для ярких и четких изображений; режим нацелен на сохранение цветов однотонных элементов.
В режиме Adaptive для палитры выбираются части спектра, где представлено большинство оттенков изображения; в этом режиме изображение, как правило, занимает чуть больше, чем в других.
При уменьшении количества цветов выбранная вами программа будет пытаться заменить недостающий цвет узором из имеющихся цветов, применяя для этого один из алгоритмов. Например, Photoshop предоставляет выбор из "No
Наиболее удобны для процесса выбора количества цветов и алгоритма их сокращения программы, показывающие одновременно исходное изображение и обработанный результат — например, уже неоднократно упомянутый Adobe Photoshop.
Для быстрой оптимизации изображений GIF удобны программы автоматической оптимизации. Ни одна из них уже не развивается, что, впрочем, не мешает их использовать.
Чтобы выяснить, насколько качественно справляются программы автоматической оптимизации GIF со своей работой, были использованы три набора изображений.
Первый набор — 494 иконки с небольшим количеством цветов, общим объемом 310 килобайт. Второй набор — 10 произвольных фрагментов фильмов, скачанных с сайта GIFTUBE, характеризующихся отсутствием статичных межкадровых элементов и использованием всей палитры цветов, объем 7,63 Мб. Третий набор — 411 анимированных изображений, с использованием неполной палитры; в изобилии присутствуют статичные элементы, объем — 21,95 Мб.
| Статичные иконки | Фильмы | Простая анимация | |
|---|---|---|---|
| Gifsicle 1.5 | 258 Кб (17%) | 7,63 Мб (0 %) | 21,53 Мб (2%) |
| GIFLite 2.10 | 275 Кб (11%) | 6,19 Мб (19%) | 19,22 Мб (12%) |
| SuperGIF 1.5 | 188 Кб (40%) | Файлы испорчены* | 17,78 Мб (19%) |
| Advanced GIF Optimizer 4.0.12 | 250 Кб (19%) | 7,63 Мб (0%) | 21,57 Мб (2%) |
| Real GIF Optimizer 3.0.5 | 250 Кб (19%) | 7,63 Мб (0%) | 21,57 Мб (2%) |
| Ultra GIF Optimizer 1.02 | 250 Кб (19%) | 7,63 Мб (0%) | 21,57 Мб (2%) |
| A Smaller GIF 1.22 | 293 Кб (5%) | 7,63 Мб (0%) | 21,89 Мб (>1%) |
* SuperGIF показал потрясающие способности (файлы были уменьшены более чем наполовину), но при проигрывании на всех оптимизированных изображениях появился шлейф от движущихся объектов.
Как показывают тесты, лучше всех справляется с оптимизацией изображения программа SuperGIF (платная программа BoxTop Software, $49,95), но результат ее работы нужно контролировать: полноцветную анимацию она портит. Единственная программа из наших тестов, которая успешно оптимизировала такие изображения, — это GIFLite, тоже платная программа компании White River Software (цена $30, но существует ли компания — неясно), закончившая свое развитие в 1995 году (программа под DOS).
Если с запуском SuperGIF проблем нет — это программа с графической оболочкой и почти без настроек, — то GIFLite запустить сложнее: она работает только из командной строки, не поддерживает длинные имена файлов и не умеет самостоятельно выбирать метод, который оказался лучшим для конкретного файла. Эти печальные недостатки устраняет следующая программа, написанная на языке пакетных файлов Windows:
@ECHO OFF REM Написал Евгений "BOLK" Степанищев. 2007. MKDIR GIFLITE.$$$ 2>nul REM Основной цикл обработки файлов GIF FOR /R %%N IN (*.gif) DO @CALL :method %%N REM Удаляем весь мусор, который мог остаться DEL /Q giflite.tmp 2>nul RMDIR /S /Q GIFLITE.$$$ EXIT :method REM Перебираем методы FOR %%M IN (0 1 2 3) DO @CALL :giflite %%M %%~s1 %1 REM Сортируем полученное по размеру и забираем последний REM (наименьший) файл FOR /F "usebackq skip=3" %%R IN (`DIR /B /O-S GIFLITE.$$$`) ? DO @CALL :getresult %%R %1 GOTO :EOF :getresult REM Переписываем файл на место прежнего, удаляем мусор MOVE /Y GIFLITE.$$$\%1 %2 DEL /Q GIFLITE.$$$\*.* GOTO :EOF :giflite REM Запускаем преобразование GIFLITE.EXE -t -h -m%1 -o %2 GIFLITE.$$$\%1
Уменьшить размер анимированного GIF можно и самостоятельно, работа нетрудная, но долгая и рутинная. Анимация в GIF устроена достаточно просто: каждый последующий кадр перекрывает предыдущий, причем размеры кадров могут быть меньше размера изображения, и в этом случае на экране будет содержимое двух кадров: текущий кадр и то, что не было перекрыто из предыдущего.
Отсюда получается, что если в анимированном изображении есть статичные элементы (например, задний фон), то их нужно оставить на предыдущем кадре, перекрыв следующим лишь то, что изменилось. Причем если использовать прозрачность, то перекрывать можно области любой формы. Размеры и палитра кадров уменьшится, а значит, уменьшится и размер файла с анимацией.
Очень хочется упомянуть вытекающий из предыдущего рецепта способ создания полноцветных изображений в формате GIF, тем более что такой способ также иногда позволяет получить выигрыш в размере.
Самый простой принцип получения полноцветного GIF следующий: исходное изображение разбивается на несколько кусков, так, чтобы количество цветов в каждом из них было не более 256 (проще всего — сделать куски 16x16, это как раз 256 пикселей, значит, и цветов не может быть больше). Каждый кусок вставляется в отдельный кадр, и между ними выставляется нулевая задержка. Таким образом, пользователь увидит все кадры одновременно, и они сложатся в цельную картинку.
(рис 3.2) Пример изображения, занимающего меньше в полноцветном GIF, чем в pngСуществуют несколько программ, работающих подобным или чуть более сложным способом. Лучшая, на наш взгляд, — платная программа itsagif, фирмы Pedagoguery Software.
Авторы itsagif заявляют, что полноцветный GIF может выиграть у PNG по эффективности сжатия на изображениях с количеством цветов от 300 до 1000. Это действительно так, если в изображении не встречаются элементы, которые PNG умеет сжимать лучше GIF, например, градиенты.
Вот этот рисунок бабочки 756x488 пикселей содержит 1073 уникальных цвета. В файле PNG, оптимизированном программой PNGout, он занимает 77,6 Кб, тогда как в полноцветном GIF — 68,4, экономия составляет 12%.
Из рассмотренного нами материала можно сделать следующее резюме. Несмотря на конкурирующий формат (PNG) GIF еще может быть полезен: некоторые изображения занимают в этом формате меньше места, и это пока единственный универсальный для всех браузеров способ получить анимированное изображение.
Однородные по горизонтали изображения сжимаются лучше, чем остальные, поэтому в зашумленные изображения имеет смысл вносить горизонтальные искажения инструментом "
Для программной оптимизации полезны программы GIFLite и SuperGIF, причем результат работы последней необходимо контролировать.
Анимированные изображения можно оптимизировать как вручную, если воспользоваться неполным перекрытием кадров, так и автоматически, при помощи уже упомянутых программ. Интересной техникой оптимизации, основанной на анимации с нулевыми задержками, является использование программы itsagif фирмы Pedagoguery Software, которая позволяет получать полноцветные изображения, в определенных условиях занимающие меньше, чем PNG.
Алгоритм JPEG появился в 1992 году стараниями группы
В отличие от GIF JPEG является форматом сжатия с потерями: это значит, что сохраненное изображение будет отличаться от оригинала некими допустимыми потерями, часто не заметными на глаз. При сохранении выбирается так называемое "качество", которое обычно варьируется от 0 до 100, где ноль означает наихудшее качество (впрочем, может быть и иначе: в Paint
В вебе стандарт появился после GIF, впервые в браузере
Формат JPEG не стоит на месте: появился стандарт
Это кажется странным, но у браузеров есть проблемы с отображением JPEG. Эта тема лишь косвенно относится к оптимизации, тем не менее нам она представляется достаточно важной, чтобы о ней упомянуть.
Во-первых, Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG (когда качество изображения улучшается по мере его загрузки): он показывает файл только после его полной загрузки, что сильно отличается от поведения "традиционного" JPEG, когда изображение отображается сверху вниз, по мере загрузки. Проблема в том, что пользователь может подумать, что загрузка страницы закончена, тогда как некоторые
Во-вторых, некоторые программы (например, Photoshop) сохранят JPEG в цветовом пространстве CMYK, если при работе с изображением выбран именно этот режим. Определенные, используемые в настоящее время браузеры (среди них Firefox 2, Internet Explorer 6, Google Chrome 2) не смогут отобразить такое изображение, а Safari, вплоть до версии 4, отобразит его инвертированным.
(рис 3.3) Диалог выбора цветового пространства в программе Adobe PhotoshopВ-третьих, Firefox (включая текущую версию — 3.5.3) в версии под Windows иногда неверно декодирует JPEG-файлы: на некоторых изображениях только в этом браузере появляются едва заметные полосы. Увидеть их достаточно просто: создайте новый файл в Photoshop, залейте его цветом #5c6264 и сохраните с качеством 80%.
Распространенных программ для редактирования изображений немного. Определенным стандартом, по всей видимости, стали две из них: Adobe Photoshop и бесплатный редактор GIMP.
Любопытно сравнить это две программы, чтобы посмотреть, как они справляются с сохранением изображения в формат JPEG.
Для сравнения графических редакторов мы выбрали три фотографии 800x600. На первой в кадре много довольно крупных объектов: мотоциклы, деревья, люди, на второй всю фотографию занимает саркофаг с мелким орнаментом, на третьей почти ничего нет, кроме неба и океана.
Степень сжатия выставлялась в каждой программе из субъективных соображений: чтобы на глаз не были заметны искажения, вызванные сжатием.
| Программа | Крупные объекты | Мелкие объекты | Однородное фото |
|---|---|---|---|
| Adobe Photoshop CS2 | 198,4 Кб | 108,7 Кб | 35,9 Кб |
| GIMP 2.6.6 | 124,3 Кб | 73,5 Кб | 28,9 Кб |
Убедительную победу одержал GIMP: его многообразие настроек позволяет гибко управлять размером файла.
(рис 3.4) Диалог сохранения файла в формате JPEG в редакторе GIMPУказание текста комментария, использование маркеров перезапуска, сохранение эскиза и
Смысл значений параметра "Субвыборка" (или цветового прореживания) — уменьшение информации о цвете. Форматов записи этого параметра несколько, но наиболее распространенный — три цифры с разделителями. Читаются они очень просто: например, "4:2:2" означает "на каждые четыре пикселя сохраняется четыре значения яркости и по два значения на каждый компонент цвета". Из этого правила есть одно исключение: "4:2:0" расшифровывается как "на каждые четыре пикселя в квадрате 2x2 сохраняются четыре значения яркости и по одному значению цвета".
Значение "4:2:0" часто называют "2x2", а "4:4:4"— "1x1". Как видно, GIMP использует другие, более понятные значения субвыборки. К примеру, "2x2, 1x1, 1x1" означает: для квадрата 2x2 пикселя сохраняются все значения яркости, одно значение по вертикали и одно по горизонтали для первой компоненты цвета, а также одно по вертикали и горизонтали для второй компоненты.
Чем меньше информации о цвете сохраняется, тем меньше файл и тем более он далек от оригинала. Легко сделать оправданный вывод, что субвыборка "4:2:2" больше скажется на четких вертикалях, а "4:2:0" сделает более расплывчатыми и вертикальные, и горизонтальные линии.
Параметр "Метод
Параметр "Маркеры перезапуска" влияет на расстановку специальных маркеров, используемых для нейтрализации ошибок. В вебе они едва ли полезны, а их применение увеличивает размер файла.
Параметр "Прогрессивная загрузка" с вероятностью 75% уменьшит размер изображения, если оно меньше 10 Кб, и с вероятностью 94% увеличит его, если оно больше этого размера. Если вам не важны соображения совместимости с Internet Explorer, изложенные выше, то вы можете попробовать включить этот параметр, чтобы посмотреть, не уменьшится ли размер.
На размер изображения также влияют резкие переходы (границы): чем их меньше, тем лучше оно сжимается. Поэтому GIMP на экране сохранения JPEG-изображения содержит инструмент для его сглаживания. Для некоторых типов изображений (например, мелкий лиственный рисунок) легкое увеличение сглаживания не вызовет ухудшения восприятия, но уменьшит размер.
Справедливости ради надо заметить, что на размер влияют еще два параметра изображения: чем ниже его контрастность (
Параметр "Качество" влияет на изображение очевидным способом. Хороший алгоритм — выбрать качество 75% и, если искажения слишком заметны, попробовать его увеличить. Если исходная картинка уже невысокого качества, можно попробовать снизить этот параметр до 50%. Никогда не сохраняйте изображения с качеством выше 95%, это не даст улучшения качества изображения, но серьезно увеличит его размеры. Качество "100%" не означает "сохранить без потерь", это всего лишь математический предел алгоритма.
Куда более сложным, но и более мощным средством оптимизации изображений при сохранении является платная программа JPEG Optimizer фирмы Xat. Она дает экономию большую, чем GIMP, но чтобы ее добиться, придется потратить куда больше времени.
(рис 3.5) Интерфейс программы Xat JPEG OptimizerПринцип обещаемой чудесной оптимизации заключается в том, что JPEG позволяет сохранять разные области изображения с разным качеством. Например, более темные или однородные области можно сохранить с качеством похуже, содержащие мелкие детали — с наилучшим.
Вообще-то JPEG Optimizer имеет автоматический режим, но, на наш взгляд, эффективнее всего работать с программой в режиме эксперта ( "Options — ).
Для обработки изображения первым делом нужно выбрать минимально допустимое качество, для этой цели сверху есть специальный ползунок.
Далее нужно определить, какие области изображения можно сохранить с наихудшим качеством. На фотографии выше это, например, песок слева снизу, темное пятно справа вверху и столб с левой стороны рисунка. Выбираем режим "Compress Much More" (F8) при помощи инструментов "
Для областей, где настолько сильное сжатие применять нельзя, можно выбрать режимы "Compress Even More" (F7) или еще более слабый "Compress More" (F6). Если какую-то область вы сжали слишком сильно, не беда, можно воспользоваться инструментом "Undo" (Ctrl-Z) или переключиться в режим "Remove Extra Compression" (F5) и выделить нужную область.
Потрудившись, можно уменьшить размер изображения на 3-20% по сравнению с GIMP, в зависимости от изображения.
Два этапа JPEG-сжатия представляют для ручной оптимизации непосредственный интерес: это перевод цветов в пространство
Начнем с блоков. По алгоритму, после преобразования цветовой модели изображение разбивается на небольшие блоки 8x8 пикселей и уже с ними производится остальная работа.
(рис 3.6) Последствия сохранения изображения в формат JPEG с выравниванием границ по сетке (слева) и без выравнивания (справа)Посмотрим на эти два идентичных изображения, сохраненных в формате JPEG с качеством ноль. Почему изображение слева чистое, а справавокруг квадратов виден "мусор"? Ответ очень прост: на изображении слева границы цветов выравнены по решетке 8x8 пикселей, каждый квадрат 8x8 содержит только один цвет, а изображение справа сдвинуто на один пиксель вправо и вниз.
На практике это означает, что если у вас в изображении есть прямоугольные области, лучше выровнять их границы по решетке 8x8. В Photoshop для этой цели очень удобно пользоваться инструментом "Grid" ( Ctrl+' ), выставив в настройках ( Ctrl+K, Ctrl+6 ) удобный шаг решетки. Важно также знать, что Photoshop при сохранении JPEG с качеством 0-50 оптимизирует цвета по решетке 8x16.
После выравнивания изображение можно попробовать сохранить в более низком качестве — качество не пострадает, тогда как размер уменьшится.
Когда выровнять все границы не получается и вокруг одной из них слишком много "мусора", можно поменять параметр "цветовое прореживание" ("
Следующий метод был позаимствован из статьи "Техногрета" студии Артемия Лебедева "Оптимизация JPEG. Часть 2", работает только на изображениях с контрастной мелкой текстурой (например, мелкий темный текст на светлом фоне) и является относительно сложным.
Как уже было упомянуто, по алгоритму JPEG изображение первым делом переводится в пространство цветов
В Photoshop есть цветовой режим Lab, где канал "L" задает яркость, а две хроматические составляющие "a" и "b" описывают, соответственно, положение цвета в диапазоне от зеленого до пурпурного и от синего до желтого. Именно в этом режиме проще всего производить все дальнейшие манипуляции, а монитор хорошо бы предварительно отка-либровать.
Для иллюстрации этого метода мы выбрали фотографию сухого завтрака 700x432, которая подходит как нельзя лучше: в ней есть области, разные по яркости и текстуре.
(рис 3.7) Фотография сухого завтрака поможет нам проиллюстрировать, как меняется размер файла при удалении из него не воспринимаемой глазом информацииДо всех манипуляций эта картинка, сохраненная в Photoshop с качеством 55%, занимает 105,5 Кб.
Откроем нашу картинку в Photoshop и перейдем в цветовой режим Lab ( Image — Mode — Lab Color ), после этого сделаем дубликат картинки, чтобы контролировать процесс ( Image — Dublicate ). Обе картинки лучше поставить рядом, для наглядности.
У редактируемого изображения посмотрим каналы "a" и "b" ( Ctrl+2, Ctrl+3 ), на экране будет видна текстура нашего изображения, с двумя выраженными зонами:
(рис 3.8) Сухой завтрак, канал "b"Каждую из двух зон нужно обработать отдельно. Переключимся в канал "a" ( Ctrl+2 ), выделим (инструментом "Lasso Tool") поочередно каждую зону и применим к ним фильтр Filter — ). Значение Radius надо выбирать минимальное, при котором пропадает структура. Для первой зоны у нас получилось значение 24, для второй — 34.
Включаем все каналы ( Ctrl+~ ), сравниваем с оригиналом и убеждаемся, что изображение стало более насыщенным. Выделяем редактируемые нами блоки и вызываем окно Levels ( Ctrl+L ). Сдвигаем средний бегунок влево, пока картинка не становится похожей на оригинал.
То же самое повторяем для канала "b". После всех манипуляций размер файла при сохранении в JPEG уменьшился на 10%.
Помимо самого изображения формат позволяет хранить произвольное количество метаинфор-мации. Самые известные примеры: комментарий, превью изображения и структурированные, расширенные данные, известные как
В
Для программ, оптимизирующих уже готовые файлы, были взяты 360 картинок из блога одного из авторов, объемом в 10,94 Мб. В части файлов присутствуют комментарии и другие метаданные. Программ для оптимизации уже готовых JPEG (без изменения их качества) оказалось совсем немного. Кроме удаления лишних данных они производят небольшую оптимизацию кодов Хаффмана, что тоже помогает уменьшить размер.
| Программа | Результат |
|---|---|
| PureJPEG 1.0 | 10,82 Мб (1%) |
| jpegtran 08-Feb-2005 | 10,67 Мб (2,4%) |
| Jpegoption 1.2.2 | 10,78 Мб (1,7%) |
Лидирует тут jpegtran набора утилит Independent JPEG Group, но результат ее работы трудно назвать значительным. Так что этот метод следует рассматривать как дополнительный и завершающий по отношению ко всем прочим.
Рассмотрев различные рецепты оптимизации, мы можем сделать следующий вывод. Графические редакторы, позволяющие сохранять изображения в формате JPEG, при одинаковом визуальном качестве дают различный размер изображения; если необходимо еще более уменьшить размер, ручную оптимизацию можно произвести при помощи Xat JPEG Optimizer. Цветовые границы изображений, сохраняемых в этом формате, рекомендуется выравнивать по сетке 8x8 (и 8x16, если используется Photoshop и качество 0-50) , а мелкие контрастные текстуры оптимизировать, минимизировав информацию о цвете вручную. После всех манипуляций изображение нужно обработать утилитой jpegtran.
История PNG началась 4 января 1995 года, так что это самый молодой из поддерживаемых всеми браузерами растровых форматов. Формат обеспечивает глубину цвета до 48 бит, полупрозрачность (
Формат, так же как и GIF, поддерживает индексированную палитру и бинарную прозрачность, что позволяет использовать PNG для хранения как полноцветных изображений без искажений, так и изображений с малым количеством цветов.
Разработанный для хранения статичного изображения, формат не поддерживает анимацию, но попытки исправить текущее положение вещей предпринимаются. Сейчас стандартом де-факто становится APNG — довольно удачное расширение PNG; что интересно — изображения в этом формате отображаются в браузерах, которые его не поддерживают, как статичные изображения.
На текущий момент APNG поддерживают Opera (с версии 9.5) и Mozilla Firefox (версия 3.0 и выше).
К сожалению, использование формата тормозит один из распространенных браузеров — Internet Explorer. Все версии этого браузера, начиная с четвертой (где впервые появилась поддержка), имеют проблемы в отображении PNG:
Впрочем, у остальных браузеров тоже не все гладко, хотя список их прегрешений не столь впечатляет:
Как было сказано выше, Internet Explorer до седьмой версии не поддерживал полупрозрачность в изображениях PNG. Этот недостаток исправляется одним из двух методов: использование фильтра AlphaLoader, который позволяет загружать
Оба метода обладают недостатками. Применение фильтров вообще и AlphaLoader в частности приводит к повышенному расходу памяти и ухудшению времени отклика браузера. Для иллюстрации проблемы можно привести исследование Стояна Стефанова (http://ap-project.org/Russian/ Article/View/83/Russian translation/), где рассматривалось сто иллюстраций с фильтром и без него. Использование фильтров увеличило время от-рисовки страницы в 27 (!) раз, а размер задействованной памяти — в 78(!) раз.
Использование
Так что для старых версий Internet Explorer рекомендуется пользоваться, где возможно, PNG с индексированными цветами и бинарной прозрачностью вместо полупрозрачности, прибегая к DDbelatedPNG (http://dillerdesign.com/experiment/ DD belatedPNG/).
Один недостаток отображения файлов PNG в браузерах связан не с ошибками, а с добрыми намерениями авторов формата. Дело в том, что одни и те же цвета выглядят в различных операционных системах по-разному.
Разработчикам PNG это показалось неправильным. Они ввели в формат несколько полей, куда записываются характеристики машины и операционной системы, на которой создано изображение. В дальнейшем, если параметры оборудования или ОС на машине, где изображение показывается, отличается, производится специальная коррекция.
Идея хорошая, но в вебе помимо PNG используются и другие форматы, в которых такая коррекция не применяется. Это приводит к тому, что стык PNG с JPEG может отличаться по цвету в Mac OS, если оба изображения готовились под Windows.
Можно не использовать PNG вообще и не задумываться о таких проблемах, альтернатива — удалить из файла всю цветокорректирующую информацию. Утилита optipng делает это по умолчанию, но можно для той же цели применить устаревшую во всех отношениях утилиту PNGcrush:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png J outfile.png
К счастью, новые версии Adobe Photoshop (начиная с CS4) не записывают в файл эту информацию, GIMP же не заполняет поле gAMA, без которого браузеры коррекцию не производят.
PNG, как уже частично рассматривалось выше, умеет хранить несколько типов изображения: полутоновое изображение (оттенки серого) с глубиной цвета 8 бит, цветное индексированное (восьмибитовая палитра цветов глубиной 24 бита) и полноцветное изображение с глубиной 48 бит.
Кроме того, в PNG есть два типа прозрачности: полупрозрачность (256 уровней альфа-канала) и бинарная прозрачность (как в GIF — либо 100% прозрачно, либо нет).
Большей частью выбор типа изображения очевиден, но есть тонкости.
Изображение, содержащее исключительно оттенки серого (так называемое "черно-белое"), выгоднее всего сохранять в специально предназначенном для этого формате с глубиной цвета 8 бит. Из-за того, что компоненты цвета записываются меньшим количеством байт, файл занимает меньше места.
В редакторе Adobe Photoshop для сохранения изображения в файле этого типа нужно воспользоваться инструментом "Save As..." ( Shift+Ctrl+S ), а не "Save for Web" ( Alt+Shift+Ctrl+S ), последний этот тип формата не поддерживает. Конечно, чтобы Photoshop понял, что нужно сохранить именно с такой глубиной цвета, режим изображения должен быть "Grayscale" ( Image — Mode — Grayscale ).
(рис 3.9) Рис. 3.9. Слева фотография, сохраненная с глубиной цвета 24 бита (349 Кб),справа — 8 бит (253 Кб)Редактор GIMP также умеет сохранять такие изображения правильно. Если выбранный вами редактор этого делать не умеет — не беда, можно использовать утилиты OptiPNG или PNGout (их мы еще рассмотрим ниже), умеющие понижать глубину цвета:
optipng -o7 dog.png -out dog-optimized.png pngout /c0 dog.png dog-optimized.png
Другая особенность относится к сохранению картинок с малым количеством цветов и без прозрачности — некоторые изображения занимают меньше места в PNG с глубиной в 24 бита, чем при использовании индексированной палитры. В основном это касается градиентных изображений.
Сергей Чикуенок, специалист по оптимизации изображений, советы которого легли в основу этой лекции, объясняет это тем, что в полноцветных изображениях цвет описывается тремя байтами (RGB), тогда как в формате с индексированными цветами — четырьмя (RGB + один байт в палитре). Помимо этого само изображение может быть настолько эффективно сжато, что добавление к файлу таблицы палитры (которая не сжимается) может чувствительно увеличить его размер.
Существенную экономию дает в некоторых случаях малоизвестная возможность PNG — использование полупрозрачности в файлах с индексированной палитрой, где каждый элемент палитры описывается не тремя составляющими (RGB), а четырьмя —
(рис 3.10) PNG с индексированной палитрой и полупрозрачностью в Internet Explorer 6.0 и в остальных браузерахРедактор Photoshop, опять же, не поддерживает этот формат, но optiPNG автоматически преобразует изображения с полупрозрачностью, содержащие 256 цветов и меньше, в файл такого типа. Полноцветные изображения при желании можно преобразовать утилитой "
Интересно поведение Internet Explorer 6.0 при отображении файлов такого типа. Как известно, полупрозрачность в PNG он не поддерживает, а такие файлы, без применения хаков, отображает как GIF — с бинарной прозрачностью, что лучше, чем серый цвет, которым IE заполняет прозрачные области обычных PNG.
Давайте отвлечемся от приемов ручной оптимизации и рассмотрим инструменты, которые помогут произвести оптимизацию автоматическую. Насколько большой выигрыш можно получить, если взять обычные изображения, сохраненные в графическом редакторе, и обработать такими утилитами?
Для тестирования были выбраны три утилиты: PMT (PNGcrush), optiPNG и PNGout. Поскольку pngout не умеет сама перебирать методы оптимизации, для нее был написан небольшой командный файл, использующий для перебора optiPNG (метод взят с блога blog.ad.by):
@ECHO OFF IF "%1"=="" EXIT 1
FOR /F "usebackq delims==,IDAT tokens=5" %%i in J
('optipng -o4 -full -sim DO SET f=%%i
IF "%2"=="" (
pngout /k0 /n2 /f%f:—1,1% || EXIT 3
) ELSE (
pngout /k0 /n2 /f%f: —1,1% "%1" "%2" || EXIT 3
)
Для тестов мы взяли по 10 иллюстраций каждого типа: фотографии (глубина цвета — 24 бита), полноцветные синтетические (глубина цвета — 24 бита), синтетические с градациями серого (8 бит) и с индексированной палитрой (8 бит).
| Программа | Фото | Полноцветное | Серое | Индексированное |
|---|---|---|---|---|
| optiPNG 0.6.3 | 4,52 Мб (5%) | 4,75 Мб (9%) | 2,67 Мб (21%) | 510,01 Кб (9%) |
| PNGout 21 Jun 2009 | 4,38 Мб (8%) | 4,55 Мб (13%) | 2,57 Мб (24%) | 495,13 Кб (11%) |
| PNGcrush 1.6.15 | 4,55 Мб (4%) | 4,99 Мб (4%) | 3,20 Мб (5%) | 515,21 Кб (8%) |
| PNGoutwin 1.0.1 | 4,54 Мб (4%) | 4,07 Мб (22%) | 3,07 Мб (9%) * | 484,87 Кб (13%) |
* неожиданно плохие результаты PNGoutwin на изображениях серого объясняются просто: программа не справилась с понижением глубины цвета до 8 бит; если понизить глубину заранее (выше было рассмотрено, как это делается), то PNGoutwin справляется с заданием успешнее всех — 2,56 Мб (24%).
По всей видимости, на первое место стоит поставить платную программу PNGoutwin, на второе — PNGout (в паре с optiPNG для подбора параметра оптимизации изображения), а аутсайдером по качеству является PNGcrush.
Конечно, для оптимизации изображения PNG можно применять все те же методы, что и для GIF, — например, уменьшение количества цветов; рассматривать здесь дважды один и тот же материал смысла не имеет.
Даже настройки сохранения PNG с индексированной палитрой в Adobe Photoshop те же, но не хватает одного инструмента — "
В случае PNG это правило тоже иногда действует, но соответствующего инструмента нет. Выход один — сохранить изображение сначала в GIF, а потом преобразовать в PNG.
Другой искажающий способ оптимизации — постеризация. Если говорить бытовым языком, то постеризация — это изменение количества используемых цветов. Чем меньше уровень постеризации, тем меньше цветов в изображении и тем крупнее одноцветные области.
В Photoshop инструмент для постеризации изображения вызывается Image — Adjustments — .
Благодаря снижению количества цветов изображение лучше упаковывается и занимает меньше места. Особенно эффективен этот прием для фотографических изображений, где пастеризованные области обычно незаметны.
Способ очень простой, но есть неудобство: результатом постериза-ции управлять невозможно, но есть немало более управляемых способов снизить количество цветов в изображении.
Первым делом нам понадобится плагин PhotoFreebies plugin suite, скачать который можно с сайта производителя.
(рис 3.11) Исходное изображение (226,3 Кб)Откроем исходное изображение в Photoshop и создадим его дубликат ( Image — ), удалим из дубликата информацию о прозрачности ( Filter — Photo Wiz — Remove Transparency ) и сменим режим на "Индексированные цвета" ( Image — Mode — Indexed Color ).
В появившемся окне выбираем 50 цветов: этого достаточно, чтобы львенок смотрелся приемлемо, а также убираем галочку "
Следующий шаг — меняем режим обратно на RGB и копируем изображение в оригинальный файл в отдельный слой, который должен располагаться поверх оригинального. Используем нижний слой как маску ( Alt+Ctrl+G ) и сохраняем полученное изображение.
В данном случае картинка с львенком стала занимать 164,5 Кб, сократившись на 27%.
Изображения неоднородны по детализации, и было бы замечательно, если при снижении количества цветов программе можно было бы указать, что какой-то области нужно уделить "больше внимания", то есть выделить большее количество цветов, чтобы эта область выглядела лучше.
На наш взгляд, самая простая и эффективная программа, позволяющая это делать, — Color
Исходное загруженное изображение занимает 394 Кб в полноцветном PNG и 116,8 Кб с индексированной палитрой.
Некоторые инструменты, предоставляемые программой, нуждаются в пояснении. В центре — исходное изображение, клик левой клавишей мыши на нем показывает картинку в исходном качестве, что очень удобно для оценки искажений. На скриншоте программа находится в режиме редактирования маски повышения качества (включается кисточкой в верхней панели инструментов), светлыми мазками указаны места, где снижать качество нельзя. Толщину мазка регулирует инструмент справа от кисточки, подчищать маску можно ластиком.
Внизу слева находится выбор алгоритма замещения недостающих цветов, сообщается, что лучше всего работает "Флойд—Штейнберг", хуже всего — "Байер".
(рис 3.12) Color quantizer, редактирование маски повышения качестваПравее идет поле отладочной информации, еще правее — два поля, выбор количества цветов и поле, указывающее, сколько процентов палитры резервировать под второй проход. Второе поле сугубо экспериментальное, но неясным образом влияет на качество изображения.
Чуть ниже находятся два ползунка: первый влияет на качество преобразования (чем более влево, тем качественнее и тем медленнее работает программа), второй — экспериментальный, чем больше цветов задано, тем больше его нужно сдвинуть влево, но точного алгоритма тут нет.
Переключатель "RGB/
Справа от изображения видны уровни изображения и его текущая палитра, палитру можно отсортировать по количеству использований цвета (Weight), по оттенку (Color) или яркости (Light). На каждый элемент палитры можно кликнуть мышкой, левая клавиша показывает, где на картинке используется цвет, правая — выводит меню, где элемент можно заменить, удалить и так далее.
Итак, вернемся к нашему изображению. После снижения количества изображения до 120 цветов качество изображения вполне приемлемо, если бы не некоторые детали — полупрозрачные крылья, блики на усиках и боках пчел заметно исказились, поэтому мы наносим на них маску повышения качества. После проделанной операции рассматриваем остальные детали; если искажения в нихпочти незаметны и не требуют нанесения маски, но выглядят все же не идеально, можно попробовать изменить параметр "
В итоге изображение пчел стало занимать 66,48 Кб, что на 43% лучше, чем предыдущий результат.
На этапе подготовки этой книги вышла новая версия программы. Появилось несколько интересных улучшений: полный перебор всех параметров PNGout (включается отдельной кнопкой с двумя дискетами на панели инструментов), работает он очень долго, но эффективно, появился усредняющий фильтр ("метла" в панели инструментов), который усредняет соседние цвета, что способствует лучшему сжатию изображения. Фильтр позволяет указать алгоритм усреднения (например, "только по вертикали"), его "жесткость" и степень усреднения. Жесткий фильтр хорошо подходит для фотографий, мягкий может применяться для снижения шума в изображении.
Еще одно долгожданное улучшение — изменение масштаба рабочей области. Этот инструмент доступен в меню правой клавиши мыши, также масштабом можно управлять клавишами "+" и "-" на цифровой клавиатуре.
В Photoshop до версии CS4 был инструмент, позволяющий достигать того же эффекта, что и маска влияния качества в программе Color
На рисунке показано, где расположен инструмент, включающий маску влияния; доступен он только в режиме PNG-8. Рядом с параметром "
Инструмент, задающий маску, позволяет указывать канал (Channel), в котором записано, насколько много нужно уделять внимания этому участку. Для маски влияния на распределение цветов значение имеет яркость участка в канале: чем выше яркость, тем больше цветов Photoshop постарается сохранить на этом участке.
(рис 3.13) Маска влияния на распределение цвета в PhotoshopОткрываем наше изображение и в палитре "Channels" создаем новый канал, назовем его "color". Включаем канал "RGB", чтобы видеть само изображение, выбираем инструмент "Кисточка" и прикидываем, какие участки должны выглядеть наиболее качественно. Очевидно, что полупрозрачным крыльям и более темным местам изображения можно уделить меньше внимания, чем теням на светлых полосках пчел.
Сопоставляя таким образом важность, раскрашиваем наше изображение и время от времени переключаемся в "Save for Web" ( Alt+Shift+Ctrl+S ), чтобы увидеть результат. Работа куда более кропотливая, чем при использовании программы Color
Если изображение содержит полупрозрачные области, то, вероятно, в них находятся детали, которые вряд ли видны глазу, и чем область прозрачнее, тем менее важно, насколько качественно она прорисована.
Как видно, в изображении есть полностью прозрачная область вокруг шара и его полупрозрачное отражение. Кликаем с зажатой клавишей Ctrl на миниатюре изображения в палитре "Layers", переходим в "Channels" и нажимаем на кнопку "Save selection as channel" из ряда в низу палитры каналов (рис. 3.15).
(рис 3.14) Образец для наших экспериментов, отражающийся в "мокром полу" (2,44 Мб)(рис 3.15) Создаем канал из выделенного участкаТеперь нам нужно отделить пиксели, которые в изображении наиболее заметны. Для этого снимаем выделение ( Ctrl+D ), инвертируем канал ( Ctrl+I ) и воспользуемся диалогом Threshold ( Image — Adjustments — Threshold ).
Меньшее значение параметра Threshold сохранит меньше деталей, а значит — уменьшит размер файла.
Кликаем с зажатой клавишей Ctrl на миниатюре канала в палитре "Channels" и выбираем фильтр "Filter — ). Его значение опять же нужно подобрать вручную; чем больше значение, тем меньше деталей сохранится и тем меньше будет размер файла.
При значениях Threshold, равному 138, и
Редактор Adobe Photoshop имеет одну малоизвестную особенность, иногда сильно увеличивающую размер файла PNG.
Попробуйте открыть в Photoshop какую-нибудь фотографию, выделить любым инструментом (например, "Lasso Tool") любой сложный контур, скопировать его в новый документ, после чего сохранить его через "Save For Web" ( Alt+Shift+Ctrl+S ).
(рис 3.16) Инструментом "Elliptical Marquee Tool" вырезаем сложный контурЛогично было бы предположить, что полностью прозрачные части заполнены одним прозрачным цветом, чтобы изображение лучше упаковывалось. Оказывается, это не так. Откроем сохраненное изображение программой XnView, в режиме просмотра выбираем "Рисунок" — "Преобразовать в цветное", в появившемся окошке выбираем "Применить".
(рис 3.17) Результат обработки нашего изображения программой XnViewКак видно, Photoshop оставил в невидимых областях много лишнего. Впрочем, избавиться от этого вполне нам по силам.
Если ваше изображение не содержит полупрозрачных областей, годится следующий простой способ: Ctrl+клик на миниатюре изображения в палитре "Layers", инвертируем выделение ( Ctrl+Shift+I ), удаляем выделенное (клавиша "Delete") и снова сохраняем наше изображение (Alt+Shift+Ctrl+S).
В случае, если полупрозрачные области присутствуют, придется потрудиться немного больше: Ctrl+клик на миниатюре изображения в "Layers", переходим в режим быстрой маски (клавиша "Q"), в диалоге Image — Adjustments — Threshold переставляем бегунок в крайнее левое положение и нажимаем "OK", выходим из режима маски (опять "Q") и инвертируем выделение ( Ctrl+Shift+I ). После чего заливаем выделенную область черным цветом ( Edit — Fill ), снова инвертируем выделение ( Ctrl+Shift+I ) и добавляем к слою маску (иконка "Add Layer Mask" внизу палитры слоев). Изображение можно сохранять.
В нашем случае экономия составила 7%. Хотим сразу предостеречь, что этот прием иногда не уменьшает, а увеличивает размер файла. Дело в том, что формат PNG исключительно хорошо сжимает участки определенных типов (например — градиенты), так что если за границей видимого осталась какая-то часть градиента, то она может не мешать, а способствовать сжатию.
Поэтому хорошая практика — попробовать сохранить оба варианта и выбрать меньший по размеру.
Суть следующего приема — в разделении изображения на два: в первом, в индексированной палитре, сохраняется само изображение, во втором, полноцветном — полупрозрачные области. В браузере оба изображения накладываются друг на друга, например, второе указывается как фон первого.
В качестве примера возьмем стилизованный земной шар, отражающийся в мокром полу, который мы использовали выше.
Открываем изображение в Photoshop. Если оно состоит из нескольких слоев, то его необходимо слить в один. Далее выделяем объект в слое, кликнув с зажатой клавишей Ctrl на миниатюре в палитре "Layers", переходим в палитру "Channels" и создаем новый канал, кликнув на "Save selection as Channel".
Снимаем выделение ( Ctrl+D ) и вызываем инструмент "Threshold" ( Image — Adjustments — Threshold ), перетаскиваем бегунок в крайнее правое положение. Теперь у нас есть маска для выделения непрозрачных областей.
Кликаем с зажатой клавишей Ctrl на миниатюре в маске Alpha 1, переходим в палитру "Layers", выбираем слой с изображением и выполняем команду "Layers via Cut" ( Shift+Ctrl+J ). Теперь у нас два слоя, которые нужно сохранить в отдельных файлах. Непрозрачные пиксели сохраняем в PNG с индексированной палитрой (или в GIF), при возможности выполняя оптимизацию (например, постеризацию), прозрачные — в полноцветном PNG.
В нашем случае суммарный объем двух получившихся картинок составил 1 Мб, а экономия — 59%.
Многообразие формата PNG дает широкий простор для оптимизации. Прежде всего, следует внимательно выбрать тип формата: использовать полноцветный, оттенки серого или индексированную палитру? Можно ли снизить количество цветов или детализацию? Нельзя ли разделить полупрозрачные области и непрозрачные? Если применялся Photoshop, не осталось ли чего-нибудь лишнего в полупрозрачных областях? После всего следует воспользоваться утилитами оптимизации.
Векторный формат SVG является наследником двух форматов —
Работа над SVG началась еще в 1999 году, то есть это достаточно старый формат, но широкую известность он приобрел только недавно, когда его ограниченная поддержка появилась в современных браузерах. К сожалению, Microsoft не включила поддержку SVG в недавно вышедший браузер Internet Explorer 8.0, но есть несколько плагинов, позволяющих браузерам Microsoft показывать изображения SVG.
Формат SVG является единственным общепринятым форматом векторной графики в вебе, но интересен еще и тем, что поддерживает анимацию, а также может быть изменен и создан браузером, поскольку представляет собой чистый XML.
Несмотря на то, что формату исполнилось десять лет, он не настолько изучен в плане оптимизации как остальные общепринятые форматы. Из интересных исследований, пожалуй, можно отметить документ фирмы Nokia "S60 Platform:
Каких-либо комплексных инструментов для оптимизации SVG нам найти не удалось. Одним из авторов книги была предпринята успешная попытка развить идеи Хёза и сделать такой инструмент самостоятельно.
К сожалению, данный инструмент панацеей не является, хотя иногда показывает потрясающие результаты (уменьшение файла на 83%), но некоторые вещи все равно нужно оптимизировать вручную.
Вот несколько советов, которые помогут вам уменьшить размер файла и повысить удобство пользователя при взаимодействии с интерактивными SVG.
Для выполнения большинства советов по оптимизации вручную вам потребуется графический редактор. Какие же инструменты присутствуют на рынке?
Adobe (Macromedia) FreeHand — удобный, гибкий инструмент, доступны версии для Windows и Mac, но есть два неприятных недостатка: не работает напрямую с SVG и больше не разрабатывается вследствие покупки Macromedia фирмой Adobe, у которой есть свой редактор векторной графики (рис. 3.18).
Adobe Illustrator — один из старейших инструментов, непростой в использовании, не столь удобный, но во многом очень гибкий, умеет работать с SVG. Существуют платные версии для Windows и Mac (рис. 3.19).
(рис 3.18) Редактор Macromedia FreeHand MX(рис 3.19) Редактор Adobe IllustratorInkscape — популярный, простой в использовании, бесплатный редактор, созданный специально для редактирования SVG. Есть версии для Linux, Mac и Windows (рис. 3.20).
(рис 3.20) Редактор SVG Inkscape(рис 3.21) Редактор графики GIMPGIMP — известный многим бесплатный конкурент Adobe Photoshop, умеет редактировать и векторную графику, хотя справляется с этим хуже специализированных программ. Умеет работать с SVG. Существует в версиях для Linux, Mac, Windows (рис. 3.21).
Sketsa — платный, написанный на Java специализированный редактор SVG (рис. 3.22).
(рис 3.22) Мультиплатформенный редактор Sketsa
Как уже было упомянуто выше, одним из авторов была написана утилита для автоматической оптимизации файлов SVG. Прототипом послужили две небольшие программы на Java, взятые с сайта Джоса Хёза.
Программа написана на языке PHP, скачать ее можно по адресу http://bolknote.ru/files/ svgcrush.phps
У программы есть несколько ключей настройки, которые по умолчанию установлены на максимальную оптимизацию. Единственный ключ, который необходимо задать программе, —f, он указывает имя обрабатываемого файла. Результат выдается в стандартный вывод и может быть перенаправлен в файл стандартной конструкцией:
php svgcrush.php -fpicture.svg > optimized.svg
Оптимизация производится в несколько этапов.
Программа, вероятно, будет совершенствоваться и дальше. Например, можно заменять числовое значение некоторых цветов на их английское название, если оно более короткое ("tan", "red", "plum"), объединять трансформации, преобразовывать rgb(r,g,b) представление в #rrggbb и так далее.
Формат запуска программы следующий:
php svgcrush.php [ОПЦИИ] -fd>AHJl > РЕЗУЛЬТИРУЮЩИЙ_ФАЙЛ
Опции, которые понимает программа:
-fФАЙЛ — файл, который будет обработан;
-rЧИСЛО — точность чисел (см. этап № 3) в атрибуте "d", тега path, от 1 до 9, по умолчанию — 1;
-D — не удалять атрибуты со значениями по умолчанию (частично исключает этап №4);
-C — не оптимизировать значения цветов (опять же, касается этапа № 4);
-I — не удалять неиспользуемые ID (исключает этап № 6); -F — форматировать XML (частично исключает этап № 1).
Для тестов эффективности мы использовали Open
Все современные браузеры поддерживают прозрачную распаковку контента, сжатого методами gzip и
Способы настройки веб-серверов для работы со сжатым контентом были рассмотрены во второй лекции.
Определенный интерес представляют сайты, позволяющие произвести автоматическую оптимизацию изображений. Хотя они не дают возможности контролировать процесс, но обладают неоспоримым преимуществом: все, что вам нужно для того, чтобы ими воспользоваться, — доступ в Интернет.
К настоящему времени существуют два сервиса, которые можно рекомендовать к использованию: принадлежащий Yahoo! сервис Smush.it(http://smush.it) и punyPNG (http://punypng.com), который разрабатывает Конрад Чу. И тот и другой оптимизируют все три общепринятых формата, статичные GIF с большой вероятностью будут сконвертированы в PNG с индексированной палитрой (если такое преобразование даст выигрыш в размере).
На данный момент punyPNG оптимизирует изображения лучше, в частности, из-за применения более современных утилит для оптимизации PNG (Smush.it использует устаревший PNGcrush в режиме полного перебора) и техники, описанной в разделе 3.3.10, для удаления лишнего из полностью прозрачных областей. Впрочем, ситуация еще может измениться.
Тестовая таблица с блога "Gracepoint After Five" (http://www.gracepointafterfive.com/punypng-benchmarks) с результатами оптимизации девяти PNG-файлов обоими онлайн-сервисами и двумя популярными утилитами оптимизации PNG:
| PunyPNG | Smush.it | OptiPNG | ImageOptim | |
|---|---|---|---|---|
| Ask Image 01 | 22% | 20% | 20% | 20% |
| Ask Image 02 | 46% | 39% | 40% | 2% |
| Ask Image 03 | 8% | 7% | 7% | 7% |
| Ask Image 04 | 35% | 1% | 33% | 34% |
| Blocks | 58% | 0% | 0% | 0% |
| Butterfly | 41% | 1% | 1% | 1% |
| 63% | 36% | 61% | 61% | |
| NASCAR | 37% | 28% | 28% | 28% |
| Yahoo! | 17% | 9% | 9% | 9% |
| Экономия: | 41% (112 Kб) | 14% (37 Kб) | 19% (51 Kб) | 20% (53 Kб) |
Помимо веб-интерфейса сервисы предоставляют API. На данный момент компания Yahoo! закрыла API для публичного использования, но им все еще можно воспользоваться. API punyPNG находится в стадии закрытого бета-тестирования (и может измениться), Конрад Чу любезно согласился предоставить нам доступ к тестовой версии.
Для того чтобы произвести оптимизацию изображения через API, вам нужно разместить его где-нибудь в интернете и узнать его URL. Именно URL используется в качестве источника данных. В обоих сервисах входные данные представлены как GET-параметры, а ответ производится в формате
URL, на который нужно обратиться: http://smushit.eperf.vip.ac4.yahoo.com/ysmush.it/ws.php
Параметры:
Пример успешного запроса: http://smushit.eperf.
{
"src":"http:\/\/www.publicdomainpictures.net\/pictures\/2000\/ ?
nahled\/1-1222847524s7rl.jpg",
"src_size":50219,
"dest":"http:\/\/smushit.zenfs.com\/results\/3144140b\/smush\/ ?
pictures%2F2000%2Fnahled%2F1-1222847524s7rl.jpg",
"dest_size":49198,
"percent":"2.03"
}
Все поля достаточно очевидны, в поле "dest" указан адрес, где можно скачать оптимизированное изображение.
Пример вызова, порождающего ошибку: http://smushit.eperf. Такой запрос вернет следующий ответ:
{
"src":"http:\/\/bolknote.ru\/imgs\/2009.09.29.jpg",
"src_size":148529,
"error":"No savings",
"dest_size":-1, "id":"test" }
Текст ошибки говорит о том, что Smush.it не смог оптимизировать изображение. Другими причинами возникновения ошибочной ситуации могут быть, например, слишком большое изображение (более одного мегабайта) или несуществующий адрес.
После того как автор закончит бета-тестирование API, получить доступ к нему можно будет, зарегистрировавшись на сайте и получив соро-кобитный ключ доступа, который нужно будет указывать при запросах на оптимизацию. В профиле, кстати, можно указать, нужно ли удалять из ваших файлов информацию
Интересной особенностью сервиса является возможность пакетной обработки — оптимизированные изображения можно скачать единым ZIP-архивом.
URL, на который нужно обратиться: http://www.gracepointafterfive.com/punypng/api/optimize
Параметры:
Пример успешного запроса: http://www.gracepointafterfive.com/punypng/api/optimize?img= J http://www.conradchu.com/images/portfolio/targets.gif J key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Запрос вернет следующий ответ:
{
"original_url": "http://www.conradchu.com/images/portfolio/ ?
targets.gif",
"original_size": 35071,
"optimized_size": 27922,
"optimized_url":"http://www.gracepointafterfive.com/punypng_staging/ ?
attachments/514367d961c0c9c5ef80e02cc3381660b24d77d8/targets.gif.png",
"group_id": null,
"savings_percent": 21,
"savings_bytes": 7149
}
Оптимизированное изображение, как видно, доступно по адресу, указанному в поле "optimized_url". Если вы использовали пакетный режим (то есть указали параметр "group_id" в запросе), то ZIP-файл с оптимизированными изображениями можно скачать по URL http://www.gracepointafterfive.com/punypng/api/download_zip?group_id=гpynna
Ключ для скачивания архива не требуется. Пример запроса, порождающего ошибку: http://www.gracepointafterfive.com/punypng/api/optimize?img=http://libpng.org/pub/png/img_png/ pnglogo-grr.pngkey= J XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Запрос вернет следующий ответ:
{
"error": "Sorry, the max file size supported is 150KB."
}
В настоящее время максимальный размер файлов ограничен в 150Кб, количество файлов для пакетной обработки не может быть больше пяти, а количество изображений, обрабатываемых за день, не может быть более 50. Автор планирует запуск платной версии, где ограничения можно будет снять.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.