Красиво и быстро

Создать красивый дизайн странички — еще полдела, нужно добиться того, чтобы она быстро загружалась (рекомендуемый многими известными web-дизайнерами размер страницы должен быть в пределах 30 Кбайт). Оставим в стороне проблемы оптимизации html-кода и рассмотрим методы сокращения размера иллюстраций на диске. Существует множество программ, которые позволяют это делать, однако в данной статье я хочу остановиться на Adobe ImageReady, одной из лучших в своем классе — кроме того, она мне, как и все продукты Adobe, просто нравится.

Программа поддерживает оба распространенных в сети формата — GIF и JPEG, а также менее популярный PNG; существующие для них настройки позволяют быстро добиться оптимального результата с точки зрения качество/объем на диске.

Итак, у вас есть изображение, которое нужно сжать как можно сильнее без видимых на глаз потерь качества. Для этого проанализируйте его: если в изображении присутствуют разнородные области, например, имеющие мелкие детали, крупные, а также области с каким-то доминирующим цветом, то довольно часто разбиение специальным образом одного большого изображения (свыше 30 Кбайт) на более мелкие позволяет сократить общий размер файла. Разделение изображения на фрагменты (slice по терминологии ImageReady) в программе возможно несколькими путями. Если у вас есть файл со слоями — можно загрузить маску непрозрачности для каждого слоя и по ее границам сделать slice (Create Slice from Selection). Другой вариант — поставить направляющие и указать Create Slice from Guides. Еще один вариант — вручную обвести границы области и тоже преобразовать их во фрагменты.

Что это дает? Дело в том, что в этом случае можно достичь большей оптимизации за счет более рационального использования способностей каждого формата. Программа позволяет для каждого slice отдельно устанавливать как тип, так и настройки компрессии. Более того, фрагменты, которые предполагается компрессировать по одинаковому алгоритму, можно объединять (по очереди выбирая их инструментом slice tool и указывая Slices/Link slices), и изменения, сделанные для любого из них, автоматически переносятся на остальные, с ним связанные. Таких «групп по интересам» может быть несколько, причем фрагменты, принадлежащие к разным группам, отличаются по цвету окантовки, что облегчает дальнейшую работу с ними.

Иногда возникает необходимость объединить несколько мелких фрагментов (соответственно они получают одинаковые настройки по компрессии) в один (например, если разбиение его на более мелкие не дало выгоды) — в этом случае за счет более простой таблицы сокращается html-код.

При объединении фрагментов нужно помнить об одном нюансе. Дело в том, что все фрагменты в ImageReady бывают двух типов — с автоматическим изменением размеров у всех остальных связанных с ним slices (например, имеющих один общий край) — auto slice и без такового (user slice). Их можно различать по значку, расположенному в верхнем левом углу фрагмента возле его номера — у первых он имеет символ бесконечности. Так вот, при объединении auto slice с user slice получается auto slice, если наоборот — user slice, а поскольку пользоваться auto slice гораздо удобнее, перед объединением точно решите, какой эффект вы хотите получить.

Для визуального сравнения эффекта от применения различных настроек ImageReady может отображать на экране одновременно до 4 вариантов изображения с выдачей информации о конечном размере файла на диске, скорости его загрузки при различных скоростях модема и процентах компрессии. Если настроить панели, находящиеся внизу окна документа, на Optimized Information и Original/Optimized File Size, то в них будет соответственно отображаться общий размер всей картинки и только выделенного фрагмента. Это очень удобно при определении оптимального варианта компрессии.

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

GIF

