Image view
An image view is a component used to display images in an interface, either as static visuals, animated previews, or part of a larger content block.
Philosophy
Image views make content visual, expressive, and scannable.
They bring context and emotion to otherwise text-heavy layouts.
They serve as content carriers (e.g., photos, product images).
They must balance clarity, responsiveness, and performance.
Anatomy
Variants
Standard
Displays image.
States
Idle
Image displayed.
Usage tips
Dos
Use high-quality images optimized for performance.
Maintain consistent aspect ratios in collections.
Provide fallbacks (solid color, icon) for missing images.
Always include alt text for accessibility.
Don’ts
Don’t stretch or distort images.
Don’t rely on images without descriptive labels in functional UIs.
Don’t overload with too many overlays that obscure the content.
Real-world example
