Web Workshop: Get Smart About Web Graphics

Large downloads scare visitors away. We'll show you how to crunch your graphics and keep your viewers.
 

By now you've probably heard the terms "GIF" and "JPEG." They are file formats -- different ways to save pictures and graphics.

The GIF and JPEG formats compress image file sizes to make them small enough to use easily on the Web. Much debate rages over when to use which format.

In short, follow these rules:

Use JPEG for:

  • Photos
  • Detailed artwork
  • Graphics with millions of colors that blend into one another

Use GIF for:

  • Graphics with solid areas of color
  • Line drawings
  • Logos
  • Transparent graphics designed to have a background the same as the page's
  • Animation

The pictures below show you why you should choose one format over the other.

Row 1
good jpeg
Saved as JPEG.
bad gif
Saved as GIF.
Row 2
bad jpeg
Saved as JPEG.
good gif
Saved as GIF.

If you look closely at the GIF file in the first row, you will see that it is pixilated in places, it's spotty. The JPEG file preserves the image much better. In the second row, the JPEG has made the large color blocks swirly. The GIF image handles the solid colors better.

JPEG vs. GIF

JPEG stands for Joint Photographic Experts Group. The compression scheme works by looking for redundant information in the file and eliminating it. This makes file sizes small.

Don't over-save a JPEG.

Because you will lose data when you save an image as a JPEG, you should not open and resave JPEGs. Losing data with each save will degrade the image quality. Always work with a copy so that you can go back to your raw image if you want to make more changes.

GIF stands for graphics interchange format. CompuServ developed the format for its online ventures. You'll often see it referred to as CompuServ or CompuServ GIF.

GIFs save space by restricting you to 256 colors or fewer (unlike JPEGs, which allow millions). If you look closely at a GIF image, you may see a bunch of dots in certain areas. This is due to "dithering." Since GIFs only work with a certain number of colors, they shift the dots around from the colors they have in order to create -- to fake -- the colors they don't have.

Don't mix your formats

It is not a good idea to save an image in one format and then again in another. Keep originals of your images so you can go back to make changes without crunching previously compressed images.

Reducing File Size

A lot of factors contribute to an image's file size. By "file size" we mean the amount of bits in the file, not the size the image takes on a screen. We refer to the size of the image as it appears on the screen as the "dimensions" of the image.

By following these steps, you can reduce the file sizes of your images and decrease their download times.

  • Before you play with any attributes at all, make sure your image is no larger than 72dpi. The resolution of your monitor is 72dpi, so higher resolutions are redundant.

  • Make the dimensions of the image as small as you can. Larger dimensions greatly increase the file size. It's better to show your visitors an image with smaller dimensions than have them abandon your site while your large-dimension graphic is still trying to load.

  • Use fewer colors. If you are creating the image from scratch, use a set palette of colors. The fewer colors, the smaller the image's file size.

Graphics-Crunching Utilities

Spinwave offers free online services called GIF Cruncher and JPEG Cruncher. The free services are used to entice you to buy the full versions of the company's image-optimization tools, which can crunch more than one image at a time.

You can use an image you from the Web or browse to find one on your hard drive. Spinwave offers you several versions of your image with different color depth and dithering levels and provides you with size information on download time and crunched percentages.

Adobe offers a similar online graphic cruncher, which allows you to compare JPEG and GIF, or to choose the quality of the file to crunch. It also estimates the upload time for you.

For heavy-duty crunching

These online freebies are great if you want to crunch a handful of graphics, but what if you have thousands of them?

SmartSaver Pro by Ulead is a good, inexpensive graphics program.

If you want to get fancy, try Adobe's ImageReady, which comes bundled with Adobe Photoshop and many other programs. You can download a free trial of Adobe Photoshop Elements at the Adobe website.


Home HTML Menu Extra Information HTML Hub