Графика в Web-дизайне

Параметры картинок на сайте могут не соответствовать заявленным в статье.
Содержание
На страницах этой статьи вас ожидают:

В прошлом номере мы говорили о самых общих подходах к дизайну как таковому и к Web-дизайну в частности. Теперь пора понемногу переходить к деталям, разбирая их в теории и на практике. Начнем, пожалуй, с графики. Разумеется, это достаточно обширная тема, поэтому в будущем мы наверняка еще вернемся к ней, чтобы окинуть пристальным взглядом тот или иной ее аспект. А пока начнем, как водится, с начала...
Два слова о двух измерениях

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

Это важно: внешне отличить растровый рисунок от векторного можно только масштабированием. Векторный рисунок при приближении останется «гладким», а растровый — неизбежно распадется на «кирпичи», то есть на увеличенные во много раз одиночные пиксели. Собственно, в этом и состоит одно из главных достоинств векторных изображений.

В настоящей статье мы будем говорить только о растровой графике. Не потому, что она популярнее (тот же Flash, к примеру — яркий пример популярного векторного формата для Web, да еще и с поддержкой анимации), а потому, что векторное представление само по себе — один из способов оптимизации картинки, а дальнейшая его оптимизация очень специфична и нуждается в отдельном рассмотрении.