Saving photos and graphics for the Web

When preparing images (graphics or photographs) for use on a website, you can save your image in one of three different ways.

Photographs should be saved as JPEG's (.jpeg or .jpg).

Graphics with large areas of flat, solid color should be saved as GIF's (.gif).

Either photographs or graphics can be saved as PNG's (Portable Network Graphics, pronounced "pings", .png) as long as transparency* is not required.

Image size

In general, images to be used on a website should be kept as small as possible, depending on the context in which they're used. Large images mean longer page loading times. Keep the two guidelines below in mind when preparing images for your site:

All images for websites should be saved at a resolution of 72 ppi (dpi)

Try to keep image file size below 20 KB whenever possible.

As with page size, there are two aspects to image size:

Image dimensions, an image's height and width measured in pixels.

Image file size, measured in number of bytes, usually kilobytes (KB) or megabytes (MB).

The two aspects are related, but the dimensions of an image are not the only thing that determine file size.

Accessible images

Images on a website often contain information that would also be useful to visitors with impaired vision. Designers can add text descriptions to the images in their web pages through the HTML "alt" (for "alternate") attribute. Screen readers can read this alternate text to visually impaired visitors to help them use any information contained in the image.