![[Little Green Heron]](img/heron2.jpg "Little Green Heron")
This page is an experiment to try out image resizing by using Javascript to load smaller or larger images. The aim is to give the reader a page which is convenient over a very wide range of window sizes.
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.
![[Mandarin Duck]](img/mandarin2.jpg "Mandarin Duck")
The page uses three different image sizes. Initially the medium images are loaded; the reader can, if desired, switch to smaller or larger images with the buttons supplied. If Javascript is not enabled, or not available, or the browser does not support Javascript image resizing, the reader still gets the medium-sized images (and no buttons are displayed).
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.)
I'm not going to bother explaining how most of the Javascript works: it's very straightforward, and a look at the source should make it obvious to anyone who is at all familiar with Javascript. One point is discussed below.
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
document.getElementById("someElement").style
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.
I haven't quite made up my mind how useful this approach is. It may well be useful for sites where the images make up an important part of the content - they are not just decorative - but where it is important that they are viewed in the context of the surrounding text. On a real site one would also use cookies so that, if the reader has them enabled, the image size selection is carried forward from page to page.
Anyway, if anyone finds it useful, feel free to borrow the Javascript.
