How to work with images in UI design?

Deep dive 

Images in UI design can greatly impact the user experience of an enterprise app, but they must be carefully selected, optimized, and implemented. The wrong image choice can increase load times, harm accessibility, and reduce the overall usability of the interface. Here’s a deeper look into how to handle images effectively in UI design.

What UI images format is better to use?

• JPEG is best for photos with complex colors and gradients, like hero images.

• PNG works for images requiring transparency, such as icons and logos.

• WebP is a newer format offering high quality with smaller file sizes, ideal for both photos and transparency needs.

• SVG is preferred for vector-based images (icons, logos) because it scales infinitely without losing quality and keeps file sizes small.

What dimensions should be applied?

• 1:1 Square (1080 x 1080px): Great for in-text imagery, sidebar ads, and social media.

• 16:9 Panoramic (1920 x 1080px): Ideal for hero images and widescreen content.

• 3:2 Rectangle (1080 x 720px): Common for print and mobile designs.

• 4:3 Rectangle (640 x 480px or 2048 x 1536px): Used for small ads or full-screen takeovers.

• 1.59:1 Landscape (Minimum 1080px wide): Perfect for blog post imagery and social media.

How to improve image loading speed on a website from a designer's perspective?

1. Compress and resize images: Use lossy or lossless compression tools to reduce file sizes without compromising quality.

2. Set image dimensions: Define width and height attributes to prevent unnecessary browser scaling and layout shifts.

3. Optimize for devices: Serve responsive images by creating versions tailored for different screen sizes (e.g., desktop, tablet, mobile).

4. Implement lazy loading: Load images only when users scroll to them to save bandwidth and prioritize visible content.

5. Use efficient formats: Convert images to modern formats like WebP or AVIF for smaller file sizes and faster loading.

Why do UX images take so long to load?

1. Large image files: High-resolution or uncompressed images consume excessive bandwidth.

2. Undefined dimensions: Browsers must process the entire image if dimensions aren’t specified.

3. Oversized images on small screens: Delivering large files to mobile devices wastes resources and increases load times.

4. Loading all images simultaneously: Without prioritization, browsers process everything at once, delaying visible content.

5. Outdated formats: Heavy formats like TIFF and BMP take up unnecessary storage compared to WebP or AVIF.

6. No caching enabled: Re-downloading images on every visit instead of storing them locally slows the website.

How does page load time affect bounce rate?

Slow image load times directly impact user experience, leading to higher bounce rates. If users have to wait too long for images to load, they may abandon the site, resulting in lower engagement and conversions.

What are the recommendations for image accessibility in design?

Why is considering image accessibility important?

Accessibility is about ensuring that all users, including those with disabilities, can interact with your app or website. Neglecting image accessibility can not only exclude a portion of your audience but also result in legal ramifications. Accessible design ensures a better experience for all users and complies with accessibility guidelines (WCAG).

How do people with disabilities interact with imagery in UI?

• Screen readers: Screen readers convert text into speech or braille. They rely on alt text to describe images to users who cannot see them.

• Keyboard navigation: Users may navigate with the keyboard rather than a mouse. Ensure images and interactive elements are accessible via keyboard shortcuts and focus states.

• Visual impairments: Users with low vision or color blindness rely on high contrast and text descriptions to understand images clearly.

What is Alt text and why is it critical for image accessibility?

Alt text provides a textual description of an image. It’s essential for accessibility because it allows screen reader users to understand what an image conveys. Alt text should be brief but descriptive, focusing on the image's function or content.
Example:

• Good: "A chart showing the monthly sales growth."

• Bad: "A chart."

How to ensure the readability of text on UI imagery?

Overlay: Use a semi-transparent overlay on background images to create a consistent contrast between the text and the background.

Color adjustment: Consider colorizing or reducing the contrast of the image to make the text stand out better.

What are the 7 types of imagery according to accessibility standards?

1. Informative images: These visually present key concepts or information, like photos, illustrations, or diagrams. They help users understand content better.
   
   Use alt text to describe the essential information clearly (e.g., “A bar graph comparing 2023 and 2024 sales growth”).

2. Decorative images: These enhance visual appeal but don’t provide meaningful information, like background patterns or icons.
   
   Use alt="" to hide them from screen readers and avoid cluttering accessibility tools.

