Modern graphic and multimedia formats for the Web
Standards of the web are changing, streaming video and audio are used throughout, browser capabilities are expanded, including graphic and multimedia formats supported by them, html5 is coming.
Under the cut, I want to tell you about open formats designed to replace the usual gif, jpg, png, swf, and flv in the near future.
')
The above picture has the format APNG, in most modern browsers it will be animated and with a transparent substrate.
There are two promising branches of PNG format:
www.libmng.com
Pros (with full support):
Minuses:
Without additional plug-ins, this format is supported by mMosaic, Konqueror, with some glitches the old versions of the Mozilla engine up to 1.4 and browsers on Sony-ericsson phones, almost all other browsers have corresponding extensions made by enthusiasts. Internet Explorer supports it through third-party active-x.
wiki.mozilla.org/APNG_Specification
Pros:
Minuses:
Natively, this format is supported by Mozilla firefox 3.0 and higher, Opera 9.5, other browsers using plug-ins.
Let us turn to the most promising, in my opinion, format for storing graphic data.
www.w3.org/TR/SVG12
en.wikipedia.org/wiki/Scalable_Vector_Graphics
SVG is the already established, approved by the W3C and the most promising open standard for representing vector (and not only by em) graphics. I would describe it as a simplified swf, presented in xml form.
Main advantages:
Minuses:
Without additional plug-ins, this format version 1.1 or (DVG-tiny) supports Firefox 2 and higher, Opera and google Chrome. In more detail on the support of this format by various browsers will have to write no less than about support, for example, css3, full support for the standard 1.2 with the preliminary specifications is not implemented anywhere. There is also a mobile branch of this format.
Once again, in perspective, this is not just a vector graphics format similar to that of flash, but a kind of continuation of the html format for representing graphic information.
On the one hand, it is clear that SVG includes the functionality of APNG and MNG, on the other - only in perspective, as there is not yet native browser support for internal and external SVG scripting. In addition, I see no obstacles to ensuring that the APNG format is not as simple as the GIF in supporting and editing.
We still have another big empty niche - an open and easy-to-use video storage format. Not just a set of frames compressed separately, taking into account differential frames (which is completely useless in the case of normal video compression). Video in svg, mng and apng format will occupy a huge amount of video compressed by modern video codecs.
At the moment, multimedia content (streaming audio and video) is the included objects of Flash, Flash video, Windows Media and QuickTime, etc., all of which are based on closed standards and require third-party plug-ins for playback.
It is not for nothing that I mentioned html 5 at the beginning; a standardized interface in the form of ‹audio and‹ video elements is provided.
As a new independent standard for representing media data, the W3C offers us:
www.xiph.org/ogg
The Ogg container can include media content compressed with various open and closed codecs, metadata, and text data.
As a standard, native browsers are supposed to support Theora's open video codecs, Vorbis (lossy) and Flac (lossless) for audio, and possibly Speex, as a codec for human speech.
The main problem with this open solution is the lack of broad support for the Ogg metadata format, for example, video players simply unpack it and look at the metadata of the constituent elements.
I will not consider in detail the pros and cons of Theora video codec, I can only say that it is quite competitive in terms of the speed of software coding and decoding, as well as the quality / size ratio. Hardware support for encoding / decoding is not yet available due to the freshness of the format (the first public release occurred less than a year ago), unfortunately, this is critical in terms of using Theora codec with large video services like Youtube, Vimeo and the like, as well as uses for online broadcasting.
Ideally, any popular browser encounters the tag:
‹Video src = lookatthis. [Any video format] width = 400 height = 300›
must create a video container on the page that is managed through the DOM without requiring installation of codecs or plug-ins in the case of the Ogg container containing the compressed Theora video and the sound is compressed by Vorbis.
Currently, in one form or another, support for this solution exists in Opera (Video build), Firefox 3.5 and Google chrome 3.0.182.2. Unfortunately, the developers of Webkit (Safari) have gone their own way and consider the primary support for the closed codec mpeg-4 (H.264).
It is possible that in the near future webmasters will be able to insert multimedia content into pages as easy as jpg images, and browsers will not offer us to install various plugins to view the page. Add the ability to simply save and place on streaming video sites without the involvement of third-party services. And any graphic content, both vector and raster, will exist in a compact, open and understandable format for most browsers, which jpeg and gif once became.
PS On Habrahabr there are two blogs dedicated to Ogg and Svg:
habrahabr.ru/blogs/ogg
habrahabr.ru/blogs/svg
Under the cut, I want to tell you about open formats designed to replace the usual gif, jpg, png, swf, and flv in the near future.
')
The above picture has the format APNG, in most modern browsers it will be animated and with a transparent substrate.
There are two promising branches of PNG format:
MNG
www.libmng.com
Pros (with full support):
- It may contain objects in jpeg or png format, with an alpha channel for each of them.
- Internal scripting and work with layers (objects).
- Compression taking into account differential frames by analogy with gif.
- Good bug control.
- Many additional options such as gamma correction, the inclusion of textual information and arbitrary objects.
Minuses:
- The complexity of the format (there are two specifications, simplified and complete).
- As a result, most browsers support it through extensions.
Without additional plug-ins, this format is supported by mMosaic, Konqueror, with some glitches the old versions of the Mozilla engine up to 1.4 and browsers on Sony-ericsson phones, almost all other browsers have corresponding extensions made by enthusiasts. Internet Explorer supports it through third-party active-x.
APNG
wiki.mozilla.org/APNG_Specification
Pros:
- It may contain frames of png format with alpha channel and frame timing.
- Add-on png with backward compatibility, any browser with png support will display the first frame without problems.
- Compression taking into account differential frames by analogy with gif.
- Very simple format.
- Support for browsers such as Firefox 3.0 and Opera 9.5.
Minuses:
- fairly simple error control (crc for individual frames and the number of frames in the header).
Natively, this format is supported by Mozilla firefox 3.0 and higher, Opera 9.5, other browsers using plug-ins.
Let us turn to the most promising, in my opinion, format for storing graphic data.
Svg
www.w3.org/TR/SVG12
en.wikipedia.org/wiki/Scalable_Vector_Graphics
SVG is the already established, approved by the W3C and the most promising open standard for representing vector (and not only by em) graphics. I would describe it as a simplified swf, presented in xml form.
Main advantages:
- Easily editable and visual xml-based format with rich capabilities for describing vector graphics based on the open standard VML (Vector markup language).
- Objects are managed by Javascript or the native script language SMIL.
- Inclusion in the DOM, that is, in the object structure of the HTML document, respectively, the possibility of modifying the image by CSS or Javascript.
- Ability to enable PNG, GIF and JPG.
Minuses:
- The complexity of the format, in fact, most browsers with support for SVG support only simplified SVG-Tiny specifications.
- Large native size, but this problem is solved by the SVGZ wrapper format, which is a gzip-compressed SVG.
Without additional plug-ins, this format version 1.1 or (DVG-tiny) supports Firefox 2 and higher, Opera and google Chrome. In more detail on the support of this format by various browsers will have to write no less than about support, for example, css3, full support for the standard 1.2 with the preliminary specifications is not implemented anywhere. There is also a mobile branch of this format.
Once again, in perspective, this is not just a vector graphics format similar to that of flash, but a kind of continuation of the html format for representing graphic information.
On the one hand, it is clear that SVG includes the functionality of APNG and MNG, on the other - only in perspective, as there is not yet native browser support for internal and external SVG scripting. In addition, I see no obstacles to ensuring that the APNG format is not as simple as the GIF in supporting and editing.
We still have another big empty niche - an open and easy-to-use video storage format. Not just a set of frames compressed separately, taking into account differential frames (which is completely useless in the case of normal video compression). Video in svg, mng and apng format will occupy a huge amount of video compressed by modern video codecs.
At the moment, multimedia content (streaming audio and video) is the included objects of Flash, Flash video, Windows Media and QuickTime, etc., all of which are based on closed standards and require third-party plug-ins for playback.
It is not for nothing that I mentioned html 5 at the beginning; a standardized interface in the form of ‹audio and‹ video elements is provided.
As a new independent standard for representing media data, the W3C offers us:
Ogg container
www.xiph.org/ogg
The Ogg container can include media content compressed with various open and closed codecs, metadata, and text data.
As a standard, native browsers are supposed to support Theora's open video codecs, Vorbis (lossy) and Flac (lossless) for audio, and possibly Speex, as a codec for human speech.
The main problem with this open solution is the lack of broad support for the Ogg metadata format, for example, video players simply unpack it and look at the metadata of the constituent elements.
I will not consider in detail the pros and cons of Theora video codec, I can only say that it is quite competitive in terms of the speed of software coding and decoding, as well as the quality / size ratio. Hardware support for encoding / decoding is not yet available due to the freshness of the format (the first public release occurred less than a year ago), unfortunately, this is critical in terms of using Theora codec with large video services like Youtube, Vimeo and the like, as well as uses for online broadcasting.
Ideally, any popular browser encounters the tag:
‹Video src = lookatthis. [Any video format] width = 400 height = 300›
must create a video container on the page that is managed through the DOM without requiring installation of codecs or plug-ins in the case of the Ogg container containing the compressed Theora video and the sound is compressed by Vorbis.
Currently, in one form or another, support for this solution exists in Opera (Video build), Firefox 3.5 and Google chrome 3.0.182.2. Unfortunately, the developers of Webkit (Safari) have gone their own way and consider the primary support for the closed codec mpeg-4 (H.264).
It is possible that in the near future webmasters will be able to insert multimedia content into pages as easy as jpg images, and browsers will not offer us to install various plugins to view the page. Add the ability to simply save and place on streaming video sites without the involvement of third-party services. And any graphic content, both vector and raster, will exist in a compact, open and understandable format for most browsers, which jpeg and gif once became.
PS On Habrahabr there are two blogs dedicated to Ogg and Svg:
habrahabr.ru/blogs/ogg
habrahabr.ru/blogs/svg
Source: https://habr.com/ru/post/63669/
All Articles