|
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:
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:
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.) |
|
Copyright © 2001 Michael J. Doyle
All Rights Reserved.
Designed & Developed by Mike Doyle
using Macromedia Dreamweaver & CourseBuilder
See Mike's Training Schedule for
HTML, Dreamweaver, & CourseBuilder Courses
Email Mike Doyle
Each location on the grid represents a single color or level of gray.
Graphics programs create and store images on an invisible grid. Scanners superimpose a grid over the picture and determine the color for each location.
That is how images are stored digitally, with a numeric value for each color or level of gray.