Scaling objects according to screen resolution
If you haven't already done so, read the introduction before continuing.
If the value passed to set() is preceded by an asterix (no space between asterix and value) it will be scaled. Supposing I want to scale an image (or series of images) whose default size is 320 x 240px:
set ('target_img height *240px');
set ('target_img width *320px');
What I am in effect saying is: these are the values appropriate at 1024 x 768. Scale them to the viewer’s screen resolution. The 320 x 240 image will resize to 250 x 188 if the resolution is 800 x 600. At a resolution of 1280 x 1024 it will become 384 x 230, and so on.
The script calulates the new value by comparing the viewer’s screen width to the default width of 1024 [1]. This means that where both height and width are scaled, the height / width ratio will be preserved. In the example above the images, which were originally 320 x 240 (a 4:3 ratio), will scale to 384 x 230 (also a 4:3 ratio) when viewed at a screen resolution of 1280 x 1024. Values are rounded off to the nearest whole number [2].
That's one way to scale images. Another is to place them in a containing div, and set the width but not the height of the images as a percentage (the height will be calcualted automatically, based on the height / width ratio of the source file). Now resize the container:
set ('container width *780px');
and all the images will resize too [3].
Notes:
1. If you prefer to pass values appropriate at some other screen width, for example 800, just change the value of _defw in the first line of "functions.js". The actual formula, for what it's worth, is:
new width = value * (screen width / default width)
2. In the example a pixel value is scaled, but any unit could be used: mm, %, even em!
3. Allowing browsers to scale images according to screen resolution can have unfortunate consequences. They scale up by duplicating existing lines, and down by removing them. This means that if you have an image such as a graph, or one containing text, the result is likely to be horrible (see below).
The only images I've found that scale convincingly are photos in the jpeg format.
However, even these can cause problems. If the source file of the image is, say, 160 x 120, and I use JavaScript to scale it to 320 x 240 (the size I want it to display at my default resolution of 1024 x 768), it's probably going to look grainy (see below). So the source file must be the correct size (i.e. 320 x 240). This is also true of images sized as a percentage. An image 30% wide in a containing div 780px wide would be 234 x 176 at the default resolution. So the source file could be 240 x 180 (which is close enough - it's better to round up, rather than down).
So what happens when an image with a source file the correct size is resized to display at a higher resolution? Won't it appear grainy? Well, no.
Suppose I change my screen resolution to twice that of the default. The image will scale to twice the size of the source file, with each row and column of the image being duplicated. However the monitor size hasn't changed, so the rows / columns will be half the width they were at the default resolution, and therefore the image clarity should be maintained.
It's important to have source files that are the correct size, but you also need to consider how much compression to use when preparing them. Compression reduces the file size, and therefore the load time, but excessive compression can remove so much detail that the image appears blocky. This effect will be more pronounced the larger the monitor.
I try to use no more than 30% compression when saving a jpeg - less, if this doesn't result in an unreasonably large file size. I must stress, though, that this a VERY rough estimate. The only way to be sure is to load the page and see how it looks.