Этот формат оптимален для сохранения областей изображения, в которых используется мало цветов (логотипы, текст) или же обширные области с однородным цветом. Компрессируется информация построчно, поэтому размеры файла изображения, состоящего, например, из чередующихся полосок или же сплошной закраски одним цветом отличаются незначительно. Максимальное количество поддерживаемых цветов — 256, и, в отличие от JPEG, в нем поддерживается прозрачность. Кстати говоря, с любым увеличением числа используемых цветов пропорционально увеличивается размер файла (а не только при выходе количества цветов за пределы диапазона, охватываемого степенью двойки — например, с 16 до 32, с 32 до 64, — для этого достаточно поэкспериментировать с ImageReady. Именно поэтому обычно используют лишь несколько цветов с одновременным применением dither (подмешивание) — имитацией дополнительных цветов путем смешивания основных (например, оранжевый цвет будет достигаться подмешиванием красных точек к однородному желтому фону), в этом случае качество картинки будет вполне приличным, а размер файла увеличивается совсем незначительно.

Основные цвета — это те, которые присутствуют в автоматически генерируемой таблице цветов. Однако можно вмешаться в этот процесс, выбирая разные способы ее формирования. Таблица строится на основе анализа площади картинки, которую занимает каждый присутствующий в ней цвет (если выбран способ adaptive), либо делается ее коррекция с учетом восприятия определенных цветов глазом человека (perceptual), или же все цвета приводятся к стандартному набору (который гарантирует абсолютную идентичность воспроизведения цветов любыми браузерами при использовании 8-битного цвета). Однако чаще всего наилучшие результаты дает selective. Во-первых, в этом случае учитывается восприятие глазом человека, поскольку предпочтение отдается передаче без искажений тех цветов, которые занимают обширную площадь картинки. Во-вторых, программа старается максимально использовать цвета из web-палитры. Если программа все-таки не совсем правильно определяет базовые цвета, вы всегда можете открыть таблицу цветов (Window/Show color table) и вручную подкорректировать ее. Так, определенные цвета, имеющие принципиальное значение, можно привести к стандартным web-цветам (snap to web palette) или же указать обязательно сохранять цвет, какой он есть (Lock selected colors to prohibit being dropped).

Dither

Расширяет возможности ImageReady поддержка нескольких способов подмешивания цветов — diffusion, pattern, noise. Обычно наилучший результат дает diffusion (равномерное распределение точек), в то время как при использовании pattern получается достаточно четкая повторяющаяся структура. Noise позволяет избежать «рубцов», появляющихся на границах областей с разными цветами, однако при этом значительно «размазывает» их, что не всегда годится. Программа может не только автоматически генерировать цвета для создания dither, но и использовать задаваемые пользователем. Для их переопределения зайдите в Filter/Other/DitherBox.

Кроме того, ImageReady позволяет регулировать степень применения dither — больший процент означает большую имитацию, что, соответственно, улучшает качество картинки, но приводит к увеличению размера файла, а меньшие значения дают сильное искажение (в этом случае эффект сравним с получаемым no dither). Истина, как обычно, находится где-то посредине. Именно от того, насколько точно вы ее определите, во многом будет зависеть размер картинки на диске.

Если же вам нужно еще больше уменьшить размер файла, можно включить опцию потери качества (lossy), однако этим следует пользоваться весьма осторожно, поскольку снижение качества в GIF происходит гораздо более радикально, чем в JPEG.

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

JPEG

Что касается JPEG, то этот алгоритм сжатия хорошо работает с изображениями, где нет четких границ цвета (в частности, с фотографиями) — при этом изображение разбивается на более крупные зоны, и при значительной компрессии (ниже 20 по стандартной шкале) на нем возникает характерная блочная структура. Несомненным плюсом этого формата является отличная степень сжатия при сохранении еще приличного качества картинки — так, соотношение 1:50 считается нормальным явлением. В программе можно воспользоваться как существующими предустановками на 4 степени сжатия, так и подобрать компрессию более точно, с шагом 1 на диапазоне от 0 до 100. Дополнительное сжатие можно получить, размывая изображение (blur), однако эффект от его применения довольно незначителен.

PNG

Кроме GIF и JPEG, программа поддерживает пока еще «экзотический» PNG — 8- и 24-разрядный. Однако нужно помнить, что в отличие от двух предыдущих форматов, не все браузеры его поддерживают, поэтому старайтесь не пользоваться им без особой необходимости. Алгоритм сжатия PNG-8 несколько более совершенный, чем у GIF, и проявляет себя только в случае использования относительно большого количества цветов, давая дополнительную экономию в 10–30%. Однако в некоторых случаях, особенно когда используется немного цветов, GIF работает все же лучше его. Настройки PNG-8 аналогичны GIF, за исключением невозможности сохранения с потерями качества, зато в нем можно указать, какой цвет считать прозрачным и на какой он будет изменен браузером (полезно при размещении картинки на странице с однородным фоном).

PNG-24 аналогичен PNG-8, однако позволяет отображать больше, чем 256 цветов, и к тому же поддерживает до 256 уровней прозрачности. Платой за компрессию с сохранением качества стал размер файлов: они обычно больше, чем у того же JPEG не на «своем» изображении. Любые настройки по компрессии можно сохранить в программе с тем, чтобы впоследствии ими воспользоваться снова.

FST

Кроме трех рассмотренных типов файлов, начинает получать распространение еще один — FST (FAST Image Transfer), который разработан норвежской компанией Fast Search & Transfer ASA (FAST). При одинаковом по качеству изображении fst- файлы имеют объем в 2–6 раз меньший, чем JPEG, и более чем в 10 раз — по сравнению с GIF (или же при одинаковом размере файла качество изображения выше). Для отображения их в окне браузера сначала автоматически подгружается маленький java-апплет (22 Кбайт) — программка, которая загружает, декодирует и отображает картинки на экране. Поддерживается апплет, начиная с третьих версий Internet Explorer и Netscape Navigator, причем Java VM должна быть обязательно включена (View->Internet Options->Security, ->Advanced-> ‘Java JIT compiler enabled’ или в NN: Edit->Preferences->Advanced->’Enable Java’).

Существует дополнительный модуль для Photoshop (около 100 Кбайт), который конвертирует изображения в формат FST для платформ Windows 95/98/NT и Mac OS. Изображение отрисовывается на экране постепенно (как Interlaced GIF), что позволяет сразу же определить его содержание. Для достижения компромисса между качеством изображения и размером файла можно, как и в JPEG, выбирать степень компрессии (от 1 до 100). В отличие от изображений GIF и JPEG, вставленный в html-страницу FST-файл должен предваряться строкой типа:

applet archive=”f1.jar” width=”512” height=”512”>   ,