Image Processing for the web

Item 1: Digital Capture 

1. The problem with digital capture, believe it or not, has to do with resolution. In many cases, the public is oversold on the MegaPixels. Especially when it comes to imaging specific for the web, you do not need the latest and greatest and the high MegaPixel cameras. I have a 3 MegPixel Canon and it takes great pictures for most of my applications. Unless you want to make large prints greater than 8x10, you do not need the extra pixels. You will only throw them away in later processing.
2. The key item to look for is noise. You want a camera with (CCD sensor) that produces lower noise. This will insure that your image will be the best possible quality from the outset.
3. How does more pixels hurt you? When you are preparing images for the web, you are only going to need at most about 700K pixels (1024x768) screen resolution. That is for a full screen image. In most cases, you are only going to need (500x500) or 250K pixels accompanying some text and frames and banners. Therefore, you are going to throw away a lot of pixels in the processing steps. The key to quality is how you process those huge amount of pixels down to the ones you will use to put up on your web page.
4. Depending on the camera and the CCD sensors, which are the light sensitive elements inside the camera, your 6 or 8 MegaPixels probably contains a lot of duplicate data. Even a 3 or 4 Megapixel camera have much more data than you will ever need.
5. A flatbed scanner is preferable to a digital camera when digitizing a document or an original photograph or a film transparency.

Item 2: Image processing steps... 

1. Image rotation - It may be that your original photo was taken with a different orientation (landscape or portrait) mode. The first thing you want to do is to rotate the image such that the subject is right side up. Sometimes it is necessary to rotate an image a few degrees so that the subject is more appealing.
2. Image cropping - This will allow you to select only the portion of the image that you want to show. Most cropping tools are done by selecting a rectangular sub-portion of the original image.
3. Adjusting color, contrast and brightness - This is an optional and subjective step. You may want to adjust your picture to present the best conditions even though the original may not be taken with the best of conditions. For example, you may not have the correct lighting conditions. The image may be too dark or too bright or the color of the skin is off...
4. Image sharpening - This is a filtering operation that most images will require and the one most people ignore. Every image taken through a camera goes thru a lens of some kind. The physics of this operation acts to produce a low pass filter on the image. What this means is that the resulting image will be slightly blurred. The amount of blurring depends on many factors. One factor is movement. When you take a shot of something in motion, you will also get a blurring effect unless you shoot with a very high shutter speed.
   By applying a filter (sharpening) operation, you are restoring some of that blurring. In addition, it is well understood that people likes to see things in sharp contrast. One trick of professional photographers is to add some additional sharpening to their images to make the subject jump out at you.
   Here are two images - which do you prefer?
   
5. Image reduction or (resizing) - As I mentioned earlier, most images are way too large to be used in its original capture size. A reduction is necessary to fit the image to some specified bounding box. In Squidoo, that size is approximately (500x500) maximum. That is because all Squidoo pages has a border that takes up some screen space. Only about 500 pixels are left for inline images. Here is an additional wrinkle that most people don't realize. When you resize an image, it is also a "filtering" operation. As such, it also introduces some blurring. Depending on the amount of resizing, this effect could be very noticeable. Next time you see a thumbnail image on the web, in most cases you will notice how blurred it appears. That is the result of extreme resizing. The correct remedy for this is to add more sharpening in the various stages of reduction. You will end up with a better looking image, regardless of size.
   For example, if you start with an 8 MPel image, sharpen and scale down to 2 MPel, apply sharpen and scale down to 500K Pixels and apply sharpen and scale down to 125K Pixels...and so on.
6. The final step is Image compression - This step takes place when you are ready to save the processed file to disk. You will have the option to save it as a raw file or a compressed file (JPG of GIF or PNG). A JPG file is a standard compression format for images that is supported by all browsers. There is an option that is very important. It has to do with the quality of the compressed file. The reason they put this in is to allow the users to determine size vs. quality.
   I would recommend a high quality setting if you are not too concerned about larger file size. It does take a little longer to download but the better quality is worth it.

Image processing tools 

Additional Information... 

• There are some artifacts that can creep up to affect the quality of your images. One thing is called moire patterns. This can be best illustrated with this famous image.
  
  We all know what the Twin Towers should look like. The artifacts you see is the result of converting a digital sampled image.
• Pick a neutral background to show your images. Just like text is best when black text is shown against a white background, photos and images are best viewed with a black or gray background. This presents the best contrast and least distraction.
• For product shots shown on eBay or some commercial sites, it is best to select the outline of the product and edit the background to be white. This can be done easily with PhotoShop.
• Sharpening images is a good thing. Too much sharpening is not so good.
  Over sharpening of an image will create some annoying artifacts. If you start to see some halos around objects and some noise in the smooth areas of your image, then you have over done it.
