HTML and CSS, properly used, enable one to write a web page which is viewable at essentially any screen size. Provided, that is, the page contains text only. Images form a problem, partly because browser resizing of images has in general been quite poor, at least compared to what one normally expects from a drawing or photo-manipulation application. (This is incidentally not a criticism: speed of display is far more important in browsers.) And if images are not resized, an image which is viewable on a PDA looks ridiculously small on a 1600-pixel workstation.
Even with greatly improved browser resizing, one would still have an issue with bandwidth. A low-resolution image is not going to look good when expanded, but sending a high-resolution image is wasteful if it is only going to be shrunk to some smaller size.
In the long term vector graphics such as SVG may provide a solution for GIF-type images. But photos remain an issue. This page therefore experiments with another possibility: selection of different size images.
I'm not certain what the best ratio of image sizes is, but a bit of playing around suggests that a linear factor of between 1.5 and 1.8 is right. On this page I use a factor of about 1.6.
Using these means that the page is conveniently viewable over window widths which differ by a factor of about five or six. I venture to suggest that this should be good enough for almost anyone. (This of course assumes that the reader has set a font size appropriate to his/her configuration.)
Older browsers do not support image resizing after rendering. The resizing works in any case in Opera 7+, IE 6, Mozilla and Firefox.
Unfortunately there does not seem to be any good feature test to determine whether resizing is supported or not. As a first approximation browsers supporting
tend to support resizing, while those which don't support one won't support the other. One exception I have met is Opera 6, which doesn't support resizing of images, although it does support “getElementById”.
However Opera 6 is now so little used that one can probably safely ignore it – or otherwise add a bit of browser sniffing for this specific case.
Of course one could increase the usable window-size range still further by including more than three image sizes. However if each of these has its own button, it reduces usability/clarity by making the user interface more complex.
Rather than making the user click a button, one possible approach would be to resize the images automatically according to the window width. This would make it possible to use more than three image sizes. It could however be irritating for the user: suppose he increases the window size to see a bit more of the page and finds the effect entirely cancelled out by the larger images which suddenly pop up.
An intermediate possibility would be to give the reader a single “resize images according to your window size” button, as below. The show-window-width button has been added to assist with experiments.
Perhaps the best solution is to apply the automatic resizing on the initial load (only) and then allow the reader to change it manually if desired.