Working With Images
When working with digital images, the goal is always to
produce the best looking image at the proper data size for the delivery
media (print, the world wide web, CD-ROM, etc.).
The quality and data size of digital images depends on a number of factors. For our purposes, we are going to focus on the relationship among the following three attributes: compression, resolution, and dimensions.
The information in this section is divided into the following categories:
Compression refers to how a computer encodes and decodes file data. For example, a computer could read the following binary code in the following ways:
The compressor being used serves as the translator of information, encoding and decoding information so that it can be transferred among computers much more quickly. Remember, today's computers can think things through very quickly, but most information has to flow from a floppy disk, through a telephone line, from a CD, or through network before a computer can process it. These transportation media, rather than the computer processor, are what can create the experience of slowness.
Images contain relatively large amounts of information. To transfer image data quickly over the world wide web or through CD media, two common compressors are often used: JPEG and GIF.
GIFs produce lower quality images with fewer colors. However, they are very useful because they can have irregular borders and can be animated.
JPEGs produce higher quality images with more colors and nearly equally small data sizes but cannot have irregular borders or be animated. Because of the image quality, we used JPEGs for Fading Footprints.
Resolution refers to the number of pixels (dots of color) horizontally and vertically. Television, for example, has a resolution of 640x480: 640 horizontal dots across and 480 horizontal dots down. Images with greater resolution are sharper.
Dimensions refers to the size of the image as it appears in electronic media or on the printed page. An image with a low resolution will look clear if it has small dimensions. Inversely, it will appear pixelated (blocky) if it has large dimensions.
Dimensions, like resolution, are often defined in pixels. This can be confusing at first. It might be helpful to think of larger dimensions as similar to holding a magnifying glass up to a comic strip picture. The picture is larger but it becomes more obvious that it is made of dots of color. Images with larger dimensions (seen through the magnifying glass) have greater size but the amount of information doesn't really change. Each bit just gets bigger.
In the example below, an image with a resolution of 50x65 is displayed using dimensions of 50 pixels across and 65 pixels down. It looks relatively sharp. The second image is actually the same picture with the same resolution of 50x65. In the second image, however, the same amount of data is magnified to fill up the dimensions of 150x195 pixels on the computer screen. Consequently, you can see the actual pixels.
Print Media, Digital Media, and Resolution
Different media deserve different data sizes. Images for print media, for example, should be highly resolved so that they can print clearly at large dimensions. Images for print should be at least 300 pixels per inch. If one wants to print an image that is 3 inches by 5 inches, then it should have a resolution of 900x1500.
Images for the world wide web should have data sizes that are as small as possible so that image information can be transferred quickly over the internet. The world wide web's standard display is 72-96 pixels per inch. To get the maximum image quality, therefore, images for web display only should be created at 72-96 pixels for every inch of the screen that they are to occupy.
For Fading Footprints, we wanted both a clear screen image as well as a printable image. Since CDs transfer data much more rapidly than the internet we chose to create images that were 150 pixels per inch in resolution, and sized on the screen at smaller dimensions.
Setting Resolution and Compression
The resolution and compression for digital images is determined by scanning or photo editing software. For PCs, Kodak Imaging is included free of charge with most operating systems and can be used to determine the resolution and compression for JPEG images. On Apple computers, iPhoto allows users to set the resolution and compression for JPEGs as well.
Setting the Dimensions
The dimensions for images displayed in internet browsers is determined by the web authoring tool. In Composer, for example, one can determine the dimension of an image being displayed by setting its attributes in the dimension sub menu pictured pictured below:
The quality and data size of digital images depends on a number of factors. For our purposes, we are going to focus on the relationship among the following three attributes: compression, resolution, and dimensions.
The information in this section is divided into the following categories:
Compression
Resolution
Dimensions
Print Media, Digital Media, and Resolution
Setting Resolution and Compression
Setting the Dimensions
Putting It All Together
Resolution
Dimensions
Print Media, Digital Media, and Resolution
Setting Resolution and Compression
Setting the Dimensions
Putting It All Together
Compression refers to how a computer encodes and decodes file data. For example, a computer could read the following binary code in the following ways:
|
Original Code: 1100001111000 |
The simplest way to represent this data
is pictured to the left. The code contains 13 characters and requires
13 bits of data to be communicated. |
| Compressed Code: B1D0D1C0 |
The compressed code to the left actually represents
the same original code using only 8 bits of data. In this example
the letters represent the number of times the subsequent 1 or 0 is
repeated. |
The compressor being used serves as the translator of information, encoding and decoding information so that it can be transferred among computers much more quickly. Remember, today's computers can think things through very quickly, but most information has to flow from a floppy disk, through a telephone line, from a CD, or through network before a computer can process it. These transportation media, rather than the computer processor, are what can create the experience of slowness.
Images contain relatively large amounts of information. To transfer image data quickly over the world wide web or through CD media, two common compressors are often used: JPEG and GIF.
GIFs produce lower quality images with fewer colors. However, they are very useful because they can have irregular borders and can be animated.
| GIF with Irregular Border |
Animated GIF |
|
|
JPEGs produce higher quality images with more colors and nearly equally small data sizes but cannot have irregular borders or be animated. Because of the image quality, we used JPEGs for Fading Footprints.
Resolution refers to the number of pixels (dots of color) horizontally and vertically. Television, for example, has a resolution of 640x480: 640 horizontal dots across and 480 horizontal dots down. Images with greater resolution are sharper.
| JPEG at 150x195 |
JPEG at 50x65 |
|
|
Dimensions refers to the size of the image as it appears in electronic media or on the printed page. An image with a low resolution will look clear if it has small dimensions. Inversely, it will appear pixelated (blocky) if it has large dimensions.
Dimensions, like resolution, are often defined in pixels. This can be confusing at first. It might be helpful to think of larger dimensions as similar to holding a magnifying glass up to a comic strip picture. The picture is larger but it becomes more obvious that it is made of dots of color. Images with larger dimensions (seen through the magnifying glass) have greater size but the amount of information doesn't really change. Each bit just gets bigger.
In the example below, an image with a resolution of 50x65 is displayed using dimensions of 50 pixels across and 65 pixels down. It looks relatively sharp. The second image is actually the same picture with the same resolution of 50x65. In the second image, however, the same amount of data is magnified to fill up the dimensions of 150x195 pixels on the computer screen. Consequently, you can see the actual pixels.
| JPEG with a resolution 50x65
at 50x65 |
The same JPEG at 150x195 |
|
|
|
Print Media, Digital Media, and Resolution
Different media deserve different data sizes. Images for print media, for example, should be highly resolved so that they can print clearly at large dimensions. Images for print should be at least 300 pixels per inch. If one wants to print an image that is 3 inches by 5 inches, then it should have a resolution of 900x1500.
Images for the world wide web should have data sizes that are as small as possible so that image information can be transferred quickly over the internet. The world wide web's standard display is 72-96 pixels per inch. To get the maximum image quality, therefore, images for web display only should be created at 72-96 pixels for every inch of the screen that they are to occupy.
For Fading Footprints, we wanted both a clear screen image as well as a printable image. Since CDs transfer data much more rapidly than the internet we chose to create images that were 150 pixels per inch in resolution, and sized on the screen at smaller dimensions.
Setting Resolution and Compression
The resolution and compression for digital images is determined by scanning or photo editing software. For PCs, Kodak Imaging is included free of charge with most operating systems and can be used to determine the resolution and compression for JPEG images. On Apple computers, iPhoto allows users to set the resolution and compression for JPEGs as well.
Before an image is saved as a JPEG, the user will be prompted
to make choices concerning the quality of the compressed image. Often
lowering the quality value will create images that look just as good at a
fraction of the data size. Acceptable data sizes for today's computers
and internet systems is generally considered to be 50K or less.
| JPEG at Maximum Quality (10) Data Size: 447k Download Time: 150 secs@28.8 kb/sec |
JPEG at High Quality (6) Data Size: 42k Download Time: 16 secs@28.8 |
|
|
|
JPEG at Medium Quality (4)
Data Size: 20K
Download Time: 8 secs@28.8 |
JPEG at Low Quality (2) Data Size: 10K Download Time: 5 Secs @28.8 |
|
|
Setting the Dimensions
The dimensions for images displayed in internet browsers is determined by the web authoring tool. In Composer, for example, one can determine the dimension of an image being displayed by setting its attributes in the dimension sub menu pictured pictured below:
Putting It
All Together
The best results for creating a great looking image with a small file size in web browsers can be achieved by making the resolution and the dimensions nearly the same. In other words, if you know how big you want your image to appear in the browser, use the photo editing software on your computer to create an image that is 72-96 pixels for every inch of the computer screen that you would like it to occupy on your web page.
Export it to a variety of compression quality settings, insert them onto your web page, and choose the image that best meets your goals for quality and file size.
The best results for creating a great looking image with a small file size in web browsers can be achieved by making the resolution and the dimensions nearly the same. In other words, if you know how big you want your image to appear in the browser, use the photo editing software on your computer to create an image that is 72-96 pixels for every inch of the computer screen that you would like it to occupy on your web page.
Export it to a variety of compression quality settings, insert them onto your web page, and choose the image that best meets your goals for quality and file size.