Dynamic Image Sizing

An image that almost completely fills the screen for visitors viewing your site at 640 x 480 resolution appears so small at 1024 x 768 resolution (and higher) that it loses its impact. The size of the image that appears to the left of this discussion should fill a significant fraction of the height of your browser window regardless of the resolution to which you have your screen set. (You will need to scroll the page to see the whole picture). The reason for this is that one of two images is being displayed depending on the size of your browser window. If you have your browser full screen at 800 x 600 resolution or less, you see a 150 x 203 image of my son standing in front of a steam locomotive. If you have your browser full screen at 1024 x 768 resolution or higher then you see a 400 x 543 image of the same thing.

These are actually two totally different images that just happen to have been created by resizing the original down to two different sizes appropriate to the height of the available browser window when the screen resolution is set at 640 x 480 and 1024 x 768 respectively. If your screen uses the larger resolution you can see the effect by reducing the size of the browser window and then refreshing this page so that the smaller copy of the image displays.

The code to display the image is generated by a javascript that first tests the available height within the browser window and then displays the appropriate image. If the height is sufficient to fit the larger image then it will be displayed, otherwise the smaller image will be used. The code needed to test the available height within the browser window differs depending on which browser that your visitor is using so we first need to include the following javascript function into the head section of your page. This function will determine the height within the browser window in one of two ways depending on which browser that each visitor is using.

 function findLivePageHeight() {
if (window.innerHeight != null)
  return window.innerHeight;
if (document.body.clientHeight != null)
  return document.body.clientHeight;
return (0);

This function can then be called from within the code that we place at the appropriate spot in our page to actually display the image in order to select the appropriate piece of code corresponding to which of the two images that we want to display.

A large chunk of the code to display the image is common to both versions of the image, only the name of the image file and the width and height of the image differ so the rest of the image tag can be coded outside of the if statement that tests the available height. The following is the javascript code used to insert the above image (of whichever size) into the page.

 var imgsrc = '<img src="img\/';
var lh = findLivePageHeight();
if (lh > 545)
  imgsrc += 'thirlmerc.jpg" width="400" height="543"';
  imgsrc += 'thirlmer1.jpg" width="150" height="203"';
imgsrc += 'border="0" class="left" alt="Daniel standing in front of \'Archie\'" \/>';

The way that this code works is that it gradually builds the <img> tag in a field called imgsrc which is eventually added to the page using the document.write statement. The first line of the code places the first fixed part of the image tag into the variable while the last imgsrc += adds the other fixed part of the tag. The other two imgsrc += are inside of the if statement and one or the other of the two pieces of code will be placed into the tag depending on the evaluation of the if statement.

The second line of our code calls the function that we placed into the head section of our page which uses the appropriate code depending on the particular browser being used to determine and return the height within the current browser window. This value is saved in a field called lh and the if statement tests this available height against a value slightly larger than the height of the larger version of our image to see if it will fit fully within the window. If so then this version of the image is used, otherwise the smaller version is used instead.

In this instance I have used two separate copies of the image, the larger is 17k in size while the smaller is 7k. This means that those using smaller screen resolutions get a faster download as the total page size is 10k smaller for them than for visitors with larger screen resolutions. As those using smaller screen resolutions probably also have dial up internet connections, keeping the download as small as possible will speed loading the page on their system. If you are not concerned with this then you might use the larger copy of the image in both cases and just adjust the width and height of the image to suit the height of the browser window.

Another change you may want to make is if your image is wider than it is high is to change the code to test if the larger copy of your image will fit into the available browser width and select which image to include on this basis rather than the height. To do this just substitute width for height everywhere that it occurs in the above code.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow