Images used on the Web including PNG and JPEG
Release: 2009-11-28
Jump to Web Standards Articles TOC
Images
The main image formats available to use on the internet (and for applications too) are GIF, JPEG, PNG, MNG, SVG and HTML Canvas.
GIF
Graphics Interchange Format, created by CompuServe, is a patented format and software developers must pay royalties to CompuServe to implement support for the image. This is because the LZW compression format by Unisys also requires royalties
It is an 8-bit, 256 colour palette image supporting Lossless image quality (keeps 100% image quality when compressed), 1-bit binary transparency and multiple frames and repeat feature for animation.
Streaming is supported via per-row Interlace.
GIF is now an out-dated image format.
JPEG
Joint Photographic Experts Group image format is patented but free of charge to implement. Royalties must be paid to implement extensions to the format.
It uses their lossy compression format that throws away image information that is beyond most human full-sighted range.
Supports full 24-bit True colour with blends and EXIF embedded text such as camera information.
Good for large photographs over the internet.
PNG
Portable Network Graphic is an open-source, free-of-charge, patent-free modern image format developed by the global community and published by the World Wide Web Consortium (W3C).
This format has 8-bit and 24-bit versions both supporting per-row-and-column Interlace streaming, built-in gamma correction, Lossless 100% image quality with the open-source Zlib compression format.
The 8-bit 256 colour palette version also supports 1-bit binary transparency.
The 24-bit True colour version also supports full anti-alias alpha channel transparency, blends and EXIF embedded information.
PNG has been supported in MS Internet Explorer 4 and higher without alpha transparency until version 7 winch natively supports the PNG alpha transparency. But version 5.5 and 6.0 has an AlphaImageLoader filter style property to handle alpha transparency. Netscape 4 supported PNG without transparency and gamma correction. Plus other web browsers, Java 1.3 and all of today's image editing and viewing products support PNG.
Because PNG uses the more efficient zlib compression and refined image specification , 8-bit PNG images tend to have smaller file sizes than GIF images. Also as 24-bit PNG images do not lose image quality they have a larger file size than typical JPEG images.
MNG
Multiple-image Network Graphic is built on the PNG image format but adds support for sprites and repeat features for paletted and true color animated images with or without binary or alpha transparency.
Optionally MNG can use the JPEG Network Graphic (JNG) component to add JPEG's Lossy Compression support.
Few applications support the MNG format but Corel/Jasc Animation Shop, early Mozilla based browsers, an add-on for current Mozilla based browsers, The GIMP, plugins for Classic Netscape and an ActiveX Control for Internet Explorer do support it.
SVG
Scalable Vector Graphics (SVG) is an XML structure to describe two-dimensional vector graphics that supports transparency, links, animation and CSS quality styles. Published by the World Wide Web Consortium (W3C), SVG is open, accessible, search engine friendly and download friendly.
Most of SVG 1.1 is supported by Mozilla based browsers such as Mozilla Firefox 1.5 and higher, KHTML based such as Konqueror, Apple WebKit 420 and 523 based such as Apple Safari 3 and higher, Chromium based like Google Chrome and SVG 1.1 Tiny is supported by Presto based like Opera. Opera 10 supports full SVG 1.1 and partial SVG 1.2 Tiny. Only Mozilla and Presto based support SVG Filters.
They all can handle partial SVG 1.2 Tiny images that use features that are compatible with SVG 1.1, ignoring features the useragent do not support.
The language supports groups (<g></g>), lines, circles, polygons and even uses the XLink XML language to provide links.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" width="300" height="400">
<title>SVG 1.2 Tiny Example</title>
<g id="a">
<a xlink:href="index.html">
<circle cx="10" cy="10" r="7" fill="#0000ff"/>
</a>
<rect x="100" y="100" width="50" height="50" rx="3" ry="3" fill="#ff0000" transform="rotate(25 100 100)"/>
<text x="100" y="98" font-size="15px" font-color="#0000ff">This is SVG text</text>
</g>
<g id="b" transform="translate(100,100)" >
<!-- The following illustrates the use of the 'set', 'animateMotion',
'animateColor' and 'animateTransform' elements. The 'text' element
below starts off hidden (i.e., invisible). At 3 seconds, it:
* becomes visible
* continuously moves diagonally across the viewport
* changes color from blue to dark red
* rotates from -30 to zero degrees
* scales by a factor of three.
-->
<text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden">
It's alive!
<set attributeName="visibility" to="visible" begin="3s" dur="6s" fill="freeze"/>
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze"/>
<animateColor attributeName="fill" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze"/>
<animateTransform attributeName="transform" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze"/>
</text>
</g>
</svg>
In SVG you can embed JPEG and PNG images with the image element:
<image xlink:type="simple" xlink:href="images/patternedimage.png" xlink:title="Patterned Image" xlink:show="embed" xlink:actuate="onLoad" x="26px" y="32px" width="105px" height="89px">
This is a patterned image symbolizing...
</image>
SVG 1.1 Tiny and higher supports animation using elements and attributes (declarative animation). Mozilla based does not support declarative animation and styling with SVG native presentational attributes. SVG 1.1 Basic and SVG 1.1 (Full) supports animation using scripting and DOM, styling with CSS itself and using the image element to refer to other SVG images.
SVG 1.2 Tiny supports a micro DOM for scripting and introduces extra metadata, ARIA support, audio and video support.
For more information about SVG you can visit http://www.w3.org/standards/techs/svg.
HTML Canvas
HTML 5's canvas element and DOM 5 HTML's Canvas scripting API (application programming interface) provides images that can be constructed using vector or line drawing like scripting objects, properties and methods. Canvas images can provide embedded decorative images, charts, diagrams, maps and more that could be dynamically generated. Such as if an environment supports interactive scripting, then a visual chart could be updated live by user interaction or updated values in JavaScript.
Copyright ©2005-2010 Legend Scrolls and Peter Davison.
Icons from the Oxygen Icon Theme, LGPL, and PNG version of icons in the Oxygen Icon Theme from kde-look.org, GPL.
All rights reserved.
