Image
An image component displays a graphic, photo, or illustration within the interface. Images can range from product photos in an e-commerce gallery to decorative visuals that support branding or storytelling. In a design system, images may appear in various shapes and sizes (e.g., rectangular, square, circular) and must be handled consistently to ensure proper loading, layout, and accessibility.
Usage
Visual Representation: Images provide a direct, recognizable representation of real items, people, or scenes.
Branding & Storytelling: Hero images, promotional banners, and custom illustrations can reinforce brand identity or narrative.
Contextual Support: Showing a relevant picture next to descriptive text can help users quickly understand content (e.g., tutorial steps, news articles).
Click & Zoom: In some interfaces (e.g., galleries, product details), images may be zoomable or clickable for a closer look or more info.
Use cases
Product or item images in a shopping catalog
Hero/banner images on a landing page
User-uploaded photos in a social or profile context
Decorative or illustrative graphics enhancing page themes
Not to be confused with
Icon: Icons are typically small, symbolic graphics used for actions or statuses. An image often conveys richer or more detailed visuals, such as photographs or illustrations.
Avatar: An avatar specifically represents a person or entity’s profile image. Images, by contrast, can depict anything: products, scenery, infographics, etc.
Best practices
Optimize File Format & Size
Use appropriate formats (JPEG, PNG, WebP, SVG) based on the content.
Compress images to minimize file size while maintaining acceptable quality.
Consider responsive image techniques (srcset, sizes) to serve correct resolutions for different devices.
Responsive & Adaptive Layout
Ensure images scale and maintain aspect ratio across various screen sizes.
Define max-width or use CSS container queries for a fluid design.
Provide Meaningful Alt Text
For screen readers or scenarios where the image can’t load, alt text ensures accessibility and context.
If the image is purely decorative, use an empty alt="" or appropriate ARIA attributes to skip it.
Lazy Loading
Defer loading of offscreen images to improve initial page performance (e.g., loading="lazy" in HTML or custom JavaScript).
Confirm that lazy loading behaves correctly on older browsers or with JavaScript disabled if that’s a concern.
Consistent Styling
Align image borders, shapes (rounded corners, circle masks), and shadows with the design system.
Maintain consistent spacing or margins so images don’t break the layout’s rhythm.
Fallback Handling
If an image fails to load, display a placeholder or fallback illustration to avoid empty or broken layouts.
Provide helpful text or an icon in place of the missing image if essential to the user’s understanding.
Support Hover/Click Interactions (If Applicable)
For interactive images (e.g., clickable thumbnails or lightbox galleries), provide visual cues (e.g., hover states, cursor changes).
Offer zoom or fullscreen capabilities if high-resolution detail is important.
Avoid Distorting Aspect Ratios
Keep the original proportions or use cropping rules to maintain a visually coherent result.
Document cropping or resizing practices for consistent brand presentation.
Always evaluate whether an image adds value; avoid “filler” visuals that may increase load times without improving comprehension.
Summary
An image is a key visual component that can greatly enhance a user’s understanding or emotional connection to content. By choosing appropriate formats, optimizing for responsiveness and performance, and ensuring accessibility (especially through alt text), images can effectively convey information or reinforce brand messaging. Combining consistent styling, fallback strategies, and potential interactions (like zoom or hover effects) helps maintain a polished, user-friendly experience across all devices.
