Chapter 8

Let me establish a simple scenario that you may have already experienced yourself. You have collected a number of images using your digital camera (a 3.34 megapixel in this demonstration) and downloaded these images to your computer. You view these images in an application (e.g., iPhoto) and then export an image you really like for presentation on a web page. When opened in a web browser, the image is huge and not at all what you expected. Why did this happen?

Here is my attempt at an explanation and then a discussion of some related issues. A digital photo contains a specific amount of image data. The camera I described captures 2048 by 1536 pixels of image data (think of this as the colored dots making up the image). These images can be displayed or presented using various devices (printers, monitors) with different resolutions. Resolution is the number of pixels presented per unit of measure. I translate this as the physical size used to display each pixel and what it means is that the same image will not appear as the same size on all devices. Images with lower resolution (fewer pixels per inch) will display the image as larger than a device with higher resolution.

The assumption seems to be that the images taken with my camera will appear as a rectangle 6.83 by 5.12 inches. However, this assumption requires that the device be capable of 300 pixels per inch. My computer monitors are not capable of this resolution. On my laptop, I can generate an image of about the right size by converted the pixels per inch to 90.

Here is my attempt at a demonstration.

The image below is 2 inches by 1.5 inches at 300 pixels per inch. My guess is that is appears much larger on your monitor.

The following image was generated from the same file, but saved at 90 pixels per inch. I am assuming it will appear closer to 2 x 1.5 inches on your monitor.

If you want to test my claims, copy the two images to your own computer and use a graphics program to determine the size of the image (not the size of the image file). Both images should be 2 x 1.5.

Why bother saving a file with higher resolution? Higher resolution really means more information is available for the same abount of space. If you have a device capable of applying this amount of information to this amount of space, you would have higher quality. One situation in which this may be the case would be when the image was printed. Quality printers are capable of displaying higher resolutions and this is why the image from a 5 megapixel camera looks better than the same image taken with a 1 megapixel camera.

One reason you may encounter the situation used to begin this scenario (the image you view in a graphics application such as iPhoto not appearing as you expected in a web browser) is that some graphic applications adjust what you see to the reality that you are looking at an image on a computer monitor. What you see is not what you get (from the file).

I can make the web brower display the first image included on this page at a specific size (180 x 135). The problem with doing this is that it requires that you download the much larger file and this could be an issue if many images were being sent or your connection was slow.

Image Quality and Lossy Compression

I assume that the great majority of web images are saved in the jpg file format. jpg is described as a lossy file format because when it is used to "compress" files it does so partly be reducing the quality of the data that is stored and available to the application that will eventually display the image. Most graphics programs allow the user to control the extent to which these compression techniques are applied. More severe compression generates a smaller file of somewhat lower quality. The issue becomes can the viewer detect the differences or perhaps how much deterioration will the viewer find accaptable. Below are three images saved at the maximum, high and medium compression settings available within "Photoshop Elements." The image on the right is 80% of the file size of the image on the left.

Return to Chapter 8

You Don't Always See What You Get:

Comments on Resolution, File Size, and Lossy Compression




	You Don't Always See What You Get: Comments on Resolution, File Size, and Lossy Compression Let me establish a simple scenario that you may have already experienced yourself. You have collected a number of images using your digital camera (a 3.34 megapixel in this demonstration) and downloaded these images to your computer. You view these images in an application (e.g., iPhoto) and then export an image you really like for presentation on a web page. When opened in a web browser, the image is huge and not at all what you expected. Why did this happen? Here is my attempt at an explanation and then a discussion of some related issues. A digital photo contains a specific amount of image data. The camera I described captures 2048 by 1536 pixels of image data (think of this as the colored dots making up the image). These images can be displayed or presented using various devices (printers, monitors) with different resolutions. Resolution is the number of pixels presented per unit of measure. I translate this as the physical size used to display each pixel and what it means is that the same image will not appear as the same size on all devices. Images with lower resolution (fewer pixels per inch) will display the image as larger than a device with higher resolution. The assumption seems to be that the images taken with my camera will appear as a rectangle 6.83 by 5.12 inches. However, this assumption requires that the device be capable of 300 pixels per inch. My computer monitors are not capable of this resolution. On my laptop, I can generate an image of about the right size by converted the pixels per inch to 90. Here is my attempt at a demonstration. The image below is 2 inches by 1.5 inches at 300 pixels per inch. My guess is that is appears much larger on your monitor. The following image was generated from the same file, but saved at 90 pixels per inch. I am assuming it will appear closer to 2 x 1.5 inches on your monitor. If you want to test my claims, copy the two images to your own computer and use a graphics program to determine the size of the image (not the size of the image file). Both images should be 2 x 1.5. Why bother saving a file with higher resolution? Higher resolution really means more information is available for the same abount of space. If you have a device capable of applying this amount of information to this amount of space, you would have higher quality. One situation in which this may be the case would be when the image was printed. Quality printers are capable of displaying higher resolutions and this is why the image from a 5 megapixel camera looks better than the same image taken with a 1 megapixel camera. One reason you may encounter the situation used to begin this scenario (the image you view in a graphics application such as iPhoto not appearing as you expected in a web browser) is that some graphic applications adjust what you see to the reality that you are looking at an image on a computer monitor. What you see is not what you get (from the file). I can make the web brower display the first image included on this page at a specific size (180 x 135). The problem with doing this is that it requires that you download the much larger file and this could be an issue if many images were being sent or your connection was slow. Image Quality and Lossy Compression I assume that the great majority of web images are saved in the jpg file format. jpg is described as a lossy file format because when it is used to "compress" files it does so partly be reducing the quality of the data that is stored and available to the application that will eventually display the image. Most graphics programs allow the user to control the extent to which these compression techniques are applied. More severe compression generates a smaller file of somewhat lower quality. The issue becomes can the viewer detect the differences or perhaps how much deterioration will the viewer find accaptable. Below are three images saved at the maximum, high and medium compression settings available within "Photoshop Elements." The image on the right is 80% of the file size of the image on the left. Return to Chapter 8