• Another common confusion in the imaging world is dpi vs. ppi. In the print world they always speak of dpi (dots per inch) when they refer to resolution. In the digital capture world, the resolution is quantified with ppi (pixel per inch). The two are very different. It is a common mistake to equate dpi with ppi and therefore assume that the highest ppi is necessary to produce the best results especially when producing a printed output. It is true that you will usually need more resolution to print than to display on a computer screen. You do not need the same ppi to print on a printer designed with high dpi. For example, you do not need a source image captured with 600 ppi (by camera or scanner) to print on a HQ printer that supports 600 dpi. You can do with much less and still get a great print output. A good rule of thumb dpi vs. ppi (3:1) ratio. 600 dpi equates to approx. 200 ppi. That is to say, a good 200 dpi source image can print very well on a 600 dpi printer (given the proper image processing).

More details on Resolution... 

• A typical Computer screen has a resolution of 1024x768 with 24 bits full color. That means there are approx. 786000 pixels on the whole screen. Each pixel (picture element) consists of an RGB triplet, 8 bits of Red, 8 bits of Green and 8 bits of Blue. Each 8 bits can represent 256 shades of that color. That means there are a combination of over 16 Million possible color (256x256x256) in every pixel. The human eye can only distingush a subset of that amount.
• A typical computer screen contains some borders and banners and tool bars and misc. stuff such that the active area where the user can control is somewhat smaller. In addition, there are usually some text description that goes along with an image so that the area left for an actual image is somewhat smaller still. Assume a 500 by 400 rectangular area reserved for an image. That translate into approx. 200000 pixels.
• If you have a 5 MegaPixel digital camera with maximum resolution of 2600x1950, you will have 5070000 pixels.
  In order to display this captured image on the computer in the 500x400 screen area, you will need to reduce the image by approx. 25:1. In addition, to display as a thumbnail image (125x100) size, you will need to reduce it by 400:1.
• How does this relate to image file size? A 5 MegaPixel capture can create a file size of 15 MB (raw data).
  This is usually stored as a TIFF (uncompressed file).
  This is the best quality capture you can get from that camera. In addition, you may be able to captured/store the image file as a compressed JPG format. This may reduce the file size by a factor of 10 depending on the particular image. This will result in a file approx. 1.5 MB. To process for display, after all the reduction and sharpening process that we discussed, you will end up with a JPG file of approx. 60 KB. This is the actual data that will be downloaded from the web to appear on your screen.

Image processing 102 

• Color fidelity - It is almost impossible to match original colors of a scene or artwork to an image on a display. Even with expensive color calibrated monitors and ICC profiles, it is very difficult. What we try to shoot for is to get the "memory colors" right. WHat are memory colors? blu sky, green grass, skin tone...As long as the memory colors are right, the rest will not matter much. There are color calbration charts that contains standardized color palettes which will help in the calibration of your system. Kodak Q60A and the MacBeth color palette are two such items.
• Dynamic range - This is the distribution of the signal in the whole image. An optimum image will have a wide range of values within the image - from bright to dark and various shades in between. If an image is captured with a smaller range, it is possible with software to stretch the range to improve the appearance.
• Gamma of the monitor - Every color monitor has a specified gamma as a design specification. This "gamma curve" is the relations between an input signal value and the corresponding brightness that appear on the display. Unfortunately, there is an inherent difference between a PC/Windows monitor and a Mac monitor. This is a well know fact in the display industry but not understood by the general public. The main effect is that an image prepared on a PC monitor will look different when displayed on a Mac and vice versa.
  Ideally, there should be two different processing algorithm (one for display on a PC and one for display on a Mac) regardless where the image was prepared. That is not the case. Since most people only see images on one or the other, they are not aware of this difference. What happens due to the difference in gamma (2.2 for PC and 1.0 for Mac) is that an image prepared on the PC will look brighter on the Mac and conversely an image prepared on the Mac will look darker on the PC. If you are using a PC, to see an example, go to the NGA site and examine the images and you will find they appear dark. That is because those images were prepared on the Mac.
  Checkout the same image on an Apple Mac computer and you will see what the paintings should really look like.
• Image enlargement - Sometimes, you may only have a smaller image on hand. The rule of thumb is usually you can enlarge or scale up an image by a factor of two. For example, if you have a 3 MegaPel image, you can enlarge it to a 6 MegaPel image and still look good. It won't be as good as an image captured at 6 Megapel but for most applications, it will be sufficient and it won't contain the artifacts associated with enlarging too much.
• Image Zooming - On most digital cameras, you will find an optical zoom number and a digital zoom number. The optical zoom is accomplished with a telephoto lens. This is a true zoom. The digital zoom is done with software or image processing. Any digital zoom is really performing the image enlargement as described before. Only a factor of two is acceptable. Any larger zoom will only result in pixel replication and create a mosaic tile look. You will not see anymore details.
• Zoom feature in display - On some sites, you can zoom and look at details of a small region of an image. A great example of this is at the Museum of Fine Art in San Franscisco.
  Thinker
  This is very different. This is allowing the user to select a sub region of an image and then retrieving the corresponding region from the higher scanned resolution image and deliver that to the browser. Here you will see the details.
• Color vs. monochrome images - For some subjects, it is artistic to capture in Monochrome instead of color. It will result in 1/3 of the data storage. The human eye is most sensitive to the green spectrum. You can convert any color image to monochrome by separating the RGB file into the green channel(in PhotoShop). By making the R and B pixel values equal to the G pixel value, you can turn a color display into a monochrome display.

Summary