Web browsers can render images in several formats. The most common are GIF, JPEG (or JPG) and PNG. Each has advantages and disadvantages, but they're all useful.

GIF

CompuServe introduced the GIF, or Graphics Interchange Format, way back in 1987. A GIF can only handle 256 colors, which was tons in ‘87 but isn’t very much at all today. This color limitation means it doesn't make it good for things like photographs.

GIFs are, however, good for simple graphics like logos. They can also handle transparency. Additionally, GIFs support animation, which is kind of neat, but technologies like Flash are better alternatives these days.

JPEG (or JPG)

The JPEG (Joint Photographic Experts Group) standard appeared in 1992. JPEGs are great for more complex graphics like photographs. They support lots of colors with smooth transitions between them.

On the down side, JPEG is a ‘lossy’ format. This means that, when it compresses the grahpic information for storage, some of the image data goes away forever. Each time you edit and save a JPEG, some of the image quality is lost. Unlike GIFs, JPEGs cannot handle transparency.

PNG

The PNG, or Portable Network Graphic, is the newest — and our favorite — format. It handles color as well as JPEG but doesn’t lose image quality. PNGs also support transparency, but in a more advanced way than GIFs. This format also has a great compression ratio, so PNG images are ideal for the web.

 

Resolution just refers to how fine the detail in a picture is. Digital graphics are really just a bunch of dots, each with its own color. The dots are small enough that our eyes run them together and interpret them as regular images. As you pack more dots into an image, you get more detail. So high-resolution graphics look better than low-resolution graphics, right? Well, yes, but understand that computer monitors can't render pictures with the same amount of detail as in a printed photograph.

Your target resolution is 72dpi, or dots per inch. While that wouldn't look good on a printed page, it looks great in your web browser. If you set your resolution higher, you won't see any difference on your screen, but you will see a difference in file size. As you increase resolution, you're increasing the number of dots in the image, and it takes more storage space to handle more dots.

It’s hard to tell just how big an image will look to all of your site’s visitors. Two visitors holding rulers up to the same image on monitors with different settings will probably get different measurements. When we talk about image size in the context of the web, we need to think in relative sizes.

Take a look at the following examples to get an idea about web image sizes:

50 x 50 pixels
100 x 100 pixels
200 x 200 pixels