HTML :: Форматы графических файлов

• Растровые изображения
• Векторные изображения
• Форматы изображений, используемые в веб-документах

В настоящее время графические файлы делятся на два основных типа: растровый и векторный. Оба типа имеют свои недостатки и преимущества, а, соответственно, и свою область применения.

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

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

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

Растровые изображения широко используются для получения изображений высокого качества при сканировании, в фотоаппаратах и видеокамерах для хранения фотографий, в веб-дизайне. Обычно такие файлы сохраняют с расширениями .png, .gif, .jpg, .jpeg, .bmp, .ico, .tiff.

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

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

На страницах сайтов в основном используются растровые изображения трех форматов, которые имеют расширения .gif, .jpeg и .png. Рассмотрим их немного подробнее.

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

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

PNG (от англ. portable network graphics – переносимая сетевая графика) также, как и формат JPEG, позволяет хранить фотографии и высококачественные рисунки, т.к. применяется 24-битное кодирование цвета, но при этом сжатие изображения происходит без потерь качества. Так что формат можно применять еще и для хранения изображений с четкими краями и линиями, т.е. чертежей и текстовых изображений. В дополнение к этому формат поддерживает многоуровневую прозрачность (наподобие формата GIF), что позволяет создавать градиенты на изображениях. Однако, в отличие от него, в PNG отсутствует поддержка нескольких изображений в одном файле, а следовательно и анимации. Объем файла изображения, сохраненного в формате PNG, получается выше, чем при использовании форматов GIF и JPEG, но с учетом современных размеров носителей информации и скоростей интернета – это не является проблемой, так что формат быстро получил широкое распространение и стал применяться для хранения фотографий и высококачественных рисунков, содержащих прозрачные и полупрозрачные участки, а также элементы с четкими границами.

• Тег <script>
• Форматы графических файлов
• Вставка изображений в html-документ
• Вернуться к оглавлению учебника