Images

About

Images are an important part of government websites, especially to help establish a sense of community and place. They must be optimized for website performance and titled appropriately for accessibility.

There are a few key areas government website managers should take note of when it comes to images, including:

File types
Accessibility
Optimization

Image file types

The most common web image file types are .jpg, .png, .gif. These standard formats all have some level of compression that optimizes their file size while still providing exceptional clarity when viewing on the Internet. There are certain image formats, such as .tiff and .raw files, that are uncompressed and are generally too large for web browsing. These should be avoided for inclusion on web pages.

Image accessibility

Image accessibility is critical, especially for government websites. When adding an image to a web page, be sure to properly identify the description text, technically known as ‘alt’ (alternative) tags, so that users with visual impairments can still consume these through screen readers. Alt text should be descriptive, so that users have context as to what the image even though they cannot see it.

Image optimization

Web page load time is important, particularly for mobile users accessing content through their personal data plans or slower wireless networks. Some studies have shown that users will abandon a page if it takes too long to load. While the .jpg, .png, .gif files types are designated formats for web publishing, they can still be too large for web pages, so be sure to optimize images (weight and dimensions) before publishing to your website. Optimizilla is free web-based tool that helps optimizes images. Use this or other available options to ensure your images are adequately optimized.

Do's and don'ts

Do

Optimize all images.
Always use alt text (properly) if the image is not decorative.
Keep alt text succinct.

Don't

Use “Image of” or “Picture of” as the screen reader will notify the user that it’s an image.
Use all caps as some screen readers will read each letter, i.e. W-A-R-N-I-N-G.
Use text in images. If images of text are used, the alt text should contain the same words as in the image.

ProudCity and images

The ProudCity content management system supports .jpg, .png, .gif uploads up to 25MB soft file size. We also enforce alt tags and make it easy to add image descriptions, so that they are accessible to all users of your website.