Follow these best practices when placing images on your page. This helps your site work correctly in responsive design, across different platforms, and provides a better user experience.
Best Practices
Image Size: Images in the content area should be large enough to display clearly on desktop, tablet, and mobile devices. They should also display clearly on high-resolution screens, such as iPhones, newer Android devices, and most iPads. Upload an image that is about twice as large as its display size on desktop devices. For example, if you want the image to display at the recommended width of 300px, upload an image that is 600px wide. The CivicPlus GCMS automatically resizes and optimizes the image for display.
Reasoning: Your website has visitors using many different screen sizes and resolutions. The CivicPlus GCMS automatically displays the correct size for any content area image on a responsive website. The key is starting with a high-quality image for the CivicPlus GCMS to optimize.
Note:
On websites that are not responsive, the GCMS does not resize images. We recommend a maximum image width of 300px.
Slideshows: Images in slideshows should be the same size. This helps prevent white space from filling the unused space around smaller images. We recommend sizing and editing photos before uploading them to the site or widget. Keep the image size consistent throughout the slideshow. We also recommend limiting each slideshow to about a dozen images.
Note:
The more images you have, the longer the page load time can be.
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.
Number of Images Per Page: In most cases, one or two static photos per page is the maximum. Additional photos should be placed in a Slideshow.
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." Alternative text is important when you use a screen reader to access the site and for ADA compliance.