3. Functional images: Icons or images act as links or buttons, like a magnifying glass icon for search. Their purpose is tied to functionality.
   
   Use alt text to describe the action, such as “Search” or “Submit form.”

4. Images of text: Text presented in images, like banners or logos, conveys specific messages. Avoid relying on these where text could suffice.
   
   Match the alt text exactly to the words in the image (e.g., “Welcome to our store”).

5. Complex images: Graphs, charts, or detailed illustrations convey data or intricate ideas. A simple description may not suffice.
   
   Provide a concise alt text and a longer text explanation or data summary elsewhere (e.g., in a caption).

6. Groups of images: When several images collectively represent one idea, users should understand the group’s meaning without reviewing each image.
   
   Use one alt text to summarize the information for the entire group (e.g., “Timeline of product development milestones”).

7. Image maps: These contain multiple clickable regions, like a map with location markers. Each region serves a different purpose.
   
   Use alt text to describe the overall context (e.g., “World map with clickable country links”) and specific alt texts for each clickable area.

How to work with UX design images scaling?

• Avoid enlarging bitmap images: Scaling bitmap images (JPEG, PNG) beyond their original size causes blurriness. Use higher resolution images instead.

• Don’t scale small icons up: Small icons (16px–24px) lose detail when resized. Use background shapes to keep the icon size consistent.

• Don’t shrink screenshots too much: Shrinking screenshots reduces readability. Capture them at smaller screen sizes or crop to highlight key details.

• Create simplified versions for large icons: Large icons (like logos) get blurry when scaled down. Redraw a simpler version at the target size.

How to maintain the consistency of the imagery in app design in the presence of user-uploaded content?

User-uploaded imagery in enterprise apps often includes avatars, document previews, product images, or media attachments. Since these images vary in size, quality, and format, maintaining visual consistency is crucial for a polished and professional UI.

• Control image size: Use fixed-size containers to ensure user images fit the layout without distortion.

• Avoid layout disruption: Crop or center user images to maintain layout consistency.

• Prevent background bleed: Use inner shadows or semi-transparent borders to avoid background colors blending with the page.

• Apply design constraints: Control image dimensions and placement to keep the interface cohesive.

How to deal with imagery and UI using Midjourney?

Midjourney is a powerful tool for generating visuals, but its output requires thoughtful interaction.

What are the main types of imagery that Midjourney can help us create?

• App icons: Generate iconic, distinctive app icons that convey your app's purpose in a simple, visually striking way. Specify desired styles (minimalism, flat design) to fit your app's aesthetic.

• Product images: Ideal for e-commerce or app product pages, Midjourney can produce realistic or stylized product images that highlight key features. Use clear, focused prompts to generate these images with transparent or simple backgrounds.
  
  

• Promo illustrations: Perfect for marketing, these illustrations can be adjusted for different tones and moods, such as celebratory, informative, or whimsical. Midjourney can generate diverse styles from photorealistic to abstract.

• Logo: Midjourney allows you to experiment with various logo concepts, even imitating the styles of renowned graphic designers. While it can generate ideas, the final logo should always be refined to ensure brand coherence.

What rules should be followed to generate UI screens properly?

1. Be specific with prompts: The more detailed your prompt, the more likely you’ll get an image that aligns with your vision. Include terms like "Figma," "4K," or "high-quality UI" to get more usable results.

2. Iterate: Midjourney’s first output may not be perfect. Experiment with different tokens or adjust for style variations, like adding design trends or specific color schemes.

3. Avoid text: Since Midjourney struggles with text accuracy, avoid generating UI screens with heavy textual content unless you plan to refine it later.

4. Use for inspiration: Consider Midjourney’s images as concept art or mood board materials, rather than finished assets.

When generating UI assets with AI tools like Midjourney, you might also want to explore Stable Diffusion, another text-to-image AI. It’s a solid alternative that can produce unique results for design assets, especially when it comes to UI elements. If you're interested in learning more about how Stable Diffusion can be used for UI design, feel free to check out this article.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• 6 Reasons Your Images Are Slowing Down Your Website by Marine Larmier

• The Ultimate Guide to Website Images [2023] by CRO:NYX Team

• Images Tutorial by The World Wide Web Consortium (W3C)

• UI Design using Midjourney by Nick Babich

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

• The hitchhiker’s guide to Accessibility: Images by Shivang Bhandari

• Ensure High Contrast for Text Over Images by Aurora Harley