Web Presentation Guide 5.1
Image Design
Action
Optimize images for download speed and quality. Design images for various types of browsers and computers, and follow the state's Accessibility guidelines.
Why
Images that convey relevant information can help improve readability and reinforce the overall message of a Web site. Conversely, images that are slow loading or poor quality will diminish their effectiveness.
What/How
- Use appropriate image formats.
- JPEGs for photographs or any other images that contain many slight variations in colors or gradations.
- GIFs for images with large areas of flat color, such as clip art or icons.
- PNG only when necessary.
- PNG and related features may not be fully supported in all Web browsers.
- PNG images may be higher quality and smaller file size than comparable GIF images
- SVG only when necessary.
- SGV and related features may not be fully supported in all Web browsers.
- Use caution when including SVG images, as plug-ins may be required to view them. Provide an alternative format when
using SVG images.
- Scale images down to an appropriate size.
- Find an appropriate balance between small images that load fast and larger images that load slow. An image that is 100 x
100 pixels is actually four times the file size of a 50 x 50 image, and will take four times as long to load.
- Scale images in an image/photo editor before placing them on a Web page. Use thumbnails if possible to link to larger
images.
- Optimize compression of images for file size and quality.
- Make sure that images do not contain compression artifacts, such as blocking when compressed to yield smaller file
sizes. Compression artifacts result in unprofessional looking images.
- Save original image files in a lossless (uncompressed) format before editing or preparing for the Web to avoid
over-compression and artifacts. Return to the lossless image to make changes before saving in a compressed format.
- Save images at the correct monitor resolution.
- Save images at 72 pixels per inch (ppi) when working with image/photo editing software. Monitor resolution is fixed and
determines the display size of images. A resolution of 72 ppi is a general standard for monitors.
- Test images with common screen display settings. A 500 pixel banner fills up about half of a monitor set at 1024x768 and
80% when set at 640x480.
- Use the size attributes in the <img> tag to improve page loading.
- Set the height and width attributes in the <img> tag to help speed up page loading.
- Set the width and height attributes to the actual image size. A 1000x1000 pixel image set to 10x10 in the <img> tag
will only reduce the quality and wastes bandwidth since the browser will still download the full-size image.
- Reuse images.
- Reuse graphic images throughout the Web site. Most browsers check the computer's cache before attempting to download
images again to save download time.
- Ensure that page banners, navigational icons, background images, and agency logos are reused throughout the Web site.
- Ensure Accessibility for individuals with disabilities by using the ALT attribute to provide a text equivalent for all Web
images.
- Use the ALT attribute to provide a text description of an image which may be "read" aloud for individuals who use screen
reader software.
- Use the ALT attribute for users with small screens (such as PDA devices) who may opt out of viewing images, but still
want or need to know the content of an image.
- Avoid common mistakes when using images on your site.
- Don't use images just for the sake of it - consider the relevance and impact of each image from the customer's
perspective.
- Don't use too many images or large image files. It will slow the download of the Web page and frustrate dial up modem
users.
- Don't use the Web editor or the <img> attributes to resize images on a page.
- Don't enlarge pre-compressed images, as it will exaggerate artifacts and pixelatjon.
Checklist: Image Design
Resources
Related guide topics