Basics of Web Graphics Tutorial

About graphics for the web:

There's nothing more of a turnoff than a slow-loading webpage (well, bad breath isn't very nice either, but we're talking websites at the moment). Suppose you build a site that requires a lot of graphics, like a shopping site, or an art site. How do you fill the pages with graphics but at the same time, give your visitors a non-horrendous download time?

Compression

Graphics for the web are much, much smaller than graphics you print on paper. They have to be because screen resolution is smaller than print resolution (i.e. 72dpi as opposed to the usual 300dpi) and if you were to put a graphic you made for printing on the web, it would take foreeeeeeever to download.

So you need to make your graphics web friendly by making them as small as you can and by making them as fast to download as possible. How? By compressing your images properly.

When you save a picture in a graphics program, you'll have a few compression options that allow you to add more or less compression. The more you add, the smaller the file, but there is a point of diminishing returns where the graphic loses quality. So you have to add compression judiciously and if your graphics program shows the effects of compression in realtime, like Photoshop, it's way easier to get it right.

Jpeg or Gif?

What's the diff? Rule of thumb is, if it's a photograph you're working with or something with gradients and subtlety, you'll probably want a jpeg. If it's a bold graphic, like a computer-generated cartoon or logo, a gif will do the trick.

Problems arise for jpegs because if overcompressed, you'll see "artifacts" or spots introduced to the design, which can ruin your image. Alternately, if you overcompress gif's, they lose their color gradations and get blockier. So you'll want to experiment with compression to figure out the right amount for that particular image as well as the best file format to save to.