All images stored on a computer are stored as digital data. When you zoom in on digital data, it ultimately takes on a "blocky" look. Why? Move your mouse over the red box on the Continental Congress picture above for the explanation...
The term resolution refers to the number of storage locations per inch (called dots per inch, or dpi). Both digital images and the devices that display them have resolutions. In the best of all worlds, the resolution of an image should match the resolution of an output device. Now here's the kicker...the resolution for devices are different from device to device. Thus:
- Printer resolutions are typically 300 dpi or greater
- Monitor resolutions are typically 72 dpi (also called "pixels" for monitors)
The higher the dpi, the greater the amount of data to store an image. In fact, an image at 300 dpi requires over 17 times more storage space than the same image at 72 dpi:
- 300 dpi = 90,000 storage locations per inch (300 x 300)
- 72 dpi = 5,184 storage locations per inch (72 x 72)
Since monitors display at 72 dpi, that means that approximately 94% of a 300 dpi image is never used when displayed on a monitor! Because the image on the monitor is created with light, the eye blends the pixels together, forming a smoother image...we really don't need the 300 dpi!
Try It! To see this blending effect with your eye, look closely at the "zoomed" pictures in the left and right columns. Then, step 8-10 feet away from your monitor and look at the images again...
Do you see more "detail" when you were closer or further away? Well that's a trick question. Of course you saw more detail when you were closer, but you didn't really see anything but blocks, right?
So what does all this mean? It means that if you are using images for the web...regardless of GIF, or JPG, you must make sure that the resolution is changed to 72 dpi...or people accessing your images are going to wait a long, long time for each picture to download!
To change an image resolution, you'll need to use a graphics program such as Photoshop, or Fireworks, or some other program designed to create and edit web graphics.
Final Note: As you gain more experience with HTML, you may discover that the IMG element has height & width attributes that allow you to resize images in a web browser. I chose not to focus on these attributes because they do not modify the resolution of an image.)