Pictures from digital cameras
Pictures that come straight from a digital camera are generally far too large to put directly on a Web site. They almost always need to be reduced in size before they can be used on a site. If you don't have experience re-sizing pictures from digital camera, please contact a member of the Web Team for help.
File formats for images
When preparing images (graphics or photographs) for use on a Web site, 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 Web site 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 Web sites 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.
Image dimensions
Smaller dimensions mean smaller files, which also mean quicker downloads and faster loading pages. No hard and fast rules can be given for the height and width of images, but as a general rule use images with the smallest possible dimensions for the purpose at hand. At times, large image files are unavoidable, but it's best to reserve their use for places where a larger image makes a significant difference in communicating with the visitor.
Image file size
Because the file size of an image file adds to the time it takes for a web page to render in a browser, the smaller the file size of an image the better. As with image dimensions, it's difficult to give hard rules for the file size of images, but image files should not generally exceed 20 KB.
Four things affect the file size of images:
- Image dimensions (height and width in pixels)
- Image resolution (number of pixels per inch, ppi or dpi)
- File format (JPEG's remove data from the image, thereby making smaller files)
- Complexity of the image (number of colors in the image)
Images intended for use on Web sites should have a resolution of 72 dpi. Height and width are important factors in the file sizes of image files, but the resolution of an image, particularly a photograph, can have more to do with the file size of an image than its dimensions in pixels. Resolution refers to the numbers of dots (or pixels) per inch (dpi) in an image. Images intended for high-quality printing often have resolutions of 300 dpi.
The JPEG format makes image files smaller in file size by removing a certain amount of data from an image. The human eye can only see so much detail in a given image, so removing some data from an image often makes no discernible difference to the eye. The JPEG format provides different levels of quality when saving files by allowing us to select how much data we want to remove from an image. Image editing software (such as Photoshop, Photoshop Elements, or Fireworks) often refers to these different levels of quaility with shorthand terms like "maximum," "very high", "high," "medium," and "low." High quality is normally best for larger images in which details and sharpness are required.
Accessible images
Images on a Web site 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.