|Use image editing software to reduce the dimensions (and also file size) of images rather than setting the dimensions (and no reduction in file size) with the web page authoring software. (How to determine file size? see below) (How to change the file size? See further below.)|
|Which image is 22 kilobytes, which is 126 kilobytes and which image is 1406 kilobytes ?|
|The image above was forced to display 400x300 pixels by the width and height tags in the html code. The dimensions were set with the html authoring software. Using the webpage authoring software to reduce the dimensions of the image does not reduce the file size. This file is 1406 kilobytes.|
|The two images below had their dimensions reduced by image authoring software. Their file sizes are 22 kilobytes and 126 kilobytes respectively.|
Firefox and IE8 provide many tools to assist website building and analysis. One useful function of these tools is to provide a quick determination of the image file sizes on a web page.
In Firefox ensure that the web tools have been installed and that the Web Developer Toolbar is displayed. It includes many useful web development tools including the function to display the file size of image files. Select Images then turn on Display Image File Sizes.
In IE8 select Tools --> Developer Tools --> Images the turn on Show Image File Sizes. It appears that IE displays the file sizes in bytes rather than kilobytes. (I found that IE was somewhat inconsistent in displaying the Developer Tools window. Thus I recommend Firefox.)
Remember: Reducing the linear dimensions is not the same as reducing the file size.
I use Adobe/Macromedia Fireworks to change both the dimensions (length and width) and the file size of images. Reducing the file size involves changing the compression thus resulting in some loss of data . If the file size is reduced too much, the image quality will suffer, so one must find a balance between file size and quality. I have found that often the file size can be reduced to one tenth of the original without significant loss of quality for VSF project website purposes. See the example above. Fireworks is rather expensive but may be purchased at a reduce rate by students and teachers. Visit the Adobe Educational Store. Also, it may be downloaded on a 30 day trial.
There are free software applications that claim to provide the same function.
I am very cautious installing anything "free" on my computer. You should be very cautious as well and read reviews such as those found at cnet.com before installing on your computer.