Из-под пятницы суббота

Сглаженные контуры объ­ектов могут вступать в конфликт с прозрачными обла­стями изображения в формате GIF, которые никакому сглаживанию не поддаются: пиксел в GIF может быть либо прозрачным, либо нет, полутона здесь невозможны в принципе. Конечно, вытравливая фон вокруг объекта, правильнее всего было бы сплавить его контур не с фо­новым цветом, а с прозрачностью, так чтобы в граничных пикселах смешивались не два цвета, а цвет объекта с неким

промежуточным уровнем прозрачности, — такой объект сохранял бы анти-алиасинг своего контура над любым, в том числе и многоцветным, фоном. К сожалению, пока что подобное возможно только в формате PNG, до сих пор не поддерживаемом напрямую графическими броузерами.

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

Практических рекомендаций из этого можно вывести две. Во-первых, следует отказаться от анти-алиасинга внешнего контура для тех изображений, фон под которыми заранее не известен. А во-вторых, любую графику с прозрачностью нужно подготавливать (рисовать в растре или импортировать из векторного формата) с тем фоном, который будет под этим изображением в готовой композиции. Это относится и к тем случаям, когда изображение должно размещаться над цветовой границей, — как, например, помещенный над границей синего и белого логотип сайта в примере 15. Такую графику приходится готовить в два этапа: сначала объект создается с анти-алиасингом поверх фона нужного цвета и рисунка, а затем этот фон (за исключением ореола анти-алиасинга вокруг объекта) закрашивается одним цве­том и цвет этот объявляется прозрачным. Из-за колебаний величины полей веб-страницы (стр. 194) перемена цвета ореола может на несколько пикселов не совпадать с цвето­вой границей фонового изображения, но с этим небольшим дефектом вполне можно примириться.

Казалось бы, с одноцветным бестекстурным фоном страницы прозрачность для элементов переднего плана вообще не нужна. Однако из-за почти неиз­бежной диффузии в броузере к прозрачности приходится прибегать и в этом случае: если вы заполните фоновые части изображения тем же самым цве­том, что и фон страницы, но не сделаете их прозрачными, на 256-цветных мониторах граница между шершавым фоном рисунка и гладким фоном страницы в броузере будет слишком хорошо заметна. Отсюда же следу­ет, что в изображениях с прозрачностью нельзя пользоваться редукцией палитры с диффузией — ведь прозрачным может быть объявлен только один цвет, и если фон изображения будет состоять из смеси разноцветных пикселов, полностью прозрачным его сделать уже не удастся.

Пиксельные эффекты

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

Прежде всего, все цвета в малоразмерных графических элементах обязаны быть значительно ярче, контрастнее по отношению к своему окружению, в каком-то смысле даже «примитивнее». Я уже писал об особенностях восприятия цвета в малых по площади объектах (стр. 109); особенно­сти эти не ограничиваются едва заметными оптическими иллюзиями, но зачастую требуют весьма значительной кор­ректировки цвета. В экранной графике «потере индивиду­альности» цвета способствует анти-алиасинг, разбавляющий цвет краевых пикселов цветом фона: чем меньше объект и чем сложнее его форма (хороший пример — текст мелким кеглем), тем большая доля составляющих его пикселов кра­евые и, следовательно, тем дальше воспринимаемый цвет объекта от задуманного.

Например, если в композиции присутствует залитая деся­типроцентным серым плашка на белом фоне, а под ней — некий текст мелким кеглем, который по замыслу дизайнера должен соответствовать плашке по цвету, может оказаться необходимым значительно затемнить серый цвет надпи­си, иногда до 20 процентов серого и выше. И наоборот, яркость серого текста на черном фоне может понадобить­ся повысить для компенсации влияния малого размера и анти-алиасинга.

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

Здесь же уместно напомнить о правиле выравнивания пропорций при уменьшении (стр. 84), о пиксельных текстурах (стр. 119) и о том, что

объекты масштаба отдельных пикселов должны создаваться уже на стадии растрового изображения, а не в векторном оригинале.

ОПТИМИЗАЦИЯ

Технологическая цепочка производства графики для веб-

страниц обычно включает три этапа: создание графических элементов в векторном редакторе, экспорт в полноцветный растровый формат и, наконец, оптимизацию полученной графики с одновременным переводом ее в формат с огра­ниченной цветностью (GIF) или в формат, реализующий сжатие с потерями (JPEG). Иногда между вторым и третьим этапами на изображение накладываются какие-то специфи­чески растровые эффекты (например, тени или размывки); в других случаях, наоборот, второй этап может отсутствовать вообще, если векторная программа способна экспортировать графику сразу в GIF или JPEG и предоставляет при этом достаточные для профессионала возможности настройки этого процесса.

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

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

JPEG

