WiscWeb CMS - Responsive Template (rst) - Best Practices Using Images
This document will instruct you how to use images on your responsive website so that your site functions well on desktop, tablet, and mobile platforms.
Before getting into best practices, it is important to understand that this document will not discuss how to edit or crop photos to meet some of the best practices mentioned in this document. The CMS team is not a good resource for how to best perform these functions. In general, everything mentioned can be done in Windows via Paint or Mac via Preview. For advanced edition options, we'd recommend learning Photoshop. DoIT offers training courses in Photoshop if you are interested in learning more advanced editing options.
There are four common content classes that use images in WiscWeb CMS:
- Photo Carousel: Typically used to deliver decorative images showcasing a department, or provide a scrolling news feed with the latest a departmental/group news.
- Image with Caption: A single image used on pages to highlight the theme of that page. It might accompany a news article or other text related to the image.
- Text Area: Images can be embedded in Text Areas, which allows you to shape the text around the image.
- Image Gallery: Image Gallery create an entire page of images with thumbnails that allow you to click on them and see them in a slideshow.
In each of these instances, you want to be thinking about the following aspects of your images.
What do the images add to your page?
Images should enhance the message of the page you are building. Too often, images are added as filler or to break up whitespace, which is not what you want to be doing with mobile-first design being the standard. Images are great on pages where you are marketing an image or a brand. A good example would be a recruitment page for a campus department. Images showing students working on their major, having fun, etc. would help with recruitment. On a subsequent page that discusses the requirements for your departments majors, omitting images would make sense as it's an informational page and images aren't going to add anything to that page.
How big are your images?
Once you've decided on the pages that will have images, you'll want to find images that fit the theme and message of the page, and ensure they are of appropriate size. It's easy to forget that internet speeds vary while working on campus, and even pages with large images load very fast on the campus network; however, mobile users and users with lower speed internet may struggle to download your images if they are too large. We recommend having each page on your site be under 1MB, or 1000kb. That gives you some flexibility on your images, as you could use one large image or several smaller images. You can check the size of your images on Windows or Mac by right-clicking on the file and choosing Properties (Windows) or Get Info (Mac).
Do you want the images you are adding to display on desktop, tablet, and/or mobile?
You may have images that you really want to use that are larger and load faster on most desktops, but are problematic on mobile platforms. For any content class, you can choose to restrict where it gets seen, such that you could keep your large image on desktops, but anyone accessing it on mobile would not see the image. This is best tested on your test/preview site before going into production.