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 on 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.
- 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.
- There are also specific image requirements for News Flash, Calendar, Alert Center, and Facilities.
- 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.
- Slideshows: Images in slideshows should be the same size to prevent displaying white space to fill the unused space in the slideshow by 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.
- Note: The more images you have, the longer the load time the page can experience.
- Clip Art & Stock Images: Clip art and stock images should not be used in your content. Choose images that add value to the content.
- Number of Images Per Page: In most cases, 1 or 2 static photos per page is the maximum. Additional photos should be placed in a slideshow widget or in the Photo Gallery module.
- Alternative 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."
- Reasoning: Alternative text is important when using a screen reader to access the site and for ADA compliance.