DIGITAL IMAGING - COMS 226 DIGITAL IMAGING NOTES
PIXELS
"Picture element." The smallest single thing of one color that you can see on your computer screen or television. The total number of pixels limits the detail that can be seen on a screen.
Most computer monitors have a standard screen resolution of 72 pixels per inch (which corresponds with the ancient typesetting system of 72 points per inch). This is changing with High Definiton screens, but is still a general rule. You usually don't need more than 72 ppi for web display. Nor do you want large files that take a long time to download. So changing from 600 or 300 ppi to 72 ppi means you lose a lot of file size -- and a lot of quality.
High resolution photos are for printing. Lower resolution photos are for web display. But what is resolution again?
FILE SIZE / 100k for Web, 6 - 20 MB for printed images
- If you want to send image files out over the Web, you need low-resolution photos. To make these, you need to understand how to reduce the file size without reducing quality.
- Why is this important? Given download speeds, you dont want to send more image information than you need, and you dont want to keep people waiting for the image to arrive.
- Printed images, on the other hand, require higher quality, which means larger, high resolution files
- Typically, a Web image will be 100,000 bits and a printed image will be 6 to 20 megabytes
TYPES OF RESOLUTION
-- One channel of "indexed" color information, with one to eight bits, or
-- Three channels of 8-bit color information (which makes 24 bits), called "RGB mode." (Sometimes RGB has a fourth channel called an "alpha" channel, which makes 32 bits).
PIXEL DEPTH AND COLOR
| Bits / Pixel | Colors | Explanation |
Mode |
| 1 | 2 | Two possibilties -- black or white | Bitmap |
| 2 | 4 | 2 x 2 | Greyscale, Indexed |
| 3 | 8 | 2 x 2 x 2 | Greyscale, Indexed |
| 4 | 16 | 2 x 2 x 2 x 2 | Greyscale, Indexed |
| 5 | 32 | 2 x 2 x 2 x 2 x 2 | Greyscale, Indexed |
| 6 | 64 | 2 x 2 x 2 x 2 x 2 x 2 | Greyscale, Indexed |
| 7 | 128 | 2 x 2 x 2 x 2 x 2 x 2 x 2 | Greyscale, Indexed |
| 8 | 256 | 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 | Greyscale, Indexed |
| 24 | 16.8 million | Three channels of 8 bits each = 256 x 256 x 256 | RGB, CMYK |
IMAGE FILE FORMATS
| Name | Channel | Mode | Explanation | File suffix | Compression | Typical Use |
| Graphic Image Format |
1 channel | Indexed, greyscale |
256 colors (transparencies) | .gif | little or none | WEB - Maps, cartoons |
| Joint Photographic Experts Group |
3 channel | RGB | 16 million colors (no transparencies) |
.jpg .jpeg | very good compression | WEB - Complex photos |
| Portable Network Graphics |
4 channel | RGB | Working format for Fireworks and others; Also viewable in some web browsers. 16 million colors plus alpha (transparencies) |
.png | some compression | WEB - Complex photos with transparencies in the alpha channel. Not supported in all browsers |
| Pict and Tiff | 3 channel | CMYK | Pict was originally developed for Mac, Tiff for Windows | .pict .tiff | Non-lossy. Usually no compression | NOT FOR WEB For high resolution printed graphics |
| Photoshop Document | 4 channel | Working format (for Adobe Photoshop) | .psd | Non-lossy. No compression | NOT FOR WEB Working format (for Adobe Photoshop) |
REDUCING FILE SIZE FOR THE WEB
- Open an image in Photoshop
- Look at the top menu bar and pull down Image / Image Size
- You'll get a dialogue box with five slots and three checkoff points.
- Look under "Resolution." What is the number? Is the image 72 points or higher? If higher, reduce it to 72 points.
- Look under "Width and Height." Is the image more than 7 inches wide or 9 inches high? Could it be even smaller?
- A 5 by 7 image, 72 ppi, might be about 500 k, which is still rather large.
- Under "File," pull down "Save for Web" - Here's another dialogue box that lets you apply jpg compression
- Save this under a new name. It's ready to be used on the web.
- Typically a 5 x 7, 72 ppi image can be compressed to about 40 k without losing too much quality.