Какие графические форматы используются в web-дизайне?

Растровая графика — это когда изображение хранится в виде маленьких точек — пикселей. Соответственно качество такой картинки ограничивается двумя факторами: это собственно размер самой картинки в пикселях, и разрешением изображения — то есть количеством пикселей на единицу длины (наиболее распространено пиксели на дюйм). Файлы, хранящие растровую графику, это jpg, gif, bmp, tiff, png, psd и прочие.

Векторная графика — это когда изображение хранится в виде массива чисел, описывающих построение изображения в виде кривых и ключевых точек-вершин. Форматы векторной графики — swf, cdr, max, ai, частично pdf.

В практике web графики в основном используются два формата растровой графики — jpeg и gif, и один формат векторной графики — swf. Гораздо реже используется формат png.

Форматы jpeg и gif различаются различными алгоритмами сжатия изображения. Так как в web размер файла до сих пор играет весьма существенное значение в силу ряда причин, следовательно, малый вес графического файла существенно повышает скорость загрузки изображения. Для разных «видов» картинок подходит тот или иной формат графики.

Определение необходимого формата — основное умение web-дизайнера. Для фотографий, портретов, картинок большого размера, насыщенных сложными деталями — лучше всего подходит формат jpeg.
Алгоритм сжатия этого формата работает таким образом, что при уменьшении «веса» картинки, а следовательно качества, изображение как бы «размывается», становятся плохо различимы четкие переходы между цветами, и появляются паразитные цветные пиксели как побочный эффект действия алгоритма. Степень компрессии файла определяется каждый раз дизайнером исходя из его нужд, но оптимальным соотношением размер/качество изображения считается процент сжатия, равный 65.

Формат gif наилучшим образом подходит для изображений небольшого размера, там где необходима прозрачность (альфа-канал), и для анимированной растровой графики.
Алгоритм сжатия этого формата основывается на том, что изображению задается фиксированная цветовая палитра (от 2 до 256 цветов), а все близкие оттенки выкидываются либо заменяются соседними цветами. Также алгоритм просчитывает изображение линиями — слева направо, и хранит информацию не о каждом пикселе в отдельности, а считает, сколько пикселей одинакового цвета стоят в ряд, и сохраняет информацию только о цвете и количестве пикселей. Это существенно снижает вес файла. Нетрудно заметить, что вертикальный градиент (сверху-вниз) будет весить в таком случае намного меньше градиента горизонтального (слева-направо). Это следует учитывать при создании изображений, особенно при создании анимированных баннеров, где вес складывается еще и из количества кадров и идет буквально война за каждый байт.

Формат png используется крайне редко. Его отличие от формата gif в том, что png позволяет хранить больше информации о файле. В частности, информацию об альфа-канале. В формате gif каждый отдельный пиксель может быть либо полностью прозрачным, либо полностью непрозрачным. Это накладывает ограничения на использование прозрачных переходов в прозрачность, из-за чего файлы gif с прозрачностью зачастую выглядят «рваными» по краям. Но, в связи с большим весом png файлов, их практически не используют, а применяют различные визуальные хитрости в формате gif, в частности добавление «переходных» пикселей по краям изображения.

При именовании файлов следует придерживаться простых правил. Во-первых, следует избегать как бессмысленных, так и «говорящих» названий. Название файла должно сразу определять его место в структуре веб-страницы. То есть, если это картинка к статье, то она должна располагаться в папке articles и ее названием служит id статьи. Если это позиция в каталоге, то в соответствующей папке (items, groups) картинка должна иметь названием ID группы, подгруппы или товара.

В то же время, если, к примеру, на сайте очень редко пишутся статьи, можно не вводить дополнительные папки, но тогда файл должен по названию однозначно ассоциироваться с данным разделом. Это можно сделать к примеру добавлением слова news или art перед id картинки (к примеру news-34.jpeg). Если к одному id относится несколько картинок разного размера — необходимо добавлять после id картинки расширение, обозначающее размер (для больших картинок — b, для маленьких — s) (пример 38-s.gif, art-08-b.jpeg). Для нескольких картинок одного размера, можно ввести порядковые номера (пример: art08-b₀₁.gif).

При именовании картинок, формирующих оформление сайта, следует придерживаться следующих обозначений: top — для шапки сайта, bottom — для подвала сайта, but — для различного рода кнопок, ico — для иконок, img или pic — для прочих картинок оформления с добавлением порядкового номера в конце.

Основными программами для работы с изображениями у дизайнера служат Adobe Photoshop и Adobe ImageReady для растровой графики; Corel draw и Macromedia Flash для векторной. Также используется порой для векторной графики программа Adobe illustrator — но это уже дело вкуса дизайнера, ибо программы по своей сути идентичны, и обладают схожим функционалом. Все продукты фирмы Adobe (а к ним в последнее время относится и Flash), обладают похожим инструментарием и горячими клавишами, что упрощает работу в разных программах при переходе от одной к другой.

Формат flash — один из самых «модных» и популярных в вебе. Этому служат несколько его особенностей. Во-первых, за счет того, что это векторный формат, возможно создание относительно сложных и красочных изображений при достаточно малом весе файла. Во-вторых, за счет использования встроенного скриптового языка Action Script во flash есть возможность создавать интерактивные баннеры, приложения, писать различные сценарии, создавать онлайн системы расчета, игры, отдельные приложения и т. п.