Creating Images for the Web

Images are powerful communicators when they show items of interest to users, and good photography and other graphics can often tell your story or convey your information more effectively than text alone. Don't just decorate your page with stock art. It's almost always best to show photos of real people actually connected to the topic, rather than pictures of models. And be careful to use meaningful graphics; images that seem frivolous or irrelevant can backfire.

Recommendations

When creating images for the web, it's important to keep possible limitations in mind by following these recommendations:

  • Try to keep the file sizes small—generally less than 500KB (kilobytes). If the file sizes are too large and the images take a long time to load, your visitors might lose interest and leave your site.
  • Choose the correct image resolution. Web image resolution can range from 72ppi (pixels per inch) to around 120ppi. 72ppi is the classic resolution for web; however, recent technologies, such as the retina display for newer computers and smart phones, may require a higher ppi (around 120). If this is the case, some images may look fuzzy on your visitor's screen.
  • Maintain some consistency in sizing within your site. Even though the recommended height of many image types is listed as "variable," consistency will offer visitors a smoother transition. For example, when creating a rotating slideshow using a banner image bank or a SPIF bank, you might consider making all the images in that collection the same height even though only the width has a required pixel size. This way, all the images will appear to be part of the same, cohesive collection.
  • Provide a text alternative for infographics. For images that are "information-dense" (such as diagrams and flowcharts), we recommend using HTML to convey the information instead of using the image file. However, if that is not possible, you will still have to provide a text alternative. We recommend that this description resides on the same page, with a link before the infographic to the text alternative (e.g., "text alternative for web accessibility infographic"). Before the text alternative, include a heading for it, such as "Text Alternative." (If the text alternative is on the same page, then the link will be a jump link; otherwise, it will link out to the page on which the text alternative resides.) 

To help you in preparing your images for the new CMS, we have provided the links below.

Image Size Reference

Resizing and Cropping Images for Web