PHOTOGRAPHY ON THE WEB

The old saying 'a picture is worth a thousand words' remains as true as ever. Pictures and graphics are one of the main reasons for the success of the web and are one of the best ways to make an attractive web site.

There's a dilemma that faces everyone when putting photos on the web. You want nice, large, high quality photos because that makes your website attractive but those result in very large files. On the other hand you want small size files so that your visitors don’t get frustrated waiting for the page to view. So how do you solve this dilemma?

This website will explain everything you need to know about putting photographs on your website and at the same time it will de-mystify the jargon.

Throughout the website there are highlighted 'golden rules' that if you follow you are almost guaranteed to get the best quality photographs, as well as the fastest possible website.

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.

The File Uploader in 350pages compresses the file upon upload to give you an ideal file size for the web. You have the choice of photo sizes of small, medium, large and extra-large and you can see the resulting file size.

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.

Using the File Uploader in 350pages you have the choice of small, medium, large and extra-large, being 400, 600, 800 and 1000 pixels across the longest side.

Golden Rule – A typical good sized photo should be between 400 and 600 pixels across.

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.

PHOTO RESOLUTION FOR SCANNED PHOTOS

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, typically for printing on high resolution printers. High resolution means a large file size, and so most typical files from scanners are unsuitable for use on web pages (Modern digital cameras produce equally large files, typically many thousands of pixels across which are also too large for websites).

Photo resolution is measured in dpi (dots per inch). 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 4" by 6" photo and you want it to come out about the same size on your web page (which is probably too big) 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 these result 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. Also, if your image is more than 1000 pixels across it’s almost certainly too large for use on the web.

However, if you do scan in your photo too large then the File Uploader in 350pages will compress the file for you.

Golden Rule – scan printed photos at 72 to 100 dpi. Higher resolutions if you want to enlarge just a portion of a photo.

CUMULATIVE DISTORTION

This is a result of applying a number of photo operations to the same photo, one after another. Because each time you load and save a JPG photo it distorts very slightly; the more often you do this the worse it gets. Worse, if you perform other operations such as rotating, brightening or even enlarging or reducing a photo this also distorts the image each time the operation is applied. The more you change the photo, the worse it gets.

You'll be pleased to know that the Photo Editor in 350pages always uses the original whenever you edit the photo so your photos will not suffer from cumulative distortion.

However, if you are using photo editing software external to 350pages then the solution is to use the original photo always whenever you want to change it - do not use one that you've already altered and changed. Secondly avoid loading an image, doing a few operations on it, then saving it, then loading it again to do some more.

Golden rule – When using photo editing software external to 350pages, always apply editing operations to the original photo and not to one that has already been processed or edited. Always keep a copy of the original just in case.

DESIGN GUIDELINES

Golden Rule - Try to make photos the same width when used on the same page, especially if they are in a row or column.