 |
Creating
Images for the Web |
Introduction
Format
Colors
| File Size | A major goal when designing graphics for the Web is to make them as small as possible, because the file size of your graphics will determine your site'spage size, which in turn determines loading time. By virtue of their formats, both GIF and JPEG images are automatically compressed when they're created. You can also use several manual tricks to decrease a graphic's file size. |
| How does GIF compression work? | GIF is a "lossless" format, meaning that no information is lost in the compression process. (However, it is common to lower the color depth by manually reducing the number of colors before creating a GIF image, which does result in loss of image information.) Essentially, the application that compresses the GIF looks at the graphic and says, "There are 41 pixels in a horizontal row, each of which is color number 6 on the palette. Then there are 3 pixels in a row of color number 11. Then there are 22 pixels of color number 2." GIF usually achieves a 3:1 compression ratio. |
| How does JPEG compression work? | JPEG compression reduces the file size of graphics by dividing images into rectangles, and then mathematically assigning each rectangle to one of many common shapes. JPEG compression also removes color distinctions that the human eye can't see; for this reason, black-and-white images don't compress quite as well as color images in JPEG format. JPEG can often achieve up to 50:1 compression with little loss in quality. |
| What are other ways to reduce a GIF's size? | In most graphics applications that can save GIFs, you can reduce the color bit-depth (the number of colors). Whenever you can do this without a substantial loss in image quality, you should. The smaller the bit-depth--that is, the fewer the colors--the smaller the image's file size. You should also remove any colors from your GIF palette that you're not using in the image. The fewer changes in pixel color, the smaller the file will compress. Likewise, the fewer colors on the palette, the smaller the resultant compressed file. Generally, nondithered images have smaller file sizes than dithered ones because they have more same-colored pixels in a row. And, of course, the smaller the height and width of the graphic, the smaller the file size. |
Web Images |
Contact Nancy Perrin, or John Rueter. PSU's FIPSE Project coordinated by Nancy Perrin and John Rueter, © 1997. Page constructed by Chris Miller. Last updated on June 22, 1998. For more see the About Page.