HIG Playground Home GitHub 🇺🇸 EN
HIG Lab → HIG Playground → Image Views

Image Views

Explore various iOS Image View display options interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41
●●●● WiFi 🔋
Image Views
Primary Image
Secondary Image
⚠️ HIG Violation: Image is not displayed correctly
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Maintain the original aspect ratio of images
  • Use appropriate resolution for the display (2x/3x)
  • Provide accessibility descriptions for meaningful images
  • Use clipShape for consistent styling

✗ Don't Do This

  • Stretch images disproportionately
  • Use low-resolution images on Retina displays
  • Forget alternative text for accessibility
  • Apply excessive filters or overlays

👆 See the bad pattern in the iPhone preview above

0
8
16
24
None
Circle
RoundedRect
Capsule
Show Overlay
Show Shadow
SwiftUI Code
Image("photo") .resizable() .aspectRatio(contentMode: .fit)
HIG Lab — Apple Human Interface Guidelines Interactive Playground