The following KB articles relate to this topic:

Best Practices for Images

Using Images

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.

Should I Use Images I Found Online?

The answer to this is almost always "no". Although you may have found your ideal photo or graphic in Google Images or another website, you do not own the rights to those images and therefore, they should not be used. For a more detailed description of why you shouldn't use images you find online, please visit the following article: Can I just repost that photo online? Probably not. (external link)