Ensure Optimal Usability of Your Website's Images


For a site to operate correctly in a responsive design, throughout different platforms, and to maximize web usability, follow these best practices.

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 using a high-resolution screen, like on the iPhone 7, newer Android devices, and most iPads.
  • You should upload an image about twice as large as it will display on desktops. For example, if you want the image to display at the recommended 300-pixels wide, the image you upload should be 600-pixels wide. Let the CivicPlus 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.
  •  News Flash Recommendation: 225 px by 225 px at 72 dpi
    • Reasoning: Your websites have visitors with a huge 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 having a high-quality image from which to start optimizing.

Slideshows, Clipart, and Stock Images

  • Slideshows
    • Images in slideshows should be the same size to prevent displaying white space.
    • Photos should be appropriate and consistently sized and/or edited before being uploaded to the site/widget.
  • Clipart & Stock Images
    • Clipart and stock images should not be used content. Choose images that add value to the content.

Images per Page

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

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."
  • Alternative text is important when using a screen reader to access the site and for ADA compliance.

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

I'd Like to Request an Enhancement

0 out of 0 found this helpful


Article Feedback