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. 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
---------------------------------------------------------------------------------------------------------------------
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, 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.
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.
Golden Rule – scan printed photos at 72 to 100 dpi. Higher resolutions if you want to enlarge just a portion of a photo.
---------------------------------------------------------------------------------------------------------------------
JPEG – QUALITY AND COMPRESSION
Another confusing area is that JPG files are compressed. In fact the whole benefit of JPG files and the reason for the format being invented was to enable photos to be compressed so they take a fraction of the file space the would otherwise require.
The reason JPG format is better than GIF or PNG format is precisely because they compress much better in this format without losing quality. Most scanning software or digital cameras have a quality or compression control that varies the degree of compression. Too much compression and you lower the quality of the photo (but it makes your website quicker to view).
You should try to create the smallest file size, which means the highest compression level that produces a photo quality that you can accept. It's not uncommon to find JPG photos that are far larger than necessary because they have not used the optimum compression level. This means a slow website. It's a balance between quality and speed, you want both, but unless your photos are really small you can't have both.
Most photo processing software allows you to control the JPG quality. This is sometimes expressed as a quality level between 1 and 100% and sometimes as a compression level between 1 and 100. These two are usually the same scale but the opposite way round. So a quality level of 75% will be the same thing as a compression level of 25. And this number is nearly always the optimum number. You might think 100% quality is what you want, but as you can see from the above examples, this is just wasteful and makes for unnecessarily slow download speeds. What's more there is typically no perceptible difference in the quality settings higher than 75%. Hint: A quality setting of 75% doesn’t mean that the perceived visual quality is 75%. Typically 75% JPEG quality is indistinguishable from the original – this is why JPEG format is so effective.
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.
The solution is to use the original photo always whenever you want to change it - do not use one that you've already altered or 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 – 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 GUIDLINES In addition to the rules regarding image size above, there are a couple of simple rules that will make your web pages look better.
Golden Rule - Try to make photos the same width when used on the same page, especially if they are in a row or column.
© Charles Moir 2002
| 
