Tech Talk
Explanations of Digital Jargon
Imaging on the Web
Trudy Levy
Image Integration
Preparing images for electronic display, whether distributed on the web, CD-ROM or via a projector, requires an understanding of the following:
- Digital Resolution
- Color display
- Image types and compression
Display Resolution
As we discussed in Resolution, Resolution, digital resolution is expressed in two ways, the amount of information and the precision of information. All electronic display devices show the same precision of information about 75 pixel per inch, but some show more information. If you are working on a graphics work station, you might have a monitor which shows 1200 x 1000 pixels, while some of your viewers may have monitors which only show 640 x 480 pixels. If you provide them with a 720 pixel x 500 pixel image which looks fine on your monitor, It will be bigger then their screen. Ever received an image like that from someone?
It is therefore important when creating or converting images for electronic display to think PIXELS. That other printing term (dpi) is irrelevant and will give you a false feeling of security. If you give the display device more information then it can show, it will either adjust the image to fit the size (ie toss information) or the image will be too big. The current average monitor resolutions is considered to be 800 x 600 pixels. This is also true for many projectors, however if you are using just one projector, design for it.
Color Display
We all have seen for ourselves that different monitors will display the "same" color differently. Color rendition is important. First the quality of photographic images are reduced when the colors aren't accurate, also there are the hours spent carefully selecting a perfect palette for a web page, which might look dreadful on another machine. If we were in a perfect world, we could simply attach a color profile to each image and the browser would render the colors accurately. Unfortunately the technology is not able to do this yet, so in the mean time, we try to hit most of our colors by designing for the "generic" monitor or a monitor whose display capabilities are similar to most of the other monitors.
To do this we make our monitor match this "generic" monitor. Three aspects of a monitor display impact color rendition:
- Gamma
- White Point
- Color Range
Gamma
Gamma, a Cather Ray Tube term, is the rate of change of light to dark in the mid tones of colors. Apple monitors are set to a lower Gamma (1.8) then most other monitors (2.2) The result is that images which look fine on a Apple monitor will look darker on others. To match the "generic ", the easiest thing is to adjust you monitor display to have the typical gamma of 2.2. Only change your apple monitor's display when preparing images for monitor display as for any other purpose the 1.8 gamma is more accurate.
White Point
As all photographers know different lights have a different color cast - blue fluorescent and yellow tungsten. This is called the white point or color of white. It is rated in kelvins which measures the temperature. Set your white point to daylight which is 6500.
Color Range
There are two aspects to color range. One is the number of colors, which for most machines is now usually in the millions. Of these millions of colors Web designers have developed a palette of 216 colors which are called web safe as most machines will render them accurately. These are the colors from which you should select your color palette for backgrounds, graphic images, and fonts.
For photographic images, which can not be reduced to a palette of colors, we look at the actual range of color which a Cather Ray Tube makes by means of phosphors. This is called its color space. In 1996 by Hewlett Packard and Microsoft introduced to the web world - sRGB, a Standard Default Color Space for the Internet. It is a limited space with a narrow color range and certainly not one for master archives or printing purposes, but it is one which most monitors can reproduce. Photoshop as well as other programs allows you to work in sRGB color space.
Image types and compression.
Having prepared your images on a monitor set to duplicate a "generic" momitor display, you want to now save them to file types which are the smallest possible without out losing quality. The two common file types for the web are Jpg, Gifs which compress images with little loss though there is some discarded information. Use Gifs for flat artwork, lines, and constant color. Use Jpegs (jpg on windows) for multicolor or blends such as photographs.
NOTE: The Window Platform and thus the world, needs file tags to identify file type and their tags are always only 3 digits. You can sometimes fake a Windows machine by editing the file tag.
To summarize
When preparing images for the web:
- Size the image by pixels- disregard dpi.
- Set your monitor's gamma to 2.2, its white point to 6700 and its color space to sRGB to see what others will see.
- Always save your files with a three letter file tag. jpg for photographs gif for line work.
9/01/00
For more information on Imaging on the Web look hereAdobe Tutorials |
