Библиотека Интернет Индустрии I2R.ru

Была такая история с мальчиком и его любимым фикусом (где-то в архивах Сталкера). Суть ее в том, что ребенок выложил на сервер картинку с фикусом весом 1.5Mb. Никто над этим не смеялся, потому как все понимали - ребенок еще мало знает и умеет, и ему надо просто объяснить.

Мы-то все это знаем и умеем, но результаты у нас всех тоже разные, и иногда не менее смешные, но обычно в другую сторону. "Зажмурить картинку" так, что кроме 3 Kb живого веса в ней больше ничего не остается - тоже много ума не надо, было бы чем "жмурить". Вот об этом речь - чем и как мы оптимизируем картинки.

Распространенные оптимизаторы.

Список даже распространенных оптимизаторов мог бы быть большим, ибо любой графический пакет, работающий с форматами GIF и JPG, может считаться оптимизатором. На это претендует даже FrontPage, причем часто он пытается самостоятельно. Результат - ранее оптимизированная картинка может "прибавить в весе" и потерять в качестве... Свинство.

Мне кажется, по-настоящему оптимизатором может считаться та программа, которая визуально представляет финишные результаты, давая вам возможность самому принимать решения о степени оптимизации в зависимости от ваших творческих задач.

PiCoBello

Начну с того, что скачал ее полтора года назад по чьему-то восторженному отзыву, восторгов не поимел и смахнул в архив. Но в памяти остались красивые графики оптимизации, помогающие понять - как можно компрессовать JPG (ну и GIF, конечно). Но зато сегодня программка меня шокировала. Начнем с того, что она умеет делать resize, но лучше бы она не умела... Даже полтора года назад это не могло считаться удовлетворительным. Результат похож на то, как вы в Photoshop пытаетесь сделать это же самое с индексированной картинкой (на 256 цветов и менее) - драные линии и контуры. Получив на графиках вывод, что мне без особой разницы, в каком формате сохранять, я выбрал JPG и нажал Save. В общем, что просил - то получил. PiCo, нимало не сумлеваясь, молчком сохранила результат поверх исходника. Для прикола - ее красивые графики и единственная попытка оптимизации картинки (потому как уже нет картинки).

В общем, Бог бы с ней, если бы не этот график. Именно так компрессуется JPG. До определенного уровня идет значительная компрессия "веса" при незначительном визуальном изменении картинки, а потом, после некоей "критической" точки - наоборот, каждый процент портит картинку весьма заметно. С тех пор при оптимизации джипегов я все время ищу эту "критическую" точку, и от нее уже строю весь процесс на уровне задачи. (Блин, картинку жалко...)

Ulead Smart Saver (Pro)

Долгое время этот оптимизатор был моим любимым оптимизатором. Помимо основной функции он выполнял массу других полезных операций, пока его не сменил встроенный модуль оптимизации в Photoshop 5.5 Оптимизатор был очень естественной частью Фотошопа, легко настраивался, и по сути новый модуль практически повторяет его во основных функциях. Следует сказать большое спасибо фирме Ulead за эту программу.

Особенности сжатия JPG.

Уточним - визуальные особенности. Ну, во-первых, канал красного цвета. Он начинает чернеть и "проваливаться" при сжатии в первую очередь.

4 Kb	5 Kb	6 Kb

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

Как мы готовим картинку для интернета?

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

Можем ли мы как-то управлять соотношением размер/качество в нужную нам сторону? Оказывается, да... Все дело в пикселах, вернее, в их структуре.

Во-первых, количество цветов. Не смотря на то, что мы имеем возможность в 16 миллионов цветов, на деле количество цветов не превышает обычно количество пикселов в картинке :o), что актуально для вебовских маленьких размеров. Обычно в средней картинке их 50 - 60 тысяч или меньше. В данной картинке (92х108) их может максимум около 10 000 цветов, а учитывая белый фон одного цвета (~35-40%) - около 5000-6000.

Чем больше у вас в картинке равнотонных пространств, и чем меньше резких границ и перепадов тона и цвета - тем лучше оптимизируется JPG. Поэтому даже предварительными средствами Photoshop мы можем влиять на окончательный размер оптимизируемой картинки. Посмотрите на следующие три картинки (все они "зажмурены" при одной настройке опций оптимизатора, то есть экономия достигается за счет самой картинки)

3170	2992	2688

Первая картинка просто оптимизирована без каких либо предв. обработок.
Вторая картинка сначала увеличена в размере на 500% с увеличением разрешения до 300 dpi , а затем в два приема доведена до значений исходника. Экономия есть, но визуальное качество пострадало.
Третья картинка сразу обрабатывалась с расчетом визуальных изменений (светлее, дополнительный слой методом overlay с blur и последующим слиянием слоев.) Можете посчитать, сколько процентов сэкономлено, разумеется, в том случае, когда суть картинки позволяет вносить в нее подобные изменения).

406	1834	394	1525

Эти картинки - фрагмент лба с первой и третьей картинок предыдущей серии. Маленькая - 1:1, большая - скриншот с увеличенного фрагмента. Как видите, в скриншоте тоже заложена "экономия" на пиксельном уровне.

В свое время одной из фирм разрабатывался графический формат WaveLite для использования в интернете с достаточно интересным алгоритмом интерполяции между пикселами. Был даже выпущен плугин для Netscape. На маленьких размерах выигрыша против JPG не произошло, но вот на огромных файлах для полиграфии без каких либо визуальных потерь 4 мегабайта легко конвертируются в 200 килобайт с возможностью визуального просмотра и возможности "развернуть" картинку обратно до исходника. Этот формат ныне активно использует Corel в своих графических библиотеках.

Картинка после интерполирования в этом формате приобретает мягкость и чистоту, а тка же способность оптимизироваться с более качественными характеристиками. Если вы внимательно посмотрите на пиксельный фрагмент, то заметите отсутствие характерных для JPG квадратов по несколько пикселов. Так же свободно формат интерполирует темные участки изображения (JPG резкие перепады тона оставляет без интерполяции или наоборот, делает чересчур контрастными). Но еще раз повторюсь, на мелких картинках выигрыша никакого, за исключением посреднической. Если заготовку фото сначала перевести в формат WI, потом уменьшить до нужных размеров и сохранить в JPG, то экономия веса против обычного варианта будет весьма ощутимой. К сожалению, Photoshop не поддерживает этот формат, специально покупать PhotoPaint для этого мало кому придет в голову, а родная программка создателей этого формата почему-то открывает все картинки вверх ногами. Так вот и гибнет интересная идея...