Images used on the Web including PNG and JPEG

Release: 2008-01-27
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 and SVG.

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. 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 Gecko-based browsers, an extension for current Gecko-based browsers, The GIMP, plugins for Classic Netscape and an ActivX Control for Internet Explorer do support it.

SVG

Scalable Vector Graphics is an XML structure to describe two-dimension vector graphics that supports transparency, links, animation and CSS quality styles. Published by the World Wide Web Consortium (W3C) is open-source, accessible, search-engine friendly and download friendly.
Most of SVG 1.1 is supported by Gecko-based browsers such as Mozilla Firefox 1.5+, KHTML-based such as Konqueror, Apple WebKit 420 based such as Apple Safari 3 and SVG 1.1 Tiny is supported by Opera.
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"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" width="300" height="400">

  <title>SVG 1.1 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" attributeType="CSS" 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" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze"/>

      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze"/>

      <animateTransform attributeName="transform" attributeType="XML" 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 Basic and SVG 1.1 supports animation using scripting and DOM, styling with CSS itself and using the image element to refer to other SVG images.

For more information about SVG you can visit http://www.w3.org/TR/SVG11/.

File Size test of an 180x60 image

This image was originally a transparent Photoshop image (which are 32-bit true colour). The image's size was 42.2 Kilobytes. This comparison was done using the 'save for web' dialog from Adobe Photoshop Elements 4.0 for Mac OS X. The time is for downloading on 56k modems.

PNG 24-bit (with alpha transparency): File size 7.421 KB takes about 2 seconds
JPEG (100% image quality): File size 6.703 KB takes about 2 seconds
PNG 24-bit (without alpha transparency): File size 5.791 KB takes about 2 seconds
JPEG (80% image quality): File size 3.815 KB takes about 2 seconds
PNG 8-bit (selective, 128 indexed colours, 88% difusion dither, with transparency): File size 2.575 KB takes about 1 second
JPEG (60% image quality): File size 2.532 KB takes about 1 second
GIF (selective, 128 indexed colours, 88% difusion dither, with transparency): File size 2.521 KB takes about 1 second
GIF (selective, 128 indexed colours, 88% difusion dither, without transparency): File size 2.514 KB takes about 1 second
PNG 8-bit (selective, 128 indexed colours, 88% difusion dither, without transparency): File size 2.428 KB takes about 1 second
JPEG (30% image quality): File size 1.484 KB takes about 1 second
JPEG (10% image quality): File size 1.089 KB takes about 1 second
JPEG (0% image quality): File size 924 bytes takes less than 1 second

For extra comparison this sized image:
as a 16-bit Windows Bitmap is 80 Kilobytes,
as a 24-bit Windows Bitmap is 88 Kilobytes,
as a 32-bit Windows Bitmap is 100 Kilobytes.

File Size test of an 1024x768 image

This image was originally a transparent Photoshop image (which are 32-bit true colour). The image's size was 3 Megabytes. This comparison was done using the 'save for web' dialog from Adobe Photoshop Elements 4.0 for Mac OS X. The time is for downloading on 56k modems.

PNG 24-bit (with alpha transparency): File size 1.059 MB takes about 3 minutes, 17 seconds
PNG 24-bit (without alpha transparency): File size 977.6 KB takes about 2 minutes, 58 seconds
JPEG (100% image quality): File size 472 KB takes about 1 minute, 26 seconds
GIF (selective, 128 indexed colours, 88% difusion dither, without transparency): File size 300.4 KB takes about 55 seconds
GIF (selective, 128 indexed colours, 88% difusion dither, with transparency): File size 300.2 KB takes about 55 seconds
PNG 8-bit (selective, 128 indexed colours, 88% difusion dither, without transparency): File size 264.7 KB takes about 49 seconds
PNG 8-bit (selective, 128 indexed colours, 88% difusion dither, with transparency): File size 264.6 KB takes about 49 seconds
JPEG (80% image quality): File size 261.4 KB takes about 48 seconds
JPEG (60% image quality): File size 169.2 KB takes about 32 seconds
JPEG (30% image quality): File size 89.6 KB takes about 17 seconds
JPEG (10% image quality): File size 55.28 KB takes about 11 seconds
JPEG (0% image quality): File size 41.25 KB takes about 8 seconds

For extra comparison this size image:
as a 16-bit Windows Bitmap is 1.6 Megabytes,
as a 24-bit Windows Bitmap is 2.3 Megabytes,
as a 32-bit Windows Bitmap is 3.1 Megabytes.

Web Standards Articles TOC

Interesting Links for Web Standards Articles

Depreciated but archived:

Legend Scrolls