skip to content

Free Web-based Image Editing Software

Pictures from digital cameras

  • Pictures that come straight from a digital camera are generally too large to put directly on a website.
  • Please do NOT use the image scaling feature in the Open Content Area to resize your images.
  • If you don't have experience re-sizing pictures from digital camera, please contact a member of the Web Team for help.

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.

  1. Photographs should be saved as JPEG's (.jpeg or .jpg).
  2. Graphics with large areas of flat, solid color should be saved as GIF's (.gif).
  3. 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:

  1. Image dimensions, an image's height and width measured in pixels.
  2. 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.

For example, if you use a graphic as a button that links to more information about a topic, it's important that visually impaired visitors be able to use that button even if they can't see the graphic. In the image below, the word's "incoming freshman" are part of the graphic. To help visually impaired visitors, we should put those same words into the alt attribute for the image. The code example below the image shows the alt attribute.