Сжатие графики в формате JPEG определяет­ся одним-единственным параметром, называемым уровнем качества (quality) и измеряемым в относительных едини­цах — чаще всего от 0 (максимальное сжатие) до 100 (максимальное качество). Большинство JPEG-файлов со­храняются с уровнем качества в диапазоне от 50 до 100. Как правило, чем плавнее и размытее цветовые переходы в изображении, тем меньшим может быть этот параметр и тем большего сжатия удается достичь. Наоборот, чет­кие и контрастные цветовые границы требуют повышения уровня качества, иначе возле них появляется неряшливая «рябь».

Простота настройки этого формата (и относительная ред­кость в дизайне фотографических текстур по сравнению с плоским цветом) позволяют сформулировать первый шаг алгоритма оптимизации так: если принадлежность изобра­жения к владениям одного из форматов не очевидна для вас с первого взгляда, попробуйте сначала сохранить его в формате JPEG, повышая степень сжатия до тех пор, пока качество не перестанет вас удовлетворять. Даже если получившийся файл будет несоразмерно велик и вы решите переехать в GIF, у вас, во всяком случае, будет цифра, с которой можно будет сравнить результаты. В большинстве практических случаев, однако, можно сразу же выбрать либо JPEG (для настоящих фотографий и композиций, в которых они доминируют), либо GIF (для плоскоцвет­ных логотипов, надписей, заголовков и т. п.). Сродство JPEG'a с фотографическими текстурами столь велико, что размер файла в этом формате (при заданном уровне каче­ства) вполне можно использовать как объективную «меру фотографичности» изображения.

Возвращаясь к теме малоразмерной графики, нужно отметить, что для изображений, размер которых меньше приблизительно ста пикселов по одному из измерений, единственным разумным выбором остается формат GIF. Как л только что писал, сложные текстуры на таких маленьких пло­щадях чувствуют себя неуютно, — а если даже вам и нужен крохотный фрагмент фотографии, GIF справится с его воспроизведением ничуть не хуже, чем JPEG. Последний формат попросту не приспособлен для мало­размерной графики — достаточно сравнить объемы изображения размером в один пиксел (стр. 237): 43 байта в GIF и свыше полутора килобайт в JPEG.

GIF. Взамен единственного и довольно-таки абстрактного «уровня качества» степень сжатия в GIF регулируется рядом параметров, самым важным из которых является количество цветов, или размер палитры. Другие форматы, как правило, имеют лишь стандартные градации цветовой глубины: 2 цвета, 16 цветов, а потом сразу 256, 2¹⁵ (high color) и 2²⁴ (true color, стр. 61). GIF же может иметь любое количество цветов от 2 до 256, и если в изображении используется, скажем, 64 цвета (2⁶), то для хранения каждого пиксела будет взято ровно по шесть бит и ни битом больше. (Втиснув то же изображение в 60 или 40 цветов, вы получите лишь незначительный выигрыш в размере; следующий скачок оптимизации произойдет только при переходе через 32 цвета, когда размер каждого пиксела сократится еще на один бит.)

Если не применяется безопасная палитра, графическая программа са­ма решает, какие именно цвета останутся при редукции полноцветного

изображения в ограниченную палитру. Общее правило таково: чем больше какого-то цвета в оригинале, тем выше вероятность того, что он в неиз­менном виде войдет в редуцированную палитру; менее популярные цвета, наоборот, будут «округлены» к ближайшим цветам палитры либо переданы смесью пикселов близких цветов (если включена диффузия). Как видите, принцип этот сформулирован достаточно общо, так что конкретные алго­ритмы редуцирования палитры могут отличаться довольно сильно — что и наблюдается в многочисленных программах-оптимизаторах, предназна­ченных единственно для сохранения графики в формате GIF.

Сколько же цветов нужно для вашего изображения? Хотя опыт определения цветовых потребностей графики «на глазок» приобретается довольно быстро, во многих случаях приходится поэкспериментировать. Так, одноцветному тек­сту на одноцветном фоне должно хватить палитры из 8, а в небольших размерах даже и 4 цветов — два из них станут «основными», а остальные отойдут промежуточным тонам для анти-алиасинга. С другой стороны, 256 (а иногда и 128) цветов с диффузией обычно вполне достаточно для полно­ценной передачи фотографического изображения средних размеров (хотя с этой задачей, скорее всего, лучше справит­ся JPEG). Основная часть веб-графики располагается где-то в промежутке между этими крайностями.

Сжатие без потерь и ограниченность палитры 256 цветами, собственно говоря, никак не связаны друг с другом, хотя веб-дизайнеры, пользующиеся форматом GIF, привыкли к одновременному действию этих факторов. Разработан­ный сравнительно недавно формат PNG (Portable Network Graphics) реализует более эффективное, чем GIF, сжатие без потерь, но при этом может хранить не только графику с фиксированной палитрой, но и полноцветные изобра­жения с тремя байтами на пиксел. Этот формат имеет и множество других преимуществ, благодаря которым он, вероятно, вытеснит GIF сразу же, как только его поддержка появится в распространенных графических броузерах.

Не нашли, что искали? Воспользуйтесь поиском: