Image and Slideshow Best Practices

For a site to operate correctly in a responsive design and throughout different platforms and to maximize web usability, please follow these best practices when you place images on your page.

Image Size

Images inside the content area should be large enough to display clearly on a desktop, tablet, or mobile device as well as on devices that use a high-resolution screen, like the iPhone, newer Android devices, and most iPads.

There are specific image requirements for the following:

• Calendar 
• Facebook
• News Flash
• Staff Directory
• Social Media/RSS

Clip Art and Stock Images

Clip art and stock images should not be used in your content. Choose images that add value to the content. Decorative images can make information harder to access for people using assistive technology. Read more about Web Content Accessibility Guidelines (WCAG) 1.1.1.

Number of Images Per Page

In most cases, one or two static photos per page are the maximum. Additional photos should be placed in a slideshow widget or in the Photo Gallery module.

Go to Article Navigation

Alternative (Alt) Text

Descriptive alternative text should be used in images. For instance, an alternative text should be "black and white police cruiser with lights on" instead of "cop car." Read more on our Create Alt Text for Images page.

Reasoning: Alternative text is important when using a screen reader to access the site and for WCAG 1.1.1.

Go to Article Navigation

Slideshows

Images in slideshows should be the same size to prevent displaying white space to fill the unused space in the slideshow with a smaller image. It is recommended the photos be appropriately and consistently sized and/or edited before being uploaded to the site or widget. Additionally, try to limit the number of photos in each slideshow to a dozen or so images.

Compliance

In the options, slideshows are required to display Next/Previous Arrows, as well as Pagination. These options are checked by default when adding a slideshow widget to your page. Read more about WCAG 2.2.2.

• Moving, blinking, scrolling: For any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there is a mechanism for the user to pause, stop or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.
• Auto-updating: For any auto-updating information that starts automatically and is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential. 

Therefore, it is recommended that pagination be used on slideshows.

Go to Article Navigation

Image Manager

You can upload any number of images to the Image Manager for a specific page. The images will only be available within the specific NID uploaded on, or within a category for module pages. The directory link appears on the left, and our built-in image tools are on the right pane.

To avoid confusion, we recommend that you periodically clean out old images if no longer used.

Go to Article Navigation

In-Article Glossary

Review the Help Center Glossary a comprehensive explanation of the acronyms, abbreviations, and company-specific terminology. The terms located in this section are listed alphabetically.

• GCMS: Government Content Management System
• NID: Network Interface Device

Supporting Articles

• Find Image Size and Dimensions
• Add the Image Widget to a Page
• Add Images to a Slideshow Widget
• File Size Limit for Uploads

Go to Article Navigation