The final images, below, are scaled via CSS to occupy 75% of the window width, with the height scaled to retain the original aspect ratio (by leaving it unspecified). Note the effect on image quality, especially shape edges and text, as you increase and decrease the window width. (On some browsers you may have to refresh the page for the change to take effect.)
The GIF image is more sensitive to scaling changes, both because of its content, with many thin straight lines, and because the GIF encoding does not 'smear' adjacent pixels. Although this JPEG image has some geometric content, the lines tend to be wider and the JPEG encoding blends adjacent pixels to provide a smoother transition from light to dark areas. When pixels are removed or duplicated, the transitions are therefore less evident.
When evaluating whether dynamic scaling is appropriate for an image, it is important to look at both the image content and your intent when presenting it to the user. If the image contains fine detail which conveys important information, scaling should be avoided; if it simply provides decoration or shows general relationships between objects, then scaling may be acceptable.
Finally, note that no browser the author has tested manages to scale a client-side image map when it scales the image. On the Intrinsic size sample page, you saw that there were 'hot spots' at the center of the red circle and the top center bay window of the house. If you stretch or squeeze the above images by changing the window size, then probe for those hot spots with your mouse, you will note that they have remained a fixed distance (in pixels) from the upper left corner of the image and hence no longer are positioned visually in the 'right' place. If you reduce window width sufficiently, the hot spots will fall outside the rightmost boundary of the image and will not be selectable at all.
Last revised 10 Mar 2006