We will look at sizing and preparing images (especially digital camera photos) and the kind of file to save for uploading to the website. A limited amount of technical background is covered to better understand the process.
Preparing images involves essentially the following steps:
|
The golden rules of images |
- Rule 1 - Smaller files are better
- Rule 2 - Beauty is in the eye of the beholder
- Rule 3 - If in doubt - smaller is better
Our goal is to achieve the smallest file size consistent with the desired image quality
How small and why?
Simply because smaller files download faster.
Usability experts maintain that the average user will stay on a web page for 8 - 10 seconds.
Files should be small enough to be able to load the entire page in under 10 seconds.
According to Australian Bureau of Statistics, 40% of households in Australia connect to the internet via dialup modem. Most of these are 56k [kilobits per second] dialup services. This means that the total page size needs to be less than around 60kb [kilobytes]. A standard DotNetNuke page overhead (i.e. layout script) is around 20kb therefore the images on a page should ideally be less than 30kb.
Anecdotal evidence for mobile users suggests that download speeds may be relatively low. e.g. 
A postcard size photo at 3.5mb [1 megabyte = 1,000kb] resolution generates a jpeg file of around 750kb. i.e. probably about 20 seconds of download time.
Image quality!
You are the only person who can decide whether image quality is acceptable or not.
When using jpg, jpeg or gif files the size of the file is dependent on the dimensions of the image (width and height) as well as the range and complexity of colours contained in the image.
Some slightly technical stuff about image files.
Computer screens display colours using pixels, the picture elements that make up an image, similar to grains in a photograph or dots in a half-tone. Each pixel can represent a number of different shades or colors. Most computer displays are 800 x 600 and therefore more than 1.4 million bits of information are required to make up the display. An image file needs to contain all of this information. To make file sizes smaller, image editors devise algorithms that sample blocks of colour in the image. Only the samples are retained in the resulting image. When the image is loaded in teh browser, the browser executes a process kwown as interpolating. The missing pixels are inserted in to the image based on the colour of the surrounding pixels.
By saving and resaving image files or by using software that "samples" images with subtle colour changes such as landscapes, seascapes and sun sets tend to deteriorate more than images with sharp contrasting colours. e.g the detail in the centre of this image has come up better than the surrounding areas in this file. The advantage of the poorer quality image is that the download time is less than 1/3. For some applications this may be a good compromise.
File types
There are many image file types available. The three mosr popular types for the web are JPG, GIF and PNG. I found most of the information for this table to provide a simple comparison for deciding which file type to choose at www.microsoft.com
| Description |
JPG |
GIF |
PNG |
| Number of colours |
Millions |
256 |
Millions |
| Interlace i.e. improves the user experience by appearing with a poor resolution image and then improves as the rest of the image arrives. |
No |
Yes |
Yes |
| Transparent background |
No |
Yes |
Yes |
| Colour Photos |
Yes |
Poor |
Yes |
| Black and white photos (i.e. up to 256 shades of grey) |
Yes |
Yes |
Yes |
| Summary |
Useful to control file size by adjusting image quality |
Best for a few distinct colours, line art graphics and well defined shapes |
Not supported by all browsers. Requires a plug-in to work. |
| Technical Details |
|
|
PNG-8 offers 8 bit colour support and efficiently compresses solid areas of colour while preserving sharp detail, such as that in line art, logos, or illustrations with type. PNG-24 offers 24 bit colour support and preserves the broad range and subtle variations in brightness and hue found in photographs. |