ОСОБЕННОСТИ ФОРМАТОВ ИЗОБРАЖЕНИЙ, ИСПОЛЬЗУЕМЫХ В ВЕБ-ДИЗАЙНЕ

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

Ключевые слова: веб-дизайн, форматы изображений, растровая графика, векторная графика, изображения для сайтов.

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

Веб-браузеры поддерживают как векторную, так и растровую графику. У каждого вида графики есть свои предназначения, достоинства и недостатки.

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

Растровая графика хранит изображения в виде маленьких точек – пикселей. Соответственно качество такого изображения зависит от двух факторов: его размера в пикселях и разрешения, т.е. количества пикселей на единицу длины. Поэтому при увеличении такое изображение становится размытым и распадается на пиксели, в результате чего может понадобиться сохранить несколько версий растрового изображения в разных разрешениях. Форматами растровой графики для веб-дизайна являются: GIF, JPEG и PNG.

GIF (Graphics Interchange Format) способен хранить сжатые без потери качества изображения с цветовой палитрой до 256 цветов. GIF не подходит для хранения полноцветных изображений и фотографий. GIF поддерживает полную прозрачность – каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается. Главной особенностью GIF является поддержка анимации, т.е. этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой. Формат GIF подходит если: изображение не многоцветное, нужна простейшая прозрачность, нужна анимация .

JPEG (Joint Photographic Experts Group) был разработан для сжатия и хранения полноцветных фотографий. Этот формат поддерживает более 16 миллионов цветов и сжимает изображения с потерей качества. С помощью JPEG можно получать изображения как очень маленького веса, но за счёт ухудшения качества картинки, так и очень качественные, но слишком большие по размеру. Поэтому главная задача при работе с JPEG – подобрать такой уровень качества, чтобы изображение имело приемлемые вес и качество .

PNG (Portable Network Graphics) является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Этот формат имеет две вариации: PNG-8 (может хранить лишь 256 цветов) и PNG-24 (использует более 16 миллионов цветов). Главная особенность формата PNG – поддержка альфа-прозрачности, т.е. каждому пикселю в отдельности можно задать свою степень прозрачности. Формат PNG подходит для: полноцветных изображений с повышенная точностью, изображений с резкими переходами цветов, с прозрачностью и полупрозрачностью .

SVG (Scalable Vector Graphics) – масштабируемая векторная графика. Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. С такими изображениями можно взаимодействовать при помощи CSS. Таким образом, формат SVG подходит если необходимо масштабировать изображение без потерь качества, изменять их цвет или анимировать элементы изображения .