Using Images

Overview

Using Images Safely

GIF & JPEG files

Thumbnail Images

Animated GIF files

Macromedia Flash

Image Libraries

Scanners & Digital Cameras

INSET Course

Software:

:: Irfanview

:: ThumbHTML

Images from digital cameras & scanners

The following images were taken on a Sony Mavica digital camera. All have been resized using HTML instructions of the form

<img src="img000.jpg" width="133" height="100" border="0">

These images have not been resized in a photo editing program, hence they are really still bigger than 133x100, but are made to appear smaller by using HTML code similar to that above. This is a bit of a 'trick'; since the full size image is still being loaded, however on the page it is being artificially 'squashed' by the HTML code. Note the different loading times:

Image file	Actual dimensions in pixels	File Size in Kb	Loading Time in seconds using a 56K modem	Sample resized to 133w x 100h
img001.jpg	640w x 480h	38	6 seconds
img002.jpg	1024w x 768h	210	30 seconds
img003.jpg	1280w x 960h	129	19 seconds
img004.jpg	1472w x 1104h	266	38 seconds

So, how is the best way to display an image similar to this which you may have scanned or taken with your digital camera? The best way is to decide how big you want the image to be on your page. If we wanted the image to really display at 133 pixels wide and 100 high, then we should resize it in Paintshop Pro, PhotoShop or IrfanView. These programs have the option of maintaining the proportions of the image, so it won't become stretched either horizontally or vertically.

Such a process gives the following result - a faster loading and better looking image plus happier users with lower phone bills!

Image file	Actual dimensions in pixels	File Size in Kb	Loading Time in seconds using a 56K modem	Sample
imgresized.jpg	133w x 100h	5	<1 second