Графические форматы в интернет-дизайне

Графику смело можно назвать одной из ведущих составляющих любой веб-страницы или портала. Именно она играет роль той «одёжки» по которой пользователи встречают интернет-сайт и которая определяет лицо этого сайта. Однако кроме художественной и визуальной составляющих веб-графика имеет и техническую. Именно о ней и пойдёт речь в этом обзоре.

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

Векторная графика занимает намного меньше в памяти – указать центр и радиус окружности намного проще, чем описать ту же окружность в виде мозаики из нескольких тысяч пикселей. Также векторная графика не теряет своих параметров при масштабировании, поскольку изображение создаётся на основе своего математического описания каждый раз, когда это требуется.

Однако векторная трактовка сложных изображений представляет собой непростую задачу – не так легко описать портретное фото через набор простых геометрических фигур. В силу этого векторная графика традиционно используется преимущественно в области относительно простой геометрии – шрифты, рекламная графика и дизайн. Также её развитие в веб-дизайне исторически сдерживалось длительным отсутствием универсального векторного формата файлов.

На данный момент векторных форматов в веб-графике применяется два – SWF (флэш) и SVG (Scalable Vector Graphics). В целом же для нужд веб-дизайна используется почти исключительно растровая графика.

Как уже отмечалось, растровая графика построена по схеме мозаики цветных точек. Преимущество данного подхода заключается в том, что так можно описать сколь угодно сложное и многоцветное изображение. Причём сам механизм описания в основе своей предельно прост – это массив значений, описывающих параметры отдельных пикселей. Именно так устроен базовый графический формат BMP. Однако это же и определяет недостатки метода.

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

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

Собственно основное различие графических форматов, применяемых в веб-графике, заключено именно в подходе к решению этой проблемы.

Формат GIF решает её за счёт уменьшения количества информации описывающей один пиксель. Достигается это тем, что изображение не может поддерживать больше 256 цветов одновременно. Чтобы избежать проблем с цветопередачей используется внутренняя палитра – то есть то, сколько точно и какие конкретно цвета и оттенки будут использованы для каждого изображения, определяется индивидуально. Это делает данный формат хорошо подходящим для отображения простой рекламной графики, но малопригодным для фотографий и подобных им изображений требующих мягких полутонов и плавных переходов цвета.

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

Попытку совместить оба подхода использует формат PNG допускающий использование как ограниченной палитры, так и некоторых алгоритмов сжатия. Хотя всё же по своим возможностям он ближе к GIF.

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