Creating Images

Creating Images

Produce images that will load quickly

Since users need web pages to load quickly, you should make your image files small. In this site we try to limit the size of individual images to 5k, and try to limit the total size of all the images on any single page to 20k. Because GIFs are usually smaller than JPEGs, try to use GIFs whenever possible. This trade-off is discussed below.

Use colors that succeed on a variety of platforms

To make your colors look good on a variety of platforms and monitors, design your images using a cross-platform, browser-safe color palette comprised of 216 colors (sometimes referred to as a Web safe color palette). You can download our Web safe 216-color palette, which contains the hexadecimal color codes HTML requires for specifying colors.

Produce images in the most appropriate format

example 1, flat GIF, which is sharper and clearer than the flat JPEG in example 2

example 2, flat JPEG

example 3, non-dithered GIF image, color change boundaries can be seen

example 4, dithered GIF image, color change boundaries are blended

GIF formats are better for some types of images, and JPEG formats are better for other types of images. GIF formats are particularly useful for images that contain flat areas of color (example #1). If you save such an image in a JPEG format, the JPEG formatting process may introduce unwanted artifacts into your image (example #2).

GIF images are usually smaller and load faster than JPEGs. They limit you, however, to using a 256 color palette, and they also require you to choose either a dithered or non-dithered format. Example #3 shows a non-dithered GIF, and example #4 shows a dithered GIF. Dithering is a process the computer goes through when it encounters a color that is not in its palette. In this process it combines two colors in its palette to approximate the appearance of a third color.

JPEG formats are best for images like photographs that contain numerous changes in color tonality. JPEG images look best on monitors capable of displaying 16 million colors (16-M). Monitors that display 256 or fewer colors cannot produce this range of colors. JPEGs, moreover, usually take longer to download than GIFs. (If you are viewing this site on a 16-M color display, the difference between examples #4 and #5 will be more apparent than if you are viewing it on a 256 color display.)

If you want an image containing a range of color tonality to look good on a 256 color display, you can save it as a dithered GIF. A dithered GIF retains some color tonality (example #4) and is smaller than the same image saved as a JPEG (example #5).

You can make simple web animations made of a sequence of GIF images called animated GIFs. An example of an animated GIF is the dancing feet illustration in Create animations that enhance explanation.

Reduce the size of image files

Color-rich images tend to be large. Make images smaller by reducing the size of the color palette. If you make the color palette too small, the image will become too degraded. The goal is to make the file as small as possible while still retaining sufficient image quality. Start with a high-quality image and produce versions using successively smaller color palettes until image degradation becomes too apparent. The JPEG image on the right is a little less rich in color and detail, but less than half the size of the JPEG image on the left.

[image before reducing colors]

size: 8.4K

[image after reducing colors]

size: 3.4K

Re-use images

You can decrease load time by re-using images. Once they are loaded in the browser's cache, they will display on the screen faster. Graphics for site identity and navigation are often the easiest to re-use.

Use interlaced GIFs

[Non-interlaced GIF]

[Interlaced GIF]

[GIF fully rendered]

Interlaced GIFs render progressively, allowing the viewer to begin to identify the contents of the image without waiting for the full download. The top image shows the way a non-interlaced GIF image appears as it begins to draw on the screen; users may not be able to tell whether they want the image until it has fully downloaded. The interlaced GIF (center) appears initially as a full image which is not fully focused, but it often reveals enough information for the user to quickly recognize the image's contents. The bottom image shows the fully rendered picture.

Save images at a resolution appropriate for your users' monitors

Because few monitors display images at resolutions greater than 72 dpi, you may want to limit the resolution of your web images to 72 dpi. A higher dpi ratio will not produce better image quality on most monitors and will increase file size, causing each page to load more slowly. If you know that many of your users have higher resolution monitors, use images of corresponding resolution.

If you have decided to create a version of your site specifically for printing, you may want that version to have images with a higher dpi. Most low-end printers are 300 dpi. The higher the dpi, however, the longer users must wait to download the printable version.

Use Alt text for all images

[image of an alt text message]

Use alt text to provide users a short description of images. Alt text:

provides vision impaired users access to your content (screen readers read the descriptions)
helps sighted users determine whether they want to wait for an image to load
enables users to read a description of a linked image and take the link before the image loads

Use alt = "" for images that do not convey important information or convey redundant information. The alt tag without text informs users with screen readers that there is a picture for which a description is unnecessary.

Privacy Policy | Terms of Service
© 1999 - 2008, MultiMedia SRL
Send articles and materials to be published on this website to: Publishing
If you see unauthorized or illegal materials on this website, please send an e-mail to: Abuse