Flag as a symbol of language - stupidity or insult?
JavaScript Guidelines and Best Practice
Netscape and mozilla.org give birth to Gecko
You are here: irt.org | Articles | Design | Choosing the Right Format For Your Web Images [ previous next ]
Published on: Sunday 5th March 2000 By: Ian Gan
Have you ever wondered about the different types of images used on websites? Or more importantly, what kind of web images to use for your own website? In this tutorial written by Ian Gan, we'll try and give you a clear picture of commonly used web formats and how you can apply them to your own website.
Currently, the images on the Web can be divided into several image formats: GIF, JPEG, and PNG, all bitmap based formats. A new vector format called SVG is on the horizon and is expected to become the main web image format in the near future. Please note that there are other proprietary web graphic formats such as Macromedia's Shockwave Flash (web streaming vector animation) and MetaCreations' 3D MetaStream, which users need plug-ins to view. These proprietary formats are not discussed in this article.
Before we view the different web image formats in-depth, let's look at some fundamental concepts that will enhance our understanding.
What's the difference between bitmap and vector graphics?
Bitmap images are pixel based. Imagine that you have an image of an orange. Using a pencil, you draw a grid of 800 columns by 600 rows on the image. Each cell of the grid now represents a pixel of the larger bitmap image. A bitmap image is resolution dependent because it uses a fixed number of pixels to represent its image data. Zooming the bitmap image of the orange will cause it to lose quality and detail as the image data contained in each pixel is not scalable.
Vector images use mathematical definitions to define an image object. Using vectors, the image of the orange in our earlier example would now simply be described as a circle with a specific geometrical center and radius. This means that vector images are not resolution dependent. Zooming the vector image of the orange will not affect the quality or detail of the image. The orange has been defined as a "circle", and this "circle" can scale to any width or height and still remain a "circle". This is why vector graphic file sizes are often smaller than bitmap graphic file sizes - because they describe the same image with less information.
A lossless image format, like GIF, simply means that no image quality is lost when the image is compressed.
A lossy image format, like JPEG, means that some image data is lost when the image is compressed, reducing the quality of the image.
Bit depth is the number of colors an image can contain:
4-bit = 16 colors 8-bit = 256 colors 16-bit = thousands of colors 24-bit = millions of colors
Images created for print usually have a DPI resolution of 300 and higher. Computer monitors can only display 72 pixels per inch, so setting the DPI of your web images higher than 72 will only waste file space. When scanning in images or making your images web ready, remember to set the image resolution at 72 DPI.
Now, let's take a look at the various image formats currently and most commonly found on the Web:
GIF (Graphics Interchange Format) is a bitmap format developed for CompuServe by a company that is now part of UNISYS. Compuserve views GIF as a public standard, but UNYSIS has tried a few times to claim GIF as a proprietary standard and charge users a licensing fee. This unpopular move by UNYSIS has created quite a stir. GIF is a variable 8-bit format that compresses bitmap files into half of their original size, and supports transparency. GIF is a lossless format, which means that no image quality is lost when the image is compressed. GIF is best for graphics that use 256 colors or less and are cartoon-like.
JPEG (Joint Photographic Experts Group) is an alternative to GIF developed specifically for photographic images. JPEG supports millions of colors (24-bit). JPEG is a lossy format, which means that some image data is lost when the image is compressed, reducing the quality of the image. JPEGs can also be saved as Progressive JPEGs, which reduces the size of the image. The JPEG format is best for scanned photographs or images that require more than 256 colors.
PNG (Portable Network Graphics) is the most versatile of the current web graphic formats. However, only newer web browsers can take full advantage of PNG characteristics such as 32-bit color and transparency. PNG compression is a lossless format and can compress more than a GIF or JPEG of the same color depth and quality, resulting in smaller file size. The PNG format is best suited for creating high-color graphics or better compressed low-color graphics.
SVG (Scalable Vector Graphics) is a revolutionary new image format being worked out by the W3C (World Wide Web Consortium), the organization that creates web standards. SVG is based on XML (Extensible Markup Language), the web language expected to take over from HTML (HyperText Markup Language). SVG is expected to bring the high-resolution graphics used in today's print media (magazines, brochures, catalogues, etc.) to the Web. SVG images will be vector based (as opposed to bitmap based JPEGs, GIFs, and PNGs) - meaning that images can be zoomed in and out without losing any details - and are expected to have file sizes even smaller than JPEGs, GIFs, or PNGs. In addition to faster download speeds, SVG will make possible high-resolution printing, high-performance zooming and panning, and even embedding other images or information inside your SVG image!
As a standard practice, save your photographic images as JPEGs and save your graphical images (using 256 colors or less) as GIFs, if they are to be used for the web. Save your images as PNGs only if you are confident that your users are using newer browsers that support the format, like Microsoft Internet Explorer 5.0. SVG is an exciting new technology that may well revolutionize web multimedia so do keep an eye out for it.
Do experiment with the various web image formats. Try saving an image in different formats, sizes, etc. just to see the differences between them. Whatever image format you use, remember to set the image resolution at 72 DPI.
The irt.org GIF image is shown below in various image formats and quality:
 |
Image: irt.gif A good quality image with a reasonable file size. |
 |
Image: irt32.gif Reducing the colors reduces the file size but doesn't drastically decrease the quality of the image. |
 |
Image: irt16.gif Reducing the colors reduces the file size at the cost of reducing the quality of the image. |
 |
Image: irt100.jpg Swapping to a JPEG image with a high degree of quality, almost doubles the file size. |
 |
Image: irt75.jpg Reducing the JPEG image quality reduces the file size, but introduces lots of blemishes. |
 |
Image: irt25.jpg Reducing the quality further, creates further deterioration in the image, but does produce a small file size. |
Keeping the file sizes of your web images small is an important part of web design. Generally, it is good practice to limit the images you have on any one webpage to 50KB, so that it loads quickly.
There are many web programs available to help you compress the file sizes of your web images, such as:
Alternatives include shareware and free programs that you can get from websites like Download.com.
Well, that's it folks - hope you found this information helpful. Many Thanks to the Editors of this article for helping to improve it. Comments? Questions? Drop me a note at: ian@irt.org
Flag as a symbol of language - stupidity or insult?
JavaScript Guidelines and Best Practice
Netscape and mozilla.org give birth to Gecko
