Image and Marquee Dos and Don'ts
Bits & Bytes Recap
In our recent forum, we discussed how images can be used on web pages, as well as tips for use, placement, and optimal file sizes. The following is a recap
of our discussion:
Image Best Practices
Relevant, appealing, and informative images engage users and help them accomplish their tasks. Imagery communicates identity and personality, simplifies complex concepts, and leaves a lasting impression on users. It contributes to the overall aesthetic of your site and can foster an emotional connection with your audience. It’s crucial to choose images that resonate with your target users. The Nielsen Norman Group offers seven tips on using images in your designs – here are a few highlights.
Balance Images with Text
Achieving balance on your page involves carefully considering the placement of images, the surrounding text, and design elements like font styles and background colors. When designing or redesigning a page, ask yourself this: if you removed all the content but left only the images, would they still communicate a meaningful message?
Prioritize Information-Carrying Images over Decorative Images
Information-carrying images convey essential details that help users make decisions or absorb key content. When using such images, ensure they comply with WCAG 2.1 AA guidelines, particularly in terms of color contrast and alternative text. On the other hand, decorative images, while they can enhance a site’s visual appeal, often add little to the overall content. While you’re free to use decorative images to support your site’s personality, they should not overshadow the more important, information-rich images.
Use Accurate and Succinct Alt Text
Images that convey information or provide specific meaning to a page must include alternative (alt) text. Alt text should be accurate, concise, and not redundant with the surrounding content. Avoid phrases like "image of" or "graphic of." WebAIM provides examples of alt text and guidance on when it should be used and when it’s not necessary
Sizing for the Web
The last tip we shared is the balance between file size and image quality. Sometimes image file sizes can be quite large when they’re initially downloaded and it’s important to size them down for the web. For Modern Campus users, the optimal file size is less than 100kb. Please keep in mind that Modern Campus is not an image editor, and while it has the basic abilities to crop and format an image, it won’t hold onto image quality. This is why we highly recommend that all image editing should be done in an actual image editor.
If you have cropped and resized the image and the file size is still larger than 100kb, Squoosh and ShortPixel are great additional resources. They are free websites that take your image and decrease the file size by image quality.
One important consideration is that if your site uses free stock images or photos from the University of Utah’s PhotoShelter, those same images may appear on other sites as well. When users encounter the same image repeatedly, they’re more likely to ignore it, assuming it lacks unique value. This can lead them to overlook other images on your site as well. For further guidance on image best practices, the U Web Resources offers an excellent article that includes additional resources and university guidelines for image usage.
Marquees & Rotating Content
Marquees and rotating content can help convey your site's identity and personality. However, they come with a risk of Banner blindness—the tendency of users to ignore page elements they perceive (correctly or incorrectly) as ads. This phenomenon is a form of selective attention, where users focus only on content that aligns with their goals.
It’s important to consider banner blindness because, despite being prominent on a page, these elements are often ignored. This can lead to important information being overlooked. For example, if a deadline is only displayed in a rotating banner, users may scroll past it and miss the critical information. We recommend limiting marquee or rotating content to decorative images that enhance your site’s identity without conveying crucial information.
Best Practices for Marquees and Rotating Content
Marquees in Modern Campus should be formatted to be 1500 pixels wide and either 300px, 500px, or 700px in height. Having images with these dimensions can be troublesome when it comes to optimal file size, but utilizing the resources mentioned above can help with this. For rotating content like carousels, keep all images uniform in width and height to help limit bouncing between scrolls, which can result in a negative user experience.
Q & A
Q: Why do my marquee images crop differently even though my dimensions are correct?
A: Our templates are built to be responsive on all screen sizes. Because of this, the images will dynamically resize depending on the size of the screen. This is why some images will appear long and thin for large screens or short and tall for smaller screens. For best user experience, locking a photo to a specific dimension is frowned upon. If an image is not cropping as desired on the site, consider zooming out the photo or adding a transparent or solid colored border to the image to help with this issue.
Q: How do I make it so my marquee images have a small file size but don't appear pixelated on larger screens?
A: The battle to have high quality images but a small file size is one we face almost daily. Although we don’t have a sure fire way to fix this, we do have some tips that can help. Consider using Squoosh or ShortPixel to size down the image, having a focal point or short depth of field, or using a simple design like the Modern Campus CMS Guides marquee.
Q: What are the preferred file extensions for images?
A: Most image types can be uploaded into Modern Campus but there are a few which are preferred. Files with a .png extension are high quality but generally do not size well for the web. Files with .jpg, or .jpeg extensions are good quality and have smaller sizes which are great for loading on the web. File with a .webp extension and generally the best file types to have since they are created to be optimized for web use. Where possible, convert the original image to a .webp for best results.
Wrap up
By following these best practices for images and rotating content, you can create a visually compelling and accessible website that resonates with your audience.
If you have any further questions or suggestions, feel free to reach out to the UIT Web Support & Usability team.
Happy designing!
Additional Resources
- Maximizing Web Engagement Series: Building an Accessible Campus Website Modern Campus Webinar
- Nielson Norman Group’s 5 Visual Treatments that Improve Accessibility Article