Basics of images on the web

Why use Images on the Web?

Images and graphics are a fundamental source of communication. I would rather show a picture of the 'Monalisa' to people and have them appreciate her beauty than describe her with lots of adjectives!
So we all understand why images are important not only on the web but also in our day to day lives. In this article we will discuss some basics of web images that will help build a foundation for other articles in this section.

Now, images and graphics made on the computer can be broadly classified into two, CMYK and RGB depending on their color information. Images and graphics can also be classified into two categories - Vector and Raster - depending on how information is stored.

CMYK

CMYK, which stands for Cyan, Magenta, Yellow and Black (K), images are used in the print media such as magazines, newspapers etc. Printing machines use inks of these four colors. Other colors are derived by mixing these four fundamental colors in appropriate proportions.

RGB

RGB takes its name from Red, Green and Blue colors. RGB images are meant for display on display screens such as computer monitors, TVs, LCD monitors etc. These devices use 3 basic colors and all other colors are made by mixing red, green and blue.

Since the topic of discussion is web graphics, we'll be concerning ourselves with RGB images only.

RGB image formats

RGB images can be stored in various file formats. Common RGB image formats are the TIFF (Tagged Image File Format) and BMP (Bitmap). Most image editing and manipulation tools have their proprietary formats, such as .PSD (Adobe PhotoShop), .PSP or .PSPIMAGE (PaintShop Pro) etc.
The World Wide Web gave birth to other RGB file formats such as .GIF, JPG and .PNG. These formats employ compression algorithms (JPG compression algorithm and Gif compression algorithm) that decrease the file size of the image. Images on the web are, thus, compressed. Why? Smaller images result in faster download times.

Important points to remember for web graphics

• Choose the image format correctly. Generally, photographs should be stored as jpgs while logos and other line art should be in gif format.
  Refer: When to use Gifs, When to use JPGs and When to use Gifs and when to use JPGs.
• Ensure that the file size (number of bytes) is at a minimum. We'll discuss how to compress gifs and jpgs in relevant sessions.
  Refer: Optimizing Gifs and Optimizing JPGs.
• Image size should be optimized. This means that the physical dimensions of the image should be just right. All image editing programs come with a Crop tool, with which you can remove any unwanted or extra image parts.
• Most of us work on monitors that have a resolution of 72 dpi (Dots Per Inch) hence it is unwise to use images on the web whose resolutions are higher than this value. (Monitors on high end workstations such as Silicon Graphics machines can have higher resolutions but only a fraction, if any, of your visitors would be using these.)

What are PIXELS?

Pixels are the building blocks of an image. Each pixel has only one color. Here is an image of a circle magnified many times. You'll notice that the circle is actually made of up individual squares. These squares are called pixels.
When you view the image at its original size, you won't be able to see the pixels, rather the image has a smooth round circle. The reason why you can't see individual pixels is because they are very small and the human eye is not able to distinguish them individually. Note how the varying shades of grey pixels (in the magnified image ablve) are placed beside each other to create a smooth outline of the circle.

Vector and Raster graphics

File formats such as .BMP, .JPG, .GIF, .TIFF etc are all raster images formats, which carry color information of each pixel in graphic. This makes raster images quite large in size even when compression algorithms are used. Vector images store information in form of mathematical equations. A circle or a square will be represented by formula rather than pixel information. This makes vector images relatively smaller in size.

Vector and Raster graphics on the Web

The .GIF, .JPG and .PNG formats, which are prevalent on the web, are all raster image formats. One of the promising vector image technologies for the Internet is SVG but it's yet to become popular. (SVG requires a browser plugin. At the time of writing, the plugin was only available for Internet Explorer).