Выбор между форматами файлов невелик - на сегодняшний день общепринятыми являются только GIF и JPEG. Каждый из них обеспечивает как различную степень сжатия изображения, так и качество картинки.

Формат GIF CompuServe предусматривает хранение графики с палитрой из 256 цветов, причем после преобразования исходного изображения происходит сжатие полученного массива байтов. JPEG-графика обеспечивает 24-битовую палитру, при этом степень сжатия может варьироваться в широких пределах, соответственно меняется соотношение качество/размер.

Какими же принципами следует руководствоваться при выборе формата? В случае если изображение контрастное, без полутонов, с явным преобладание какого-либо цвета, то лучше использовать GIF. Если картинка насыщенная, с большим количеством цветов, без резко очерченных границ, большого размера - предпочтение отдается JPEG. Такие различия определяются различиями алгоритмов сжатия этих форматов. Вышесказанное иллюстрирует рис. 1. Первоначальное изображение резкое, количество цветов невелико. Как следствие, GIF-файл меньше в 6 раз. Если посмотреть палитру изображения в графическом редакторе, то окажется, что реально используются только 50 из 256 возможных цветов.

После определения формата файла следует заняться оптимизацией соотношения качество/размер. Для GIF определяющее значение имеет количество элементов в таблице цветов. Например, переход от 256- к 128-цветной палитре уменьшает размер файла в среднем на 10%, а в случае с 64-цветной палитры - на 30%! Одновременно с этим снижается качество изображения - происходит выпадение и замена цвета. Однако в большинстве случаев переход на палитру с меньшим числом элементов происходит безболезненно и совершенно незаметен для восприятия. Для этого при работе в Photoshop следует выбирать только адаптивную палитру (Adaptive), поскольку при этом можно варьировать размер палитры, или точную (Exact), которая применяется для изображений с небольшой гаммой цветов.

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

JPEG оптимизируется несколько иначе. Это формат, который изначально сохраняет исходный рисунок с потерями. Однако это не является его недостатком, так как потери весьма незначительны, и зачастую JPEG-изображение воспринимается даже лучше за счет более "мягкого" контраста. Палитрой в JPEG управлять нельзя, так как на каждую точку согласно стандарту отводится 24 бита (TrueColor). Однако предоставляется возможность изменять степень сжатия, соответственно меняя качество изображения. Если сайт не представляет собой художественную галерею или каталог иллюстраций Hi-класса, то можно легко уменьшить размер графических файлов. Для этого в Photoshop при сохранении изображения нужно установить параметр Качество (Quality) меньше 10 (высшее качество). На рисунке 4 одна из фотографий имеет оригинальное качество (Maximum, 10), а вторая сохранялась с параметром качества 5 (Medium). Разница становится заметна только при увеличении 200-300%, в то время как размер второго файла меньше почти в 3,5 раза! Дальнейшее снижение качества до 1 (Low) уже сказывается на изображении - появляются области с повышенным контрастом, и фото "рябит".

Еще одним методом оптимизации графики с целью ускорения загрузки является "нарезка" большой иллюстрации на более мелкие с последующим размещением в ячейках таблицы подходящего размера. Толщина рамки таблицы и интервалы между ячейками должны быть, естественно, равны нулю. Так как броузеры никогда не "грузят" изображения последовательно, а выполняют параллельную загрузку каждого элемента графики, то в целом отображение большого рисунка происходит быстрее. Применяют данный метод, главным образом, при размещении на странице большого изображения с нанесенными на нем надписями, выполняющими роль ссылок (так называемая "карта с горячими областями"). Таким образом, пользователь может найти интересующую его ссылку, не дожидаясь, пока загрузится вся картинка, размер которой достигает нередко сотню килобайт. В "нарезке" есть еще один плюс: каждый элемент можно оптимизировать в отдельности. Как правило, подобные изображения содержат много областей с малым количеством цветов. Преобразовав их в GIF с палитрой из 1-3 элементов, можно уменьшить суммарный размер рисунка на 5-15%! Кроме того, появляется возможность "оживить" изображение, применив с помощью JavaScript эффект смены картинки при наведении курсора.

И, наконец, можно "почистить" графический файл, убрав различные комментарии, вставляемые графическими редакторами. Для этого можно воспользоваться утилитами типа GIFCleaner и JPEGCleaner. Также незаменимой может оказаться программа Ulead SmartSaver Pro, сжимающая изображения с потерей качества.

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