Библиотека Интернет Индустрии I2R.ru

• Предыдущий материал - Основы web-дизайна. Тексты для WWW

К счастью, описать подготовку графики для веб-страниц гораздо легче, чем сформулировать все требования к текстам. Это, конечно, не значит, что сама подготовка будет очень лёгкой: если графики много, основное время уйдёт на оптимизацию, т. е. поиск компромисса между качеством и размеров файлов, и нарезку, или фрагментацию картинок под шаблоны табличной вёрстки.

Форматы файлов

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

Сравните два варианта одной и той же фотографии (первое изображение -- JPEG, второе -- GIF):

Размер первого файла -- 11.1 Кб, второго -- 9.2 Кб. При небольшой разнице в размере первая фотография выглядит значительно лучше.

JPEG принято использовать для:

1. полноцветных фотографий
2. изображений со сложными градиентными переходами;

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

А теперь сравните два скриншота, сохранённые в форматах GIF (слева) и JPEG (справа):

Размер первого файла -- 6.5 Кб, второго -- 11.2 Кб. О разнице в качестве, думаю, нет смысла даже упоминать.

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

1. изображений с малым количеством цветов;
2. скриншотов, схем, графиков, примитивов;
3. анимированных изображений;
4. изображений с областями прозрачности.

GIF -- единственный графический формат, позволяющий работать с прозрачностью и анимацией.

Если вы пользуетесь Adobe Photoshop, наилучшей технологией сохранения графики для веб-страниц будет диалог File | Save for Web. Используя его, вы сможете не только выбрать графический формат, количество цветов для GIF и степень компрессии для JPEG, но и увидеть, как будет выглядеть изображение после сохранения. Ещё одним -- и очень важным -- преимуществом этого способа является то, что вы сможете сохранять изображения без предварительного слияния всех слоёв, чего требует, например, диалог Save As.

top

Нарезка

Состряпаем небольшой коллаж (предполагается, что psd-файл построен грамотно, т. е. каждый объект находится в отдельном слое). Размер картинки, сохранённой в формате JPEG, составляет 18.3 Кб, что уже, в принципе, не очень много. Но попробуем сэкономить ещё чуть-чуть (исходный коллаж в формате Adobe Photoshop 6 можно скачать по ссылке в конце раздела).

Запустим Adobe Photoshop и разметим коллаж так, как это показано на следующем рисунке:

Теперь проделаем следующие процедуры:

1. сделаем невидимыми все слои, кроме тех, на которых находятся часть круга, занимающая задний план, и белая «вуаль»;
2. сохраним всё изображение как JPEG-файл с компрессией 50%: размер файла составит 3.61 Кб;
3. сохраним подпись (области 8–9) отдельным файлом формата GIF с 16-ю цветами, размер -- 1.03 Кб;
4. сохраним главного героя (область 2) отдельным файлом формата GIF с 32-мя цветами, размер -- 7.02 Кб;

Обратите внимание, общий «вес» графики теперь уже 11.7 Кб вместо первоначальных 18.3. Теперь займёмся объединением.

1. Создадим таблицу размером 388х364. В качестве фона вставим первую картинку.
2. Создадим внутри первой таблицы таблицу того же размера с 9-ю ячейками согласно схеме разметки предыдущего рисунка. Укажем для неё background="", как это описано в уроке Основы web-дизайна. Таблицы. Табличная вёрстка.. Объединим ячейки 8 и 9. Тщательно проставим размеры каждой из 8 ячеек.
3. Вставим картинки №№ 2 и 3 в ячейки 8 (объединённую с 9-й) и 2 соответственно.
4. Любуемся результатом:

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

Итак, мы сэкономили 38%: для медленных линий это может оказаться не так уж плохо. Для более сложных композиций и результат будет значительнее.

top

Практические советы

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

1. Фотографии и изображения со сложными градиентными переходами сохраняют в формате JPEG.
2. Картинки с небольшим количеством цветов, скриншоты, схемы, графики, картинки с текстом и т. п. сохраняют в формате GIF.
3. Анимированные картинки и картинки с прозрачными областями можно получить только с использованием формата GIF.
4. Если у вас есть коллаж, содержащий одновременно примитивы и фотореалистичные изображения, его можно разрезать на несколько частей и сохранить их в разных форматах для уменьшения общего «веса» графики.
5. Если изображение содержит достаточно большие участки, залитые одним цветом, при нарезке их можно исключить, заменив пустыми ячейками таблицы с соответствующим фоном.

До встречи на следующем уроке!

top

• Предыдущий материал - Основы web-дизайна. Тексты для WWW