Существует два типа компьютерной графики: растровая, где каждый пиксел определяется отдельно, и векторная, где для рисования линий используются математические формулы [1].
Другими словами, растровые изображения состоят из пикселей,
а векторные - из контуров [6].
Оба эти типа широко используются в веб мире. Читая эту книгу, вы сможете создавать как растровую, так и векторную графику с помощью PHP.
Растровая графика
Растровая
графика (также известная как цифровые изображения) - это прямоугольная сетка пикселей (цветных точек) на устройстве отображения. Цвет каждого пикселя задается индивидуально (см. Глава 4, Цветовые палитры). [1]
Размер растровых изображений зависит от их разрешающей способности (ширины и высоты) и глубины цвета (см. Глава 4, Цветовые палитры), например, для черно-белого изображения необходим только один бит на пиксель. Пускай белый цвет кодируется битом 1, а черный - битом 0, тогда сетка 8x8 потребует 8 байтов (1 байт равен 8 битам).
Но полноцветным изображениям (16M цветов) требуются 3 байта (24 бита) на пиксел, поэтому их размер может драматически расти. Изображение 640x480 с глубиной цвета 24 бита имеет размер почти 1MB. Старая 3-мегапиксельная цифровая камера делает фотографии 2048x1636, каждой из которых нужно около 10MB. Современные цифровые камеры,
оснащенные 10-мегапиксельной матрицей, нуждаются в 30MB на каждую фотографию. На самом деле, сжатие иображений (см. Глава 6, Форматы изображений) может немного помочь, но проблема остается.
Что случится, если существующее изображение масштабировать с большей разрешающей способностью? Ничего хорошего, лишь потеря качества. Посмотрите на картинку внизу.
Рисунок 2.2. Масштабированное растровое изображение
С другой стороны, растровая графика способна показывать полутона и тени на фотографических изображениях [5].
Примером растровой графики являются изображения, поступающие с цифровой камеры или созданные в растровом редакторе (таком, как Paint, GIMP или Adobe PhotoShop).
Анти-алиасинг
Зубчатый вид масштабированных растровых изображений может быть частично преодолен с помощью использования анти-алиасинга [6]. Анти-алиасинг - это техника минимизации искажающих артефактов, известных как алиасинг
[1].
Векторные изображения всегда выглядят сглаженными (см. «Векторная графика»), поэтому они не нуждаются в анти-алиасинге.
Векторная графика
Векторная графика (также известная как геометрическое моделирование
или объектно-ориентированная графика) использует для представления изображений геометрические примитивы (такие, как точки, прямые, кривые и полигоны), которые все основаны на математических уравнениях. [1]
В отличие от растровой графики, векторные изображения полностью пригодны для масштабирования с более высокой разрещающей способностью с сохранением
оригинального качества. Посмотрите на картинку внизу.
Рисунок 2.4. Масштабированное векторное изображение
Замечание
И оригинальное, и масштабированное векторные изображения были экспортированы в растровый формат для показа на этой странице.
Размер векторных изображений относительно меньше зависит от их разрешающей способности, чем размер растровых изображений.
Существенным недостатком векторной
графики является ее неспособность показывать изображения с полутонами наподобие фотографий или сложные переходы одних цветов в другие. [5].
Векторизация
Векторизация - это процесс трассировки растрового изображения
для его конвертации в векторный формат.
Рисунок 2.5. Пример векторизации
Оригинальное растровое изображение
Векторизированное
изображение
Замечание
Изображение было экспортировано в растровое для показа на этой странице.
Векторизацию с сохранением
достаточного количества деталей имеет смысл использовать для снижения нагрузки на сервер путем уменьшения размеров файлов [1].