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.

Best Practices  

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.

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 Government Content Management System (GCMS) automatically handle resizing and optimizing that image for you. 

• Note: On websites that are not designed to be responsive, the GCMS will not resize images and we recommend a maximum width of 300 pixels.
• 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:
  • Calendar 
  • 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. 

• Note: The more images you have, the longer the load time the page can experience. 

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.

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 appropriate 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.

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 Network Interface Device (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.

• Warning: If an image is removed from the image manager that is currently in use, the image will display as an error (blank image with red x).

Resources

• Find Image Size and Dimensions
• Add Image Widget
• Add Images to a Slideshow Widget