PHOTO FILE FORMAT
There are lots 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. JPEG files are compressed so that they are a fraction of the size of other file formats.
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.
GIF and PNG should only be used for other types of web graphics such as illustrations, logos, headings and things like screen pictures.
Golden rule - Always use JPG format for photos. Never use GIF or PNG
FILE SIZE
The web can be tediously slow and web graphics and photos are the main culprit. 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 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 of 30 Kbytes
Golden Rule – Try to keep images as small as possible It follows from this that you should never have too many photos on a single page either. Another rule of thumb that all good web designers try to use is to have a web page no more than 60Kbytes in total per page if possible. This would mean no more than two medium sized photos per page. Golden Rule – Never have too many photos on any web page
PIXELS – the simplest way
The resolution of the photo does affect the size but a much simpler way of understanding photo sizes is to measure them just by pixel sizes and forget about resolution. Most web users are using computer screen of 800 pixels across or more. A good number of these 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 600 pixels. 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 do not put pictures this large onto a web page that contains text and other items.
Golden Rule – A typical good sized photo should be between 400 and 600 pixels across. Hint: How do you find out the pixel size of a photo on your hard disc? One simple way is to right click on the photo and select Properties. On the dialog select the ‘summary’ tab and it shows you the pixel dimensions.
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.
| 
