Preparing a Digital Still Image for the Web

Our discussion of binary numbers, hexadecimal numbers, pixels, camera image sensors, and computer display screens gives us the background necessary for understanding why digital images need to undergo preparation for Web presentation.

Resizing an Image for the Web

In resizing an image for the Web we consider two things:

1. The target screen size
2. The size of our web page on that screen

We can generally assume these days that desktop and some laptop computer screens will have pixel dimensions 1920x1080. iPads and smart phone screens generally have smaller pixel dimensions. (but they, too, are heading the direction of HD). What size will our webpage be in which the picture will be placed? We get to make that choice.

Suppose after considering these two issues we decide to make our picture 600 pixels wide and constrain the proportions so that the picture height is computed automatically. We can do this with many different photo manipulation programs. Just remember:

• Start with a copy of your original (you do not want to lose the full resolution of your original picture).
• When you are resizing, be sure to select "pixels" rather than "inches" or "centimeters" as your metric. Pixel dimensions are for screens, inches and centimeter dimensions are for print sizes on paper.
• Also when you are resizing, be sure also to select "constrain proportions."
• Save the image as described in the next section.

Resizing an image to smaller dimensions will naturally reduce the file size of your picture as there will be fewer pixels to save.

Compressing an Image for the Web

Actually, compression is done automatically in the sense that you must save your image file by way of some compression scheme. The file extension gives the type of compression you are using, such as .jpg, .tif, .png, and so forth. You can read about the many file compression types here.

For some however, jpeg in particular, you get to choose how much compression you would like to have administered to your image. You can usually get a good result by choosing to compress at about 80% of best quality. Once you save your file at that level you have successfully resized and compressed your file for the Web.

Codecs

Codec stands for "compression-decompression" algorithm." Compression is done by a cleverly designed program that reduces the file size of an image without changing its pixel dimensions. There are many tricks and techniques for accomplishing compression, and many are proprietary. In every case the compressed file is not just a file of pixels that can be displayed on a screen. In order for a coded picture file to be shown as a picture on a screen, it must be decoded--that is, reformulated from its encoded form back to just a matrix of hexadecimal pixel values that can be displayed on a screen. That means that every algorithm that does the coding must also have a decoding component.

As an example, each time you open a jpeg image, such as dog.jpg, to view on your screen, the program that you open the file with must invoke the jpeg decoder program to allow that image to be displayed on your screen. If you modify that image and resave it, the program that you are using for the image manipulation must invoke the jpeg coder program to re-code and save the picture.

Lossless Compression

Some codecs are lossless. This means that they code the picture file in such a way that its files size is reduced, but also such that the decoder portion of the codec can restore all of the pixels as they were in the original file. It can do this by, say, locating strings of adjacent pixels that have the same color value and replacing those strings with some code like 5*FF0000, meaning that 5 pixels in this row from this point on all have the color code #FF0000. This would replace four of the FF0000 strings (or 24 Hex digits) with the much shorter 5*FF0000 code. Of course, in doing this, this new file could no longer directly be displayed on a screen, because the file is no longer a file of just pixel colors. So, when the file is to be displayed, the four FF0000 strings are reinserted into the file as part of the decoding process.

Although this example illustrates how lossless compression could work, such compression algorithms are much more complex and clever than this.

Lossy Compression

Some codecs are lossy. This means that when the code an image file to make it smaller, they actually do it in a way that removes some of the detail in the image. That is, the accompanying decoding portion of the algorithm cannot restore all of the color detail that was in the image before it was coded. Lossy compression algorithms can thus generally produce much smaller files than lossless compression files, but at the sometimes-severe cost of loss of detail upon decoding. As an example, during lossy coding an algorithm might average pixel colors in an area of 5 pixels wide and 5 pixels high, replacing the color of each of the five by five pixels with the averaged color. Then, the coder replace those 25 individual pixels that all now have the same color with something like 25*F3448C, similar to the example above, thus reducing the file size by a factor of about 25. Of course, when the file is decoded, the pixels cannot be "unaveraged" so that square of pixels will be rebuilt to all have the same color, namely F3448C, rather than the different colors they represented before coding.

Although this example illustrates how lossy compression could work, such compression algorithms are much more complex and clever than this. But they still do lose detail. The "holy grail" is to find ways to code such that the detail loss is not easily discerned by the human eye.

A Workflow Example

The figure below shows the results of preparing the image at the top of this page for display in this page. Three versions of this image were manipulated that resulted in the fourth image used for the Web. The results are displayed

by using the "get info" feature of the Mac.

1. The first image is the "camera raw" version as it was recorded with a Canon 7D camera. As can be seen, its dimensions are 5184 by 3456 pixels. Its file size is 26 megabytes. The file type is CR2, which is produced by a Canon proprietary lossless codec. The file size would be much larger if this file were not compressed at all.
2. The second image was produced by saving the CR2 file as a JPEG file an the maximum quality setting. Although jpeg is lossy, this version does not lose much quality. However, one can see that although the dimensions are still 5184 by 3456 pixels, the file size has been reduced by half to 12.7 megabytes.
3. The third image was produced by resizing the dimensions of the second image to 600 by 400. The resulting file, saved at the maximum jpeg quality is now much smaller at 334 kilobytes. The file size saving comes from having to save information for only 600x400 pixels (24,0000 pixels) rather than 5184x3456 pixels (about 18 million pixels).
4. The fourth image was produced by simply saving the image of 3 at with more compression (about 80% of maximum quality). This did not change the pixel dimensions, but it did cut the file size nearly in half with little noticeable loss of quality when the image is not blown up.