Современные графические и мультимедиа форматы для Web

Lumber room
Стандарты web-а меняются, во всю используется потоковое видео и аудио, расширяются возможности браузеров, в том числе и поддерживаемых ими графических и мультимедиа форматов, грядет html5.



Под катом я хочу рассказать про открытые форматы призванные в ближайшем будущем заменить привычные нам gif, jpg, png, swf и flv.



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

Существует два перспективных ответвления PNG формата:

MNG

www.libmng.com

Плюсы (при полной поддержке):
  • Может содержать объекты в формате jpeg или png, с альфа-каналом для каждого из них.
  • Внутренний скриптинг и работа со слоями (объектами).
  • Сжатие с учетом разностных кадров по аналогии с gif.
  • Хороший контроль над ошибками.
  • Много дополнительных опций таких как гамма-коррекция, включение текстовая информация и произвольных объектов.

Минусы:
  • Сложность формата (существует две спецификации, упрощенная и полная).
  • Как следствие, большинство браузеров поддерживают его посредством расширений.

Без дополнительных плагинов этот формат поддерживают mMosaic, Konqueror, с некоторыми глюками старые версии движка Mozilla до 1.4 и браузеры на телефонах Sony-ericsson, почти все остальные браузеры имеют соответствующие расширения, сделанные энтузиастами. Internet Explorer поддерживает его посредством стороннего active-x.

APNG

wiki.mozilla.org/APNG_Specification

Плюсы:
  • Может содержать кадры формата png с альфа-каналом и тайминг кадров.
  • Надстройка над png с обратной совместимостью, любой браузер с поддержкой png отобразит первый кадр без проблем.
  • Сжатие с учетом разностных кадров по аналогии с gif.
  • Очень простой формат.
  • Поддержка такими браузерами как Firefox 3.0 и Opera 9.5.

Минусы:
  • достаточно простой контроль над ошибками (crc для отдельных кадров и количество кадров в заголовке).

Нативно этот формат поддерживают Mozilla firefox 3.0 и выше, Opera 9.5, остальные браузеры с помощью плагинов.

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

SVG

www.w3.org/TR/SVG12
en.wikipedia.org/wiki/Scalable_Vector_Graphics

SVG — это уже сложившийся, одобренный W3C и наиболее преспективный открытый стандарт для представления векторной (и не только посредством em)графики. Я бы охарактеризовал его как упрощенный swf, представленный в xml виде.

Основные плюсы:
  • Легко редактируемый и наглядный формат на основе xml с богатыми возможностями описания векторной графики на основе открытого стандарта VML (Vector markup language).
  • Объекты управляются Javascript или нативным скриптовым языком SMIL.
  • Включенность в DOM, то есть в объектную структуру HTML документа, соответственно возможность модификаци изображения посредством CSS или Javascript.
  • Возможность включения PNG, GIF и JPG.

Минусы:
  • Сложность формата, фактически большинство браузеров с поддержкой SVG поддерживают только упрощенные SVG-Tiny спецификации.
  • Большой нативный размер, но эту проблему решает формат-обертка SVGZ, который является SVG сжатым gzip.

Без дополнительных плагинов этот формат версии 1.1 или (DVG-tiny) поддерживают Firefox 2 и выше, Opera и google Chrome. Более подробно по поддержке этого формата различными браузерами писать придется не меньше, чем о поддержке, например, css3, полная поддержка еще стандарта 1.2 с пока еще предварительными спецификациями нигде не реализована. Так же имеется мобильное ответвление этого формата.

Еще раз подчеркну, что в перспективе это не просто формат векторной графики аналогичный аналогичный flash, а некое продолжение html формата для представления графической информации.

С одной стороны понятно, что SVG включает в себя функциональность APNG и MNG, с другой — только в перспективе, так как пока не существует нативной поддержки браузерами внутреннего и внешнего скриптинга SVG. К тому же я не вижу препятствий к тому, чтобы такой же простой как и GIF в поддержке и редактировании формат APNG не прижился.

У нас остается еще одна большая не занятая ниша — открытый и простой в использовании формат хранения видео. Не просто набор кадров сжимаемых по отдельности с учетом разностных кадров (что совершенно бесполезно в случае со сжатием обычного видео). Видео в формате svg, mng и apng будет занимать огромный объем относительно видео пожатых современными видеокодеками.

На данный момент мультимедиа-контент (потоковые аудио и видео) представляет собой включаемые объекты Flash, Flash video, Windows Media и QuickTime и т.д., все они основаны на закрытых стандартах и требуют сторонних плагинов для воспроизведения.

Я не зря в начале упомянул html 5, в котром предусмотрен стандартизированный интерфейс в виде ‹audio› и ‹video› элементов.

В качестве нового независимого стандарта для представления медиаданных W3C предлагает нам:

Ogg контейнер

www.xiph.org/ogg

Контейнер Ogg может включать в себя медиаконтент сжатый различными открытыми и закрытыми кодеками, метаданные и текстовые данные.
В качестве стандарта предполагается нативная поддержка браузерами открытых кодектов Theora для видео, Vorbis (с потерями) и Flac (без потерь) для аудио и возможно Speex, как кодек для человеческой речи.

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

Не буду детально рассматривать плюсы и минусы видеокодека Theora, скажу только, что по скорости программного кодирования и декодирования, а так же по соотношению качество/размер он вполне конкурентносопосбен. Аппаратная поддержка кодирования/декодирования пока отсутствует ввиду свежести формата (первый публичный релиз произошел менее года назад), к сожалению, это критично в плане использования кодека Theora большими видеосервисами как Youtube, Vimeo и подобные, а так же использования для онлайн вещания.

В идеале любой популярный браузер встретив тег:
‹video src=lookatthis.[любой видеоформат] width=400 height=300›
должен создать на странице видео-контейнер управляемый через DOM не требуя при этом установки кодеков или плагинов в случае контейнера Ogg содержащего видео сжатое Theora и звук сжатый Vorbis.

На данный момент в том или ином виде поддержка этого решения существует в Opera (Video build), Firefox 3.5 и Google chrome 3.0.182.2. К сожалению, разработчики Webkit (Safari) пошли по своему пути и считают первичной поддержку закрытого кодека mpeg-4 (H.264).

Возможно, что в ближайшем будущем web-мастера смогут вставлять мультимедиа-контент в страницы так же просто, как изображения в формате jpg, а браузеры не будут предлагать нам устанавливать различные плагины для того чтобы просмотреть страницу. Добавится возможность простого сохранения и размещения на сайтах потокового видео без привлечения сторонних сервисов. А любой графический контент, как векторный, так и растровый, будет существовать в компактных, открытых и понятных для большинства браузеров форматах, какими в свое время стали jpeg и gif.

P.S. На Хабрахабре существует два блога, посвященных Ogg и Svg:
habrahabr.ru/blogs/ogg
habrahabr.ru/blogs/svg
Tags:графические форматыpngapngmngoggvorbissvgвидеоформатhtml5
Hubs: Lumber room
+30
493 8
Comments 38

Popular right now

Frontend разработчик
from 100,000 to 150,000 ₽DIORAMARemote job
Front-end разработчик
from 75,000 ₽1С-РарусСевастопольRemote job
HTML5 Developer (gamedev)
from 1,200 to 1,600 €MAINAMA GAMESRemote job
Front-end разработчик в продукт (React)
from 150,000 to 200,000 ₽ScadaRemote job

Top of the last 24 hours