Форматы графических изображений html

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

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

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

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

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

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

Векторные изображения

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

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

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

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

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

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

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

Быстрый переход к другим страницам

html.okpython.net Copyright © 2016-2023.

Источник

Форматы изображений для веба

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.

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

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.

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

Таким образом, формат GIF подходит если:

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Итак, формат PNG подходит для:

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

WebP

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

• сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
• сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
• поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур).

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

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

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок, например, таких:

Таким образом, формат SVG подходит если:

• нужно анимировать части изображения;
• изменять цвет элементов изображения;
• необходимо масштабировать изображение без потерь.

Форматы в зависимости от цели использования

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник