additions...
...web design...
image-scaling in browsers is pretty unreliable…
The only sensible approach for scaling an image for use on the web while preserving most of its quality, is to use a dedicated piece of software (PhotoShop for instance) for the scaling-job, and upload the endresult for use at 1:1 scale. Browsers are not very good at scaling images, and they vary greatly.
However, in some layouts it may be necessary to make an image stay within a flexible or scaling column or box, for example by using max-width to scale it down if/when containers become narrower. In other cases the entire layout scales with font-size, and the images should ideally adjust in size to scale with the layout. In these cases we may not have much of a choice but to let the browsers scale images.
Image-scaling may also be necessary because we also need to serve our images to other media than the ordinary browser on the ordinary screen. Both print and mobile browsers are potential candidates for image-scaling, although large images should rather not be served to mobile browsers.
The result of image-scaling in browsers depends on the browser itself and the complexity of the image. A few browsers do a somewhat decent job with almost any image, while most browsers make complex images look rather bad when scaled.
practical image-scaling in browsers…
First I'll focus on how scaling works and affects the quality of what a visitor gets to see. The simplest demo is the max-width scaling where the image can't be larger than the container it's in, which for that demo is the body itself.
Compare the demo above with the original size image demo across browser-land, to get an idea about different browsers' ability to scale images. A few fixed-scale demos are added to the list in the side-column, for further comparison across browser-land.
Images can also easily be scaled with fixed proportions to font size. The image will then change size if/when a page is subjected to font resizing, and for that we usually apply 'em' scaling. This method is used a lot in what some call “Elastic” or “em-fixed” layouts.
potential problems with legacy-browsers…
Browsers shall scale an image proportionally – keep the width/height ratio constant when only one dimension is given a value and the other is declared or defaults to 'auto'. This is what makes 'max-width' or 'width' work, and all the latest browser-versions are doing fine.
IE6 and older versions may initially fail to scale properly. They may fail on first load unless both width and height are given actual values. Whether it works or fails on first load is a matter of timing, so slow connections usually means failure while really fast connections may preserve ratio on all or most images in a page.
Lack of support for 'max-width' in these legacy browsers does of course also create problems, making it necessary to add more or less well-working workarounds. It may take a while before we can safely ignore these problem, since these legacy-browser won't to go out of use any time soon.
alternatives to image-scaling in browsers…
Of course: too wide images can be handled by hiding the overflow. The visible part may look ok, but we may end up hiding too much of an image so what's left doesn't make much sense. Thus, this method certainly has its limitations, but with a bit of care – avoid hiding too much under any circumstances – the method has its uses.
We can also provide a scrolling-mechanism for too wide images, just as for any other content where original size and/or quality should be preserved regardless of available space in a layout. This is a good solution in many cases, but it may not go well with all designs or designers.
We may also provide a new image, or set of images, whenever the layout changes. This may be facilitated through CSS media-queries and/or javascript, and is slowly becoming a valid option with growing support for media-queries across browser-land. Depending on the actual layout it may require a lot of different-sized images to work well though.
conclusion…
Given the right – rather “forgiving” – image, the result of image-scaling may appear acceptable in most browsers. More complex images should rather not be scaled in any browser, but I do think Opera does a somewhat decent job with most images.
sincerely 
Hageland 10.sep.2007
last rev: 17.oct.2007
additions...
