Приёмы оптимизации графики.

Проблемой номер один при работе над графикой для Web-сайта является размер файла, который напрямую связан со скоростью появления изображения в окне браузера. Дело в том, что самая лучшая графика - та, которая имеет приемлемое качество изображения и небольшой размер файла.

Подготовку графики для вебстраницы условно можно разбить на 3

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

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

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

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

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

Если JPEG оперирует единственным и довольно абстрактным параметром quality для сжатия, то в GIF присутствует целый ряд параметров, главным из которых является количество цветов, или размер палитры. В отличие от других форматов, которые имеют только стандартные градации цветовой глубины (2 цвета, 16, 256, 215- high color , 224-true color), GIF может иметь любое количество цветов от 2 до 256.

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

Хотя количество цветов, необходимое для изображения, подбирается опытным путем, есть некоторые закономерности. Например, одноцветному тексту на одноцветном фоне должно хватить палитры из 8, а в небольших размерах даже и 4 цветов - два из них станут основными, а остальные отойдут промежуточным тонам для анти-алиасинга (сглаживания) на общих границах основных цветов.

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

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

Главный смысл использования диффузии состоит в том, чтобы изображение становилось гораздо терпимее к размеру палитры. Например, если без применения диффузии картинка не выдерживает редукции даже до 128 цветов, то с диффузией ее можно ограничить до 64 или даже 32 цветов без особой потери качества, С другой стороны, случайная диффузия резко ухудшает сжимаемость графики. Вот почему иногда, снизив цветность изображения с 256 до 128 цветов, из-за этого противоположно направленного эффекта мы вместо уменьшения размера файла получим увеличение. В ряде случаев даже диффузия неспособна "вытянуть" такие сугубо фотографические элементы изображения, как размывки и градиенты. При воспроизведении в ограниченной палитре градиент распадается на сильно портящие впечатление поперечные полосы (хотя без диффузии эти полосы были бы несоизмеримо заметнее).

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

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

⇐Особенности изображений для web | TeachPro WEB-дизайн | О программе macromedia dreamweaver⇒