Онлайн учебник по WEB-графике

Графика на вашей интернет-странице

       

Техника оптимизации графики

Подготовка картинки к размещению на веб-странице обычно состоит из нескольких этапов.

Шаг первый - это создание оригинала.

  1. Картинка может быть отсканированной фотографией или рисунком.

    Сегодня даже самые дешевые планшетные сканеры позволяют сканировать изображения с разрешением до 600dpi и 24-битной глубиной цвета. Для подготовки веб-графики вполне достаточно отсканировать картинку с разрешением 300dpi, после чего средствами графического редактора уменьшить разрешение до стандартной "экранной" величины - 72 пикселя на дюйм. В программе Adobe Photoshop это делается через меню Image > Image Size.

    Обычно такой метод дает лучшие результаты, чем простое сканирование с низким разрешением. Если после уменьшения экранных размеров картинки с использованием бикубического масштабирования (Resample Image: Bicubic) она заметно потеряет резкость, можно ее повысить, используя соответствующий фильтр: Filter > Sharpen > Sharpen.

    Контурные рисунки желательно сканировать в однобитном монохромном режиме (LineArt), но с высоким разрешением. Это позволяет избавиться от ненужной бумажной фактуры фона. Да и в случае с цветными рисунками зачастую имеет смысл уменьшить количество переходных оттенков и соответственно расширить области сплошных цветов - "постезизовать" (Image > Adjust > Posterize). При необходимости с помощью утилиты-трассировщика такая картинка может быть переведена в векторный формат для дальнейших преобразований

  1. Рисунок может быть создан в векторном графическом редакторе (например, в Corel Draw) и экспортирован в промежуточный растровый формат (TIFF и т. п.) или непосредственно в GIF.
  2. Картинку можно нарисовать в растровом редакторе, таком как FractalDesign Painter или Adobe Photoshop. Это особенно касается всевозможных кнопочек, маркеров и т. п. элементов интерфейса.

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

GIF применяется:

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

JPEG применяется:

  • для всех изображений реальной жизни - фотографий (с естественными плавными цветовыми переходами), видеокадров, оцифрованной живописи
  • если необходимо точно передать плавные цветовые переходы (градиенты)

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

Третий шаг - экспорт оригинала в нужный формат. Существует немало специальных программ и plug-in-модулей для визуальной оптимизации, типа Ulead SmartSaver, но вполне можно обойтись и стандартными средствами Photoshop. Итак мы имеем готовое изображение в растровом формате в цветовом режиме RGB. Если преимущество JPEG, как конечного формата очевидно, то все довольно просто: заходим в меню File > Save a Copy, выбираем в списке формат JPEG.

Опция "Exclude Non-Image Data" должна быть отмечена флажком - тогда в файле не будет сохранена миниатюрная копия картинки, что позволит выбросить несколько лишних килобайт. Далее предстоит установить уровень качества (0 - 10) и опции формата. Этот шаг, возможно, придется повторить несколько раз для достижения наилучшего результата. Опция "Baseline Optimized" обычно позволяет немного сократить размер файла. А с помощью опции "Progressive" можно создать JPEG-файл, который будет постепенно прорисовываться (детализироваться) в окне браузера по мере скачивания из Сети. Правда некоторые старые браузеры прогрессивный JPEG не поддерживают.

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

Параметр качества

Рисунок. Диаграмма для фотографии котенка

Иллюстрация фотографии котенка

Рисунок. Показанная на иллюстрации фотография котенка соответствует коэффициенту "7" ("High Quality")

Экспорт оригинального изображения в формат GIF - не менее творческая задача. Для начала создадим копию изображения (Image > Duplicate) и перейдем из режима RGB в Indexed Color (Image > Mode > Indexed Color). На появившееся предложение объединить все слои отвечаем согласием (мы ведь создали копию). Если в исходной картинке было задействовано более 256 цветов, то будет предложена адаптированная 8-битная палитра. Но в большинстве случаев есть смысл сократить количество цветов и получить тем самым выигрыш в размере файла. Все зависит от конкретного рисунка. Если это цветная фотография маленьких размеров, то можно установить 7-ми или 6-битную палитру и воспользоваться диффузией, установив опцию "Dither: Diffusion".

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

Итак, когда палитра подобрана, можно отправлять картинку в формат GIF (File > Export > GIF89a Export) В появившемся окошке "GIF89a Export Options" мы не только увидим, как картинка будет выглядеть после экспорта, но и сможем указать прозрачные области (прозрачными можно сделать сразу несколько цветов). Включенная опция "Interlace" означает, GIF-файл будет сохранен в чересстрочном режиме (на экран по мере поступления информации будет выводится сначала, каждая восьмая, затем каждая четвертая строка и так до полной загрузки). Чересстрочные файлы весят немного больше, чем обычные, поэтому при экспорте, например, картинок-фонов от опции "Interlace" лучше отказаться за ненадобностью. Можно, конечно экспортировать картинку в GIF непосредственно из RGB, но тогда мы не сможем так просто управлять прозрачностью, диффузия может появиться без спросу, а еще в палитру зачем-то будут добавлены черный и белый цвета, совершенно независимо от того, нужны они там или нет.

При сохранении в GIF'e больших изображений, в целях оптимизации их можно разрезать на любое число более мелких фрагментов. Это даст возможность сохранить каждый фрагмент с собственной наиболее оптимальной палитрой: например, некоторым крупным кускам может хватить и двух цветов, а для какого-нибудь особо важного фрагмента можно "раскошелиться" и на все 256. Собрать все воедино на веб-странице не составит особого труда.

Рейтинг@Mail.ru