Image Processing for the web
Image Processing 101
I am a digital imaging professional. I have worked in this arena for over 20 years in my previous career with IBM Research. I am also an amateur digital photographer. I have watched the growth of digital imaging with amazement over the last few years. The technology breakthru is moving at lightening speed. However, I do observe a certain lack of basic knowledge when it comes to quality imaging on the web. I am sharing my knowledge on this topic and I hope you will find it educational and fun. I also hope you will use this knowledge to improve your digital imaging content on all your web sites.
I was part of a team that developed the award winning Heritage Museum web site. State Hermitage Museum
You can see the image quality on all the various sizes of images.
Updated: August 2015
Item 1: Digital Capture
The first step in image quality is the capture. The old addage GIGO is true. Garbage In Garbage Out. However, with the improvements in digital cameras and point and shoot models, it is not hard to take a good picture. A few tips on how to use the camera and some basic photography concepts will go a long way. You can see my guide on eBay on this topic.
- 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.
- 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.
- 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.
- 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.
- 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...
Once you have a good capture, the next step is to process it for the desired target output. These may include some of the following steps - rotation, cropping, adjusting color, brightness, contrast, sharpening, reduction and finally compression. How you do these steps, in what sequence and with what editing tools will determine the final quality of your image. I will explain each one in detail.
Compare sharpen image and original
- 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.
- 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.
- 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...
- 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?
- 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 HubPages, that size is approximately (500x500) maximum. That is because all HubPages have 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.
- 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
There are numerous image editing tools to choose from. Depending on what you are trying to accomplish, you can pick from a few good tools.
The Gold standard of image processing tool is PhotoShop. It is for the professional graphics designer and it cost quite a bit. On the other hand, if you just want to do very simple and easy adjustments, I recommend Google Picasa tool.
It is easy to use and it is FREE.
Here is the site you can go to download.
More details on Resolution...
A more detailed explanation on image 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
Some additional considerations...
- 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.80 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. This feature allows 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.
High quality images for your web pages is easy if you follow 3 simple steps...
1. Take a good picture to start with.
2. Take care to process the images by adding sharpness filtering and scale to desired size.
3. Use common sense when laying out your web page.