Imagery

Well-chosen images can make content more accessible, improve usability, and strengthen a brand’s identity. However, poorly implemented imagery can lead to confusion, slow performance, and accessibility barriers. This guide covers best practices for using imagery effectively in digital experiences.

What is Imagery?

Imagery refers to any visual elements used in a digital interface, including photos, illustrations, icons, and graphics. In UX design, imagery is not just decorative—it serves a functional purpose, guiding users, reinforcing messaging, and improving comprehension. Selecting an appropriate image or combination of images will help communicate the desired message more effectively and will consistently reinforce the California Courts Website brand style. Imagery should enhance and support the essence of the California Courts Website brand personality: Welcoming to all, trustworthy, classic and sophisticated. Color imagery is preferred though not necessary.

Benefits of Good Imagery

• Improves Comprehension: Images can simplify complex topics, making them easier to understand at a glance.
• Enhances Engagement: Well-chosen visuals make content more compelling and increase user interaction.
• Builds Trust & Credibility: Authentic, high-quality imagery establishes professionalism and credibility.
• Supports Accessibility & Inclusivity: Alt text and appropriate contrast ensure that all users, including those with visual impairments, can engage with the content.

Usability Concerns to Consider

• Slow Load Times: Large, unoptimized images can slow down page performance. Use compressed formats like png or jpgs.  Acceptable resolution sizes vary between 72 to 150 dpi for web imagery.  Images or publications with images that are meant to be printed, such brochures or pamphlets, can maintain a resolution of 300 dpi.

• Poor Contrast & Legibility: Ensure text over images remains readable by using overlays or high-contrast adjustments.

• Decorative vs. Informative Images: Avoid unnecessary images that add visual clutter without functional value.

• Accessibility Compliance: Provide descriptive alt text for all meaningful images to assist screen reader users. For more details on accessibility compliance, read our Accessibility: Images content.  

When to Use & When to Avoid

When to Use

• To visually represent complex ideas or processes.

• To create emotional connections with users.

• To break up large sections of text for better readability.

• To enhance storytelling of content.

When to Avoid

• When an image does not provide meaningful information.

• If it reduces website performance and usability.

• When it introduces accessibility barriers without alternatives.

• If it creates cognitive overload or visual distraction.

Things to Consider

• File Formats: Use PNG or JPEG for better performance and scalability.

• Choose Purposeful Imagery: Imagery should have a clear purpose, such as illustrating key points, conveying emotions, or helping users navigate. Avoid overly decorative or generic images that add little value.

• Responsive Design: Ensure images adjust properly for mobile and desktop views.

• Alt Text & Captions: Always provide meaningful descriptions for images that convey information.

• Brand Consistency: Maintain a consistent visual style to reinforce identity and trust.

• Consider Diverse Representation: Select images that represent a range of people, cultures, and communities to reflect the diversity of the courts users and showcase inclusivity and trust.

Procuring Images

When using images, make sure you have the proper permissions and follow copyright laws. If the image includes people — especially minors — obtain the necessary consent before use. The web team can help source licensed images, and you can also reach out to Public Affairs or the Editing and Graphics Group for assistance.