Graham's Graphic Tutorial

How to make your Photographs suitable for the Web

Introduction
When placing graphics in the form of photographs, on the Web, it is important to be aware of their file sizes and the consequent loading time for your visitors. It is generally agreed that a 'Home' page should not exceed 35kb to 50kb including graphics and, therefore, take not more than ten to fifteen seconds to download on an average connection. This article deals only with 'photographic' graphics (not other types like '.gif' and '.ani') for use both on the Home page and subsequent picture galleries. Furthermore it is not totally applicable to DTP nor is it a primer on how to use your graphics editor - that is a whole 'nother story and I am not conversant with every one of them that are out there. I use a U-LEAD product called 'Photo Impact' having used their 'ImagePals' which is a slightly later version of 'iPhoto Plus' which came with my scanner. 'Image Pals' was also included on the cover disc of 'Personal Computer World' of June 1998. 'Photo Impact' was included on the cover disc of PC Advisor for September 2000. In my opinion, it is much simpler than Paint Shop Pro and Photo Shop 5 and although these programs have similar functions I don't use them much. For tone adjustment it shows a histogram so that you can see where you are and you can adjust the three primaries in the same dialogue. The same editor is used in their 'Morph Studio' which appeared on the cover disc of 'CD Review' of November 1998 and, subject to checking, may be downloadable from their Web site. It has one notable disadvantage in that it is a Windows 3.x program and can only handle 8+3 filenames. Of course, to show partially corrected images in this article I need to Jpeg them - so, to be consistent, I have used a quality factor slightly higher than would be the norm for web images and I have used the same value for all the images except the very last one.
The Starting Point.
So you have got a photograph that you want to put on your Home page. It will be in one of two forms - a paper photograph or a digital camera (Digicam) image file. Either type will need some processing to make it suitable for putting on the Web. Get the photograph into the computer and save the graphic image as a non-lossy file. Tweak the image, as necessary, to get the best out of it. Rescale the image to the size that will actually be used on the Web site Create a Jpeg file of optimum quality for the purpose. We will go through each of these points showing what you need to do in respect of both paper and Digicam images. For paper originals you will need to use a Scanner to generate an image file whilst Digicams will provide their own method of downloading the camera images to the computer. To distinguish methods which are pertinent to one type, I will use 'Scanner', 'Digicam' and 'Both' to prefix the various sections where needed. I will also use the term 'image' to refer to the computer's internal representation of your photograph.
Getting the Image into the Computer Scanner
If you read the advice on the photo newsgroups, you will find that 6" x 4" postcard photographs printed from 35mm negatives will have a resolution not exceeding (by much) a value of 200 dots per inch. It therefore is unnecessary to scan the photograph at any higher dpi setting than 200. (There are exceptions to this statement but you will need to be eagle eyed to spot the difference on a fully processed image that is intended for publication on the Web.) Now work out the image size of that photograph scanned at 200 dpi: (6" x 200dpi) x (4" x 200dpi) is 1200 x 800 pixels, and the bitmap size will be: 1200 x 800 x 3colours = 2,880,000 bytes. The pixel size above is far in excess of what is needed for Web images. A Web image should not exceed a size of 640 x 480 pixels for most purposes. Even people with 17" screens (and larger) run their Browser at around 700 x 500 so that they can have other windows open on the Desktop. So we need to work backwards from 640 x 480. Now most scanners have a 100 dpi setting and this would give us a scanned image of: (6" x 100dpi) x ( 4" x 100dpi) = 600 x 400 pixels, and the bitmap size will be: 600 x 400 x 3colours = 720,000 bytes. You could try using 200 dpi scanner settings if it doesn't slow your computer down too much but be sure to rescale it to 640 x 480 max before publishing it. The higher dpi figure might yield a slightly better final image and it is worth experimenting to see if it helps your photographs when seen in the final website format. However, be aware that the work-in progress files will be four times bigger than the 100 dpi ones as you can see from the figures above. Digicam Users - set the camera to 640 x 480 rather than any larger value it is capable of and set the picture quality to 'Fine' or 'High' or whichever yields the largest image file size at the above resolution. Both Now 600 x 400 or 640 x 480 is a pretty well ideal size for larger images on a Web site. You may have wondered why I have included the bitmap size above. The reason is this: It is always a good idea to be aware of the image bitmap size when editing graphics. Many people, when they first get a scanner, will scan in a full page photograph from a book etc. at 600 dpi (because that is the main parameter that affected their choice of scanner) and then find that their graphic editor and computer is struggling to handle it. Look at the bitmap size: 10" x 600dpi x 8" x 600 dpi x 3 = 86,400,000 bytes - over 86 Megabytes! Another reason to keep the image size down is the amount of time graphic editors take to carry out their effects on the image. This also has an impact where the computer memory size is on the low side. If there is a lot of disc activity whilst a command is being carried out (other than printing) it indicates that the graphic editor doesn't have sufficient memory to handle the task with an image of that size. Some relief can be obtained by closing any other applications that are not currently needed. As a generality, the amount of memory available to the editor should be at least three times the bitmap size of the image it is editing. When you have scanned the photograph into the computer and have a screen image you need to save this image to a file straight away so that you always have the original to return to should an editing session go wrong or the computer lock up etc. Furthermore the file format you choose should be a 'non-lossy' type - Jpeg is a lossy format, detail and nuance is thrown away in the endeavour to make the filesize smaller and artefacts are generated. This is OK but you must only do it once at the end of the cycle. (Digicam images at 'High' Jpeg quality will not suffer (much) from the effects described above.) The 'non-lossy' format I use most often and is included as standard on lots of graphics programs is '.PCX'. PCX is a compressed format so it saves on disc space against '.BMP' which is an uncompressed non-lossy format (there is an RLE version of the BMP specification but I don't think I have ever seen one). Even Windows 'Paint' program can handle PCX - it calls it PC Paintbrush which is the application that first defined PCX. In years to come, I guess we will be using '.PNG' when most people are using compatable web Browsers. Having saved the image to a disc file, it is important that you don't edit it! What works best is to use 'Save As...' and give the new file a slightly modified form of the original filename. E.g. if the original name was 'family_xmas99.' then use 'family_xmas99a.' as the new name. This is the file that you will edit in the following sections. Digicam Users - Your downloaded image file can serve as the original, un-edited file but you still need to create and save a non-lossy file as above. You can take the opportunity to give the file a meaningful name like 'family_xmas99a.' at the same time. Both - We are now in a position to move to the next step of producing an image suitable for publication on the Web. Tweaking the Image* What we need to do here very much depends on the subject material and quality of the raw image but there will be least a couple of things that need doing to the image from the list here: Despeckle the image to remove random noise pixels. If needed, lift the 'whites' to show as white. If needed, lift the mid-range tones to get a better exposure of the subject. If needed, lift the black level and dark tones to show dark detail. If needed, colour-correct the image to remove colour-casts. As required, crop and/or resize the image. Sharpen the image either a little or a bit more. Finally, convert the image to JPeg format at optimum quality. So let's go through the rationale of these steps in the endeavour to produce a good image for the Web. To help illustrate the effects and demonstrate the procedure, I am showing a 'not-so-good' digicam photograph I took in the spring of a Rhododendron flower in the garden. This shrub enjoys the shade of a close-by apple tree and consequently is not an 'easy' subject to photograph. This picture is one of a series where I changed the exposure settings on each shot to try and get a good picture from the series and this is one of the rejects. Bear in mind that these images themselves have been prepared for the Web so are not exactly as I see them on my screen. Here it is as the original image: It can readily be seen that it is lacking in exposure and the only parts that are white are the bits of sky revealed through holes in the tree canopy. But the first job is to 'Despeckle' it. The Despeckle process looks for pixels that are wildly different from their neighbours and when it finds one it replaces it with a value that is obtained from the surrounding pixels. Now you will be hard pressed to see the difference in the images (the despeckled one is just below) but there is already a reduction in the filesize of some 15%. The reason for this is that Jpeg filesize is sensitive to the amount of detail in the image. Large bland areas compress very well, but if there are random pixels having very different values then the Jpeg compressor has to allow them to show - hence a larger filesize. Here is the despeckled image: This image is virtually identical to the previous original but the despeckling process has slightly softened a little of the original detail (clue - look at the leaf at the lower right and compare it with the previous picture). We can do something about this softening later. The next job is to correct the exposure. This 'dim' picture is about 1 or 1.5 /f-stops underexposed and consequently the only true whites are the little patches of white sky in the foliage. Since these are both small and irrelevant it won't matter if we ignore them when setting the 'white' end of the image's exposure range. One terminology for this correction is called 'Tone Adjustment'. Here is the 'highlight' tone adjusted image: Now we can see a real change to the image. It has improved to the stage of being like a correctly exposed but not very good picture! What is lacking is that it doesn't 'sparkle'. There are two components to this - get the subject to stand out a bit and make sure it is crisp. To bring the subject out we need to deal with some midtone correction. This is also the same as 'gamma' correction and can make a dramatic improvement to the look of an image. Midtone correction can change the mood of an image as well. It can make a photograph taken on a dull day look as if it was taken on a bright day. Here is the Midtone corrected image: You will see that the flower and leaves stand out a bit better and also that the colour saturation of the pink has dropped off a little. This is correct because the flower is not as strongly pink as the earlier images portrayed it; in fact a five day old flower bleaches to nearly white. The colour shown now is very close to the real thing and I haven't needed to tweak any of the colours individually to reach this point. This image doesn't require any dark tone correction so the last remaining task is to sharpen the image. The despeckling process robbed the image of a little sharpness and now we can put it back. We can also help to correct for the camera and scanner's limitations that lead to a soft image. And, lastly, we can help to compensate for the Jpeg process's loss of image detail by emphasising the sharpness ahead of the final Jpeg creation. Here is the Sharpened image: Now you can see that the detail has been restored to the leaf at the lower right and the little rain drops from an earlier shower are more clearly shown on the flower petals. (The narrow haze of greenish pixels at the left edge are an artefact from my camera and is one reason that this under-exposed original was a reject.) Sometimes, sharpening after the resizing step works better but this is dependent on your source photograph and the scaling factor in use. Experiment, try both ways. You may find some images need sharpening both before and after resizing. There remains one last task to perform and that is to crop/resize the image to suit our needs. As mentioned earlier there is a benefit to constraining the image's filesize and one factor that has a great bearing on this is the size of the image. Always rescale the image size in your editor to the size that you want it displayed on the Web. Always use the <IMG> tag's 'height=' and 'width=' attributes and set them to the actual size of the image as this allows your visitor's Browser to reserve the right amount of screen space for it when it composes your page and this stops the text jumping about as the images are loaded. Don't use them as a scaling method to show the image at any other size. Make an image fit the space available for it by resizing the image in your editor, NOT your visitor's Browser. Here is the cropped and resized image:

	Resizing an image can effectively make it look sharper - the opposite of the obvious softening effect that happens when you enlarge a picture. But watch out for jaggy diagonals in the resized image. The various graphics editors have different algorithms for resizing some call it 'resampling' - try them all. There is an advantage to be had if you can resize by a simple fraction like 3/4 or 2/3 or 1/4 etc. These simple numbers can be more easily dealt with by the editor in producing the reduced image and, generally, a better quality image at the reduced size results.
At this stage you should consider if you are going to provide a 'thumbnail' on a gallery page that will link to this image. I generally use gallery pages having not more than around 16 thumbnails of 1/4 size (160 x 120) on each. My thumbnails generally come out at around 2.5 to 3 KB so 16 of them means the gallery page will be around 40 to 48 KB and thus within the 50 KB size generally recommended. This page in my Photography section is typical of a gallery thumbnail page. After producing the scaled image, see if it needs any further sharpening All the images above have been Jpeg'ed at a constant quality value as noted earlier. Here is the final image at the optimum compression:
	I use JPeg Optimizer from http://www.xat.com/ which is a fine utility designed just for this purpose. It shows you two windows - one having the original image and the other having a view of what it will look like after it has been saved as a JPeg image file using the current settings of quality (JPeg speak for compression). The key to setting and getting the optimum compression is to reduce the quality factor a bit at a time until you can see a small amount of quality loss in the output image. At this point, you may decide to ease off a little or leave it as is. I usually leave it at the point where I can just see a little loss of quality in the knowledge that I have achieved a small filesize.
If there are some small areas that suffer a quality loss, there is a facility whereby you can pull out a box with the mouse cursor and the area inside will be restored to a higher quality. There is no point in leaving the quality setting at the default quality factor because that is much too high for the Web and is more suitable for internal uses like saving a file for later printing out. The title bar of the output window shows the current filesize. Finally, a note on where to use JPeg and '.GIF' images. JPeg is much the preferred format for photographs and for graphics where there is a gradual shading of colour. My Home page logo is a JPeg image. But where the graphic is composed mainly of large areas of a single colour then '.GIF' is by far the best. For those graphics that fall in-between, your best advice is to try it both ways. Be aware that JPeg can 'spoil' the sharp outline of text by introducing artefacts and you may need to use a higher quality factor to prevent the loss of visual quality. I hope you find this article useful and I would be pleased to receive feedback about it. Back to Homepage Please send comments and/or questions to Text and photographs Copyright (c) GC Wood 1999,2000,2001.