Chapter 6, Lesson 11
Chapter 6, Lesson 11![[INDEX]](icon_bki.gif){kind=icon}
Ch
6,
L
11 -
Image Presentation Issues
If you already quite familiar with "gotchas" regarding the use of images, related to image & screen size, image brightness, and color pallettes, you can skip this lesson.
In this lesson, I'd like to present some tips regarding editing HTML images. I've discovered, through experience, and I've observed on the world wide web, that misunderstandings about using images can lead to some pretty unfortunate results out there in internet land.
The temptation (and believe me, it's a large one) is to assume that because it works on my browser, it will work on your browser. It's essential, of course, to make sure it works on your local browser, but unfortunately, that's not always enough. This is particularly true if you are checking your web page with one of the recent, advanced browsers (like Netscape or Internet Explorer's latest versions) and using high-resolution display monitors. These advanced browsers are a whole lot smarter and more forgiving of HTML mistakes than the older browsers. If you already know that you want to target only people with advanced browsers and equipment as your web page audience, then don't worry about other browsers. If however, you are targeting a broad audience who might have most any kind of browser, or most any kind of monitor, then think carefully about the issues presented on this page, namely image size, image brightness, and color pallette.
We discussed image file size and format previously. Now I'd like to talk about image size itself, i.e., how big it is on the screen. Image size is specified in three dimensions, pixels (dots) width, pixels height, and number of colors. For now, we'll focus on width and height, usually expressed numerically as WIDTH x HEIGHT. As an example, let's take the case of the following image:
On my 14" old-fashioned VGA monitor at home, which has a screen area of 640 x 480 pixels, the image shown looks quite nice. In fact, based on what I see on my screen, I might be tempted to use an image this size as a "button" for a clickable-link. On my screen, the button ends up being 1.2 x 0.4 inches (3 x 1 cm). The font in the image, being only 9 dots high, ends up being 0.14 inches (0.35 cm), quite readable. But what if this image gets viewed by a 14" SVGA monitor set to 1024 x 768 pixels? Now our "button" is only 0.75 x 0.25 inches, and the type is a miniscule 0.088 inches high (0.22 cm), smaller than the minimum recommended text height of 0.1 inches (0.25 cm), and not nearly so readable.
A personal example is a slideshow I created for my Christmas web page. In order to keep the download time reasonable, I chose to make the individual images very small (about 140 x 110 pixels), which looked quite nice on my 640 x 480 screen. I immediately got complaints from a fellow worker, however, that the images were just too darned small. When I went to look at them on his monitor, I saw that they looked to be about half the size they were on my screen. It turns out that while he had a little bigger monitor, he also had the screen area set to 1280 x 1040 pixels, which caused the picture to be very small. What was 2.2 x 1.7 inches (5.5 x 4.3 cm) on my screen, was only 1.75 x 1.375 (4.4 x 3.5 cm). Here, the perception of image size results first from the area of the image (which had decreased 35% from 3.75 to 2.4 square inches), and secondly from the image size relative to the screen size (which decreased from occupying 21% of the screen width to 11% of the screen width). (by the way, I told my coworker to take a work break...)
Another common example of this issue is something I run into quite often while surfing the net. I'm kind of an airplane nut, you see, and sometimes when I download an image of one (waiting 10 minutes for it to download, of course), what I get is an image that is w-a-a-a-y bigger than my screen. No doubt, whoever posted the image has a big fancy 1280 x 1024 monitor that cost about a gazillion bucks, and they figured "hey! if I can afford it, everybody must have it", so they posted the image to fill their screen. Meanwhile, back at the po' folks house (i.e., mine), I get to look at a partial airplane, because the image is way bigger than my 640 x 480 screen, and I have to scroll back and forth to see the rest of it. Yecchh! The sad thing is, they probably would have preferred to post a smaller picture, had they thought it through, because they probably want me to not only see their picture, but come back for more. (There's a lesson in here for all of us... are you beginning to see it?)
Another image-related issue has to do with image appearance, specifically as it relates to image brightness and contrast. There is an attribute of display monitors, called "gamma" that affects how bright an image is displayed on the monitor. In the monitor, in spite of the fact that you may have specified an RGB color of 128 (which should be half intensity, i.e., 128/255 for the specified color), the monitor may respond to the numerical value with something less more or less than half intensity (typically, less). What results is a displayed image which is darker (usually) than you expected. Graphics editors, such as LView (among others), allow you to adjust the gamma of the image, so as to PRE-compensate for monitor effects. The effect of gamma on images seems to be worse for high-resolution screens than for low resolution, so I suggest the following tact. If you have a high resolution screen (1024 x 768 or more), and you are using it in that mode, adjust the image (using your image editor) so that it looks good on your screen, then save it just like that to be used on your web page. If you have a lower-resolution screen, or you use your high-resolution monitor in a low-resolution mode (like 640 x 480), adjust the image (using your image editor) so that it looks "just a little too bright" on your screen, then save it just like that to be used on your web page. This will work out nicely most of the time, though it will be impossible to predict how it will look on every system which views your web page.
Finally, comes the issue of color pallettes. Sometimes, you won't have a choice about how many colors to use in your images. If this is so, press on (undaunted). But if you have a choice, you can minimize browser incompatibilities by specifying a 256-color pallette. Sometimes, this will also have the effect of reducing the file size of the image, which is a plus since file size and download time are so closely related. If you are building icons or buttons using a graphics editor (like Windows Paint or Paintbrush), try to stick to the 16-color pallette, whenever possible. This way the image stands a very, very good chance of looking just like you thought it would at the remote browser.
... leave e-mail ...
