Dummies guide to image formats

posted Saturday, May 3rd, 2008 at 5:52 pm by

Dummies guide to image formats

Choosing the right format depends on the task in hand, while some basic understanding of the underlying technologies will go a long way in getting the most from your image manipulation software.

The four most important file formats used on the web are the GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group) and the 8-bit or 24-bit PNG (Portable Network Graphics). Each of these formats has its own benefits, giving it a role in the creation of web graphics.

GIF (Graphics Interchange Format)

The GIF is a bitmap image format (as are all four image formats discussed here), which has been around for as long as the web, having been introduced by CompuServe in 1987. GIFs benefit from very wide support, which means you can rely on users being able to properly view them in their user client.

The format uses a pallet of up to 256 colours (in any one frame), which can be precisely controlled in image manipulation software such as Photoshop. Diffusing and dithering colours enables you to control the file size to a fine degree (should your image manipulation program support this).

GIFs use the Lempel-Ziv-Welch (LZW) lossless data compression technique to compress data. This technique is particularly suited to images with large areas of flat colour or those containing logos or text (line art), which needs to remain sharply defined once compressed (as it dose not produce the artefacts a JPEG might). Although GIFs won’t degrade when repeatedly re-saved they can suffer from being compressed too aggressively (as with any file type).

One of the attractions of the GIF is native animation support (unlike PNGs or JPEGs), with frames imbedded in the file. This opens up a whole host of possibilities, which can be quite advanced and is beyond the scope of this article.

The GIF format supports transparency, treating it as a single colour. This means a transparent pixel will be either 100% opaque or 100% transparent. GIFs do not support alpha transparency (semi transparent pixels) unlike the 24-bit PNG.

JPEG (Joint Photographic Experts Group)

Like the GIF, the JPEG has been around for as long as the web and benefits from the same level of support. The format can support up to 16 million colours and as a result is the best choice for photographs and other images with “continuous tone”. JPEGs cannot be animated and do not support transparency.

The algorithm used to compress JPEG images is lossy, meaning that an image repeatedly re-saved, will loose more data, degrading further with each generation. It is better used for the final output of an image rather than a master copy, which may need to be repeatedly edited or stored. Master copies of graphics are better stored locally as TIFFs, PNGs or PSDs, which are all non-lossy and will better preserve the data.

The lossy algorithm makes it is far more efficient at compressing photographic images to a better standard than the GIF or PNG. Aggressive JPEG compression can lead to image degradation with the appearance of “artefacts”, pixel clumping and blurring. In continuous tone images such as photographs this is less of a problem as it is less obvious. On areas of flat colour artefacts are more noticeable which is why the lossless compression of GIFs or PNGs is preferred.

8-bit and 24-bit PNG (Portable Network Graphics)

The lossless compression used in PNGs makes them suited to hard lined vector graphics and images containing large mounts of text. They do not support animation and their transparency support varies. The PNG format was designed specifically for the creation of images for the web. In 1995, Unisys patented the LZW compression algorithm, used in GIFs to compress data. Together with the GIFs limitation to 256 colours at a time, this lead to the creation of the PNG format that dose not require a patent licence.

There is a large amount of confusion over the advantages and disadvantages of PNGs in the production of web graphics. Although widely supported in all modern browsers, PNGs have suffered from a poorer level of support than the GIF or JPEG format. Specifically when IE6 was released in ’01 without native support for the alpha transparency (semi transparent pixels) the 24-bit PNG was capable of, the adoption of the format in the production of web graphics was massively held back. With the release of IE7 in ‘06 this is becoming less of a problem, as the alpha transparency support was included as standard.

IE6’s shortcomings will still remain a major obstacle for some time to come until the browser falls out of use (a few years yet). When viewed in IE6 any alpha transparent areas of a 24-bit PNG will appear as grey patches or a block around the image.

8-bit PNG

This is very similar to the GIF in most respects and was intended as its replacement to some extent. It’s major shortcoming is its lack of support for animation for which the GIF is still king. It deals with transparency in the same way as the GIF, by treating transparency as a single colour. This means you cannot have semi transparent pixels in the 8-bit PNG (where as in the 24-bit you can).

At 8-bit it means that this version of the PNG also only has only a 256-colour pallet. Its major advantage is that in most circumstances it can achieve better compression on a similar image than a GIF. In some cases a GIF will produce better results such as an image with diagonal lines. Although in the past it has been difficult to find image manipulation software with a good set of options for optimising an 8-bit PNG, the latest versions of Photoshop have features comparable to those for GIFs.

24-bit PNG

This is the only format discussed which supports full alpha transparency. This simply means that it allows semi transparent pixels in an image. An alpha channel is a fourth channel (in addition to red, green and blue), which contains the transparency data of each pixel. As explained earlier alpha transparency would be in much wider use if it weren’t for the lack of support in IE6, which still makes up a significant proportion of browser usage.

Due to the 24-bit PNGs alpha channel and lossless compression the file sizes tend to be large compared to the other formats discussed. As a result it should only really be used where alpha transparency is desired and even then only when full software support is available (or a work-around in place). Getting PNG alpha transparency to work in IE6 requires the use of Microsoft’s proprietary browser filters, which brings its own limitations.

The 24-bit PNG has a lead over the JPEG and GIF in the export and compression of gradients. With its higher colour depth it handles the transitions better than the GIF while not blurring the gradient like as a JPEG might. The resulting graphic is of a very high standard with a low file size. The format is ideal for small, tiled gradients.

Ads from Google

1 comment to “Dummies guide to image formats”

  1. The blog is quite nice great post

please leave a comment

spacerdotgif comments RSS feed
Please leave a comment

* required fields