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
- Clip Art and Stock Images
- Number of Images Per Page
- Alternative (Alt) Text
- Image Manager
Not finding what you're looking for? View additional resources.
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.
You should upload an image about twice as large as it will display on desktops (meaning if you want the image to display at the recommended 300 pixels wide, the image you upload should be 600 pixels wide) and let the CivicPlus GCMS automatically handle resizing and optimizing that image for you.
- Reasoning: Your websites have visitors with a large variety of screen sizes and resolutions. The CivicPlus GCMS is designed to automatically display the properly sized version of any content-area image on a responsive website. The key is to have a high-quality image from which to start optimizing.
- There are also specific image requirements for the following:
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
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.
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.
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.
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.
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