Web Graphics
by Susan Delap

It's best to resample a graphic to it's final dimensions before using it in an HTML file. Although you can use HTML to tell a browser to display a graphic smaller than the original, the original graphic is still downloaded to the user's computer which will cause a longer than necessary download time.

So what size should you use? In general, web designers shoot for fitting pages in the smallest typical monitor which is currently 800x600 pixels--the size of a typical laptop screen. Accounting for the extra real estate in the borders of a typical browser window, the resulting magic number for the maximum size graphic is 760x520 pixels.

Compress your JPGs for faster downloading. Corel PhotoPaint, Adobe Photoshop, and Macromedia Fireworks all let you preview your graphic at different levels of compression so you can get your graphic's filesize as small as possible without a noticeable degradation in quality. TIP: The more graphics you have on one page, the more you should compress all your graphics so the total download time for the page is still under 30 seconds. (Time it on your dialup connection.)

JPG or GIF? Use JPGs for photographs and GIFs for graphics that have big areas of the same color--like graphs and line art. GIFs use a smaller color palette and are best for rendering figures with areas that are the same color. They also use a "lossless" compression, but the file size remains manageable because the number of colors is small. JPGs use a big color palette and use "lossy" compression to compensate for all those colors. In a GIF, the blocks of color are the same, but in a JPG they will be blended and pixellated at color transitions--OK in a photograph but awful looking in a figure. See this example of a line-art graphic saved in both GIF and JPG formats. If you need simple animation, use GIF. If you need a transparent background, use GIF or, better yet, PNG.

What is PNG? PNG is becoming a replacement for GIF. Read more about it here. PNG combines the best features of JPG and GIF. It has a flexible color palette--as large as JPG or as small as GIF. It also supports transparent backgrounds.