Растровая графика и изображения на сайте

Растровая графика в веб-дизайне применяется повсеместно: в качестве элементов вёрстки, иконок, иллюстраций в коненте и т. д.

Что такое растровая графика?

Растровые изображения представляют сетку из прямоугольных точек, называемых пикселями. Такие изображения невозможно увеличивать без потери качества: картинка «размывается» в зависимости от степени увеличения. Растровые изображения применяются на веб-сайтах повсеместно: в качестве фона, иконок, картинок для контента, логотипов, даже в качестве ссылок для пунктов меню.

Пиксельная сетка (масштаб 1:8)
Пиксельная сетка (масштаб 1:8)

Особенности растровых изображений

Качество растрового изображения зависит от следующих характеристик:

  • степени сжатия изображения (зависит от формата файла),
  • глубины цвета изображения (максимального количества цветов),
  • размера изображения (общего количества пикселей).

Преимущества растровой графики

  • Детализация любой сложности

    Детально отображать сложные изображения с большим количеством цветовых переходов может только растровая графика.

  • Многообразие вариантов оптимизации

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

  • Разнообразие форматов

    В веб-дизайне используются стандартные форматы JPG, PNG, GIF.

Недостатки растровой графики

  • Зависимость качества детализации от его размера

    Чем больше пикселей в исходном изображении, тем выше качество его детализации. Увеличить размер изображения (количество пикселей) без потерь в качестве невозможно.

  • Зависимость размера файла от размера изображения

    Чем больше пикселей в изображении, тем больше «весит» файл.