For a site to operate correctly in 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 using 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.
  • 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 having a high-quality image from which to start optimizing. 
• Slideshows: Images in slideshows should be the same size to prevent 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 load time the page can experience. 
• 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.