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

    Стандарты 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

    Средняя зарплата в IT

    110 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 8 385 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 38

    • НЛО прилетело и опубликовало эту надпись здесь
        +5
        не может быть! он ведь «полностью поддерживает веб-стандарты»!
          –1
          Операфаг, такой операфаг
            –1
            чувак с двача — такой чувак с двача
              0
              Вот мне сейчас стыдно, я поддержал твой флуд.
          0
          Спасибо за поправку, убрал из списка.
          В ранних заявлениях они рассматривали возможность поддержки svg. Видимо они имели в виду поддержку сторонней примочкой от Adobe.
          +1
          Поправка, линейка IE не поддерживает SVG.
            +4
            Пользуясь случаем хочу пропиарить два блога:
            habrahabr.ru/blogs/ogg/
            habrahabr.ru/blogs/svg/
              0
              добавил
              0
              Хорошая онлайн-утилитка, превращающая архив с png в apng анимацию:
              animatedpng.com/index.php/assembler/
                +3
                Хороший обзор, спасибо.

                Насчёт SVG — я не согласен с тем, что это аналог Flash в виде XML. Flash изначально был придуман для анимации, cо временной шкалой, раскадровкой и всеми делами. В SVG же анимацию можно сделать только через скрипты, насколько я знаю.
                Но в целом и по возможностям — да, SVG и Flash похожи. Я бы даже сказал, что SVG больше похож на Flex.

                И очень полезная особенность SVG — в него умеют сохранять все векторные редакторы (ну или большинство). Но в то же время можно и «с нуля» написать, в блокноте, в виде XML.
                  0
                  Да, внутренний формат несколько различается, у флеша вся структура классов завязана на таймлан.
                  Я имел в виду скорее функциональное сходство с ранними версиями flash, для svg не стоит задача стать полностью интерактивным элементом с интерфейсами, работой с б.д., внешними источниками xml данных и т.д.
                    +1
                    я бы на вашем деле не делал таких заявлений насчёт анимации в svg
                    http://gr1b0k.googlepages.com/wow.svgz
                  0
                  уже давно приглянулся на SVG, радует библиотека Raphael
                    0
                    Она при возможности использует SVG, а в майкро$офтовском софте — VML (Vector Markup Language, я так понял, это майкро$офт свои стандарты векторной графики проталкивает..)
                      0
                      VML не есть лютое зло, собственно вся работа с вектором в SVG базируется на языке VML.
                    0
                    > В большинстве современных браузеров она будет анимированной и с прозрачной подложкой.

                    А огнелис 3.0.6 — это не современный браузер?
                      0
                      Современной, с третьей версии должен показывать анимированную.
                      0
                      В Chrome статичная
                        0
                        Согласен.
                        В ИЕ8 и в Хроме 2.0.172.33 — статика.
                        +2
                        магабайтная картинка без ката, офигеть!
                          0
                          Это много?!
                          Интернет забит анимированными гифками гораздо большего размера.
                            0
                            это дохуя, особенно на ресурсе, который вроде как не называется 4gifs.com
                            +1
                            картинка переехала под кат
                            0
                            Вот так вот и движется IT индустрия семимильными шагами, утром пишешь статью, к обеду она уже устаревает:

                            www.3dnews.ru/software-news/html_5_teryaet_open_source_videokodek/

                            — Ogg Theora более не является частью спецификаций HTML 5 в качестве видеокодека. Йэн Хиксон (Ian Hickson), участник группы, работающей над технологиями гипертекста (Web Hypertext Application Technology (WHAT) Working Group) сообщил, что с неохотой расстался с открытым стандартом вследствие протеста Apple; кроме того, конкурирующий кодек H.264 может постичь аналогичная участь.

                            Одна из ключевых особенностей HTML 5 — это встроенная поддержка мультимедиа, реализуемая тэгами и, что позволяет веб-разработчикам не обращать внимание на коммерческие продукты вроде Adobе Flash или Microsoft Silverlight. Однако, по словам Хиксона, он вынужден был исключить две субсекции из спецификаций нового стандарта, которые требовали наличия кодеков, оставив вопрос без явного определения, как это было с поддержкой форматов изображений, API-плагинов или шрифтов.

                            Apple не пожелала видеть Ogg Theora частью Quicktime, ссылаясь на «недостаточную поддержку оборудованием и неясное патентное поле». Google же включила оба кодека в браузер Chrome, но не может предоставить лицензию на H.264 сторонним разработчикам Chromium — Linux-версии Chrome. Также компания выразила сомнение в соответствии обеспечиваемого Ogg Theora соотношения качества к единице времени требованиям видеосервиса YouTube.

                            Opera и Mozilla, вторая из которых внедрила поддержку Ogg Theora в недавно выпущенный браузер Firefox 3.5, не собираются связываться с кодеком H.264, учитывая патентные и лицензионные особенности; Microsoft же совсем отказалась комментировать свое отношение к новациям HTML 5.

                            Хиксон ожидает два сценария развития ситуации: либо Apple пересмотрит свое отношение к патентным вопросам и Ogg Theora станет стандартом де-факто для интернета; либо же истекут патентные сроки для кодека H.264, стандарт будет доступен для свободного использования и, значит, станет общепризнанным.
                            — Apple, как и предполагалось, поднасрали.
                            В принципе второй исход с H.264 в качестве стандарта мне кажется более предпочтительным.
                              +1
                              W3C заявили, что не могут придти к соглашению об использовании открытого стандарта кодирования видео данных и в дальнейшем этот вопрос не будут лоббировать.
                              А вообще, не смотря на радость вызываемую SVG форматом, предназначение его исходно было далеко не WEB. Как и любой XML-based язык разметки, главной целью он преследует переносимость. Изначально индустрии нужен был стандартизованный формат для переноса между системами. Приложение в Web это придаток. От этого и все проблемы. XML не самый простой формат, для написания эффекстивных парсеров, а SVG и подавно.
                                0
                                ага swf — это просто рай
                                  0
                                  SWF — работает. То, что он закрыт — не значит, что он не справляется с задачей. Хотя меня он радует меньше, чем открытые инициативы.
                                    0
                                    svg тоже работает
                                  0
                                  Ну по требованиям он полностью совпадает с необходимой для web-формата переносимостью и универсальностью.
                                  SVG основан на VML, VML в свою очередь разрабатывался Microsoft и Macromedia в качестве веб-стандарта выдвинутого для оборения W3C.
                                  По-моему это свидетельствует об ориентированности на web :)
                                  0
                                  Лет 10 назад была такая технология — VRML — язык разметки виртуальных сред. Позволяла на страницах отображать интерактивные 3D объкты и даже 3D-пространства. Например, виртуальные чат-комнаты на ней делали, с возможностью перемещения. Некоторые говорили, что скоро весь Интернет станет 3D :)
                                    0
                                    Ага, тоже вспомнил его, пока писал.

                                    Проблема, как мне кажется, в том что во времена его разработки довлел некий футуристический вектор, сформированный чуть ли не фильмами типа tron и lawnmover man и романами Гибсона.
                                    Подразумевалось, что web просто обязан обрести третье измерение, что это само собой разумеющееся.

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

                                    Осталось одно единственное но — это все эффектно, но неудобно и абсолютно не нужно, как и, например, трехмерные десктопы. И они и шлемы VR и трехмерный web все это осталось экзотикой развлекательного характера. Есть специализированные социальные среды навроде second life, где эта мечта воплощена в жизнь, оказалось большего не нужно.

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

                                    3D тоже используется по делу, например в cooliris найден действительно удачный формат подачи информации, кое-где живут трехмерные облака тегов, не более.
                                      0
                                      С термином «возврат к здоровому минимализму» полностью согласен :)

                                      К сожалению, читая ваш ваш рассказ про APNG (сам расскази интересный, спасибо:)), пришел к выводу, что этот формат идее минимализма немного противоречит.

                                      Зачем все эти анимированные навороты? Есть просто JPEG, просто GIF, просто Flash — проверенные и хорошо отлаженные технологии. Они позволяют сделать все что нужно для основной цели создания web-страниц — доведения до человека информации. Остальное все (графическое оформление, реклама) — вторично, а значит, долго просуществуют самый простые технологии, позволяющие затратить минимум усилий и получить результат наиболее просто. Думаю, в том числе и поэтому новые форматы приживаются слабо. Разве что Flash вводит что-то новое, потому что проигрыватель автоматически обновляется :)
                                        0
                                        Gif это палитрованные 256 цветов с однобитным альфа каналом и крайне узколобым алгоритмом сжатия. Этого было достаточно 20 лет назад, сейчас мало.

                                        Png всем хорош — 64 бита на пиксель это исчерпывающе много, сжатие получше, но он не поддерживает анимацию, а анимация нужна, так как ей пользуются (это самый простой и важный критерий), например для размещения микровидеофрагментов, которые сейчас заполонили интернет.
                                        Apng крайне прост в технической реализации его поддержки, для этого действительно надо изменить совсем немного в коде приложения, которое уже умеет работать с png и gif.

                                        Реклама со всем весь рынком ее производства и размещения давно и надежно живет в формате flash и вряд ли будет его менять в ближайшее время.

                                        Flash очень неудобен для того, чтобы просто выложить векторную картинку. Тут в силу вступает svg, на зря он так популярен в wikipedia.

                                        В любом случае идее здорового минимализма противоречит установке чего-либо кроме браузера для просмотра информации, собственно стандартизация новых форматов позволит избежать этого. Ведь сейчас никому в голову не придет устанавливать что-то дополнительное для браузера чтобы просмотреть jpeg (когда-то NCSA Mosaic его не поддерживал :)).
                                    0
                                    Спасибо тебе, друг, за статью и мегабайтную шевелящуюся картинку.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое