Websites of today are filled with a large number of images. But people are less bothered about their varieties and the format used for these varieties of images. There are certain web formats which are used more often. There is a certain way of applying these formats to your website.

The popular web formats include GIF, JPEG and PNG which are all bitmap based formats. There is also a vector format on the block called SVG which is now the chief web image format. Before writing about these web formats, let’s take a glance at some basic concepts.

Bitmap images are based on pixels. If you draw a grid that consists of 800 columns and 600 rows, then each cell of the grid represents a pixel of that bitmap image. The display of these types of images depends upon the monitor resolution. As they have fixed number of pixels, enlarging these images results more often in low quality and distorted images. The pixels are not scalable.

Vector images, on the other hand, are based on mathematical definitions to describe an image. There is no grid concept applied here. Rather, you will find vector images having a circle with a geometrical center and radius. So they don’t rely upon screen resolution. The enlargement of these images has no impact on the quality and appearance of the images. The circle is quite scalable and can be set to any height and width. Vector image file sizes are smaller in comparison to a bitmap file size as they store the same image with less information.

Bit depth is the term used for the number of colors that an image can hold. It is like 4-bit (16 colors), 8-bit (256 colors), 16-bit (thousand of colors) and 24-bit (millions of colors). DPI stands for dots per inch. Your web images must be set to 72 DPI as anything more than that will result in wastage of space. Now look at various formats for web images.

GIF or Graphics Interchange Format is a variable 8-bit format and compresses bitmap files into almost half of their actual sizes. This format has support for transparency also and maintains the quality of images even after compression. This lossless format is best suited for images using 256 colors or less. The appearance of these images is more like cartoons.

JPEG or Joint Photographic Experts Group is useful for photographic images that require more than 256 colors. It is 24-bit format and results in the loss of quality of images upon compression. JPEG files can be stored as Progressive JPEGs which reduce the image size.

PNG or Portable Network Graphics has a 32-bit format and supports transparency. This versatile format is however supported by modern web browsers. You can compress PNG files more than any GIF or JPEG file without loss quality and color depth. It is best suited for producing high-color images or better compressed low-color images.

SVG or Scalable Vector Graphics is a breakthrough format developed by W3C and based on Extensible Markup Language (XML). As SVG images are vector based, they can be enlarged without any loss of data and can be compressed even smaller than JPEGs, GIFs and PNGs. This format also facilitates faster downloading, high resolution printing and embedding of other images into SVG images.

It is a common practice to store photographic images as JPEGs and graphical images with less than 256 colors as GIFs for your website. The GIF format is the best option if your images are to be used over the Internet. While using the PNG format, make sure that latest browsers support this format.

Tags: Right Format for Web Images