|
В настоящее время существует достаточно большое количество различных форматов графических файлов. Тем не менее, все их можно разделить на две группы. Это файлы, хранящие векторную графику и файлы, хранящие растровую графику.
Растровая графика – это когда изображение хранится в виде маленьких точек – пикселей. Соответственно качество такой картинки ограничивается двумя факторами: это собственно размер самой картинки в пикселях, и разрешением изображения – то есть количеством пикселей на единицу длины (наиболее распространено пиксели на дюйм). Файлы, хранящие растровую графику, это 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 группы, подгруппы или товара.
|
