Page 

Background

There are just a few basic rules you need to follow in order to get the best from your photos on the web.

Photo file formats

There are dozens of different ways of storing photographs, each with a different file type. However on the web there are just 3 main file formats that are used for graphics, and only one is designed specifically for photographs. This format is the JPG, pronounced 'jay-peg' and has a .JPG or a .JPEG label or file type.

The other two types of file sometimes used for photos, but more often for other types of graphics, are GIF and PNG, rather oddly pronounced 'jif' and 'ping'. These formats are not good for photos because they produce files that are much larger. They are not formats designed for photographs. If you have a photograph that's in GIF or PNG format then convert it to JPG - the Modules photo editor can do this.

GIF and PNG should only be used for other types of web graphics such as illustrations, logos, headings and things like screen pictures.

The web can be tediously slow and web graphics and photos are the main culprit. Small is beautiful when it comes to files on the web. The smaller the file the faster your website will download and the better the experience will be for visitors to your website. JPG files are far and away the best way to produce the smallest files while maintaining the best quality. So how big should a typical JPG file be? There's a rule of thumb that says any image much over 30Kbytes is not a good idea.

There's a simple way to estimate how long it will take for a visitor to see a picture. Assume that most users are using a standard modem and typically that means they will be able to download pictures at about 3 Kbytes per second. So a 30K image will take around 10 seconds to view. So you can see why having even a few medium sized photographs can make your website very slow. How big is a 30K byte picture?

A typical example photo, 30K bytes

It follows from this that you should never have too many photos on a single page either. There's another rule of thumb that all good web designers try to stick to and that's to have a web page no more than 50k in total per page if possible. This would mean no more than one medium sized photo per page.

Thumbnails

There is a way around this size dilemma, and that's to use thumbnail photos. These are small photographs that are quick to download, but allow the visitor to click on them to see a larger version. Being really small means their file size is small and so you can have more on your web page without slowing it down. The visitor can then choose to view the photos that interest them, one at a time, and so decide whether or not to view and wait for the big versions of the photo. The Modules 'Smart Photos' will automatically create thumbnail and large versions of the same photo for you website. This is explained in detail later.

Photo resolution

This is one of the trickiest areas and the source of most problems when trying to get photos on the web. Scanning photos is one of the most popular ways of obtaining photos, but scanners have been designed to capture very high resolution images indeed, typically for printing on high resolution printers. High resolution means large file size, and so most typical files from scanners are unsuitable for use on web pages.

The rule of thumb to remember when scanning photos is to scan at around 72dpi to 100 dpi as that's the approximate resolution of your computer screen. So if you have a 5" by 7" photo and you want it to come out about the same size on your web page (which is probably too big to be honest) then scanning at 72dpi will be about right. Typically modern scanners can scan at 300dpi or more and produce huge files. Increasing the resolution can make a huge difference to file sizes. 300 dpi is more than 4 times the 72 dpi resolution, but because a photo is square this results in files than are typically 16 times the size!

The only reason for scanning at resolutions higher than 72 dpi is when you want to enlarge a photo or a part of a photo.

Scanning at over 200 dpi is almost always too high a resolution. If you don't want to bother about resolution and find it all too confusing, then stick with this simple rule of thumb; If you're producing a JPG file that's more than, say 100k, that's almost certainly too big for the web.

When to scan at higher resolutions

If you want to show just a part of a photo, or you plan to use photo thumbnails that open a separate window onto a higher resolution version, then it can make sense to have larger files. Also sometimes it's better to have a larger, higher resolution photo and reduce its size before you use it on the web - this can produce better quality images. The Modules 'Smart Photos' system can accept larger images and reduce them to be the right size for the web.

Pixels - a much simpler way

A more straightforward way of understanding photo sizes is to measure them just by pixel sizes and forget about resolution. At least 80% of all web users are using computer screen of 800 pixels across or more (you can find out exactly what pixel size screens visitors to your website are using with the RealTracker Module). 60% have screen sizes of exactly 800 pixels across, so you can see that making photos larger than 800 pixels across is probably not a good idea.

So how large is a 'typical photo'. There's no such thing of course and it depends on whether you want to use the thumbnail feature or not. But assuming not, then a photo 200 pixels across will take a quarter of the screen width on most computer screens. 400 pixels would be half the screen width and so a guideline would be not more than these values. There's nothing stopping you having photos that fill the entire screen of course - and if you're using the thumbnail technique then the 'enlarged' version might well be that large, but please do not put pictures this large onto a web page that contains text and other items.

© Charles Moir 2002