- Platforms
- Foundations
-
Patterns
- Overview
- Accessing private data
- Charting data
- Collaboration and sharing
- Drag and drop
- Entering data
- Feedback
- File management
- Going full screen
- Launching
- Live-viewing apps
- Loading
- Managing accounts
- Managing notifications
- Modality
- Multitasking
- Offering help
- Onboarding
- Playing audio
- Playing haptics
- Playing video
- Printing
- Ratings and reviews
- Searching
- Settings
- Undo and redo
- Workouts
-
Components
- All components
- Content
- Layout and organization
- Menus and actions
- Navigation and search
- Presentation
- Selection and input
- Status
- System experiences
- Inputs
-
Technologies
- All technologies
- AirPlay
- Always On
- App Clips
- Apple Pay
- Augmented reality
- CareKit
- CarPlay
- Game Center
- HealthKit
- HomeKit
- iCloud
- In-app purchase
- Live Photos
- Mac Catalyst
- Machine learning
- Maps
- Messages for Business
- NFC
- Photo editing
- ResearchKit
- SharePlay
- ShazamKit
- Sign in with Apple
- Siri
- Tap to Pay on iPhone
- Wallet
Image views
An image view displays a single image — or in some cases, an animated sequence of images — on a transparent or opaque background.
Within an image view, you can stretch, scale, size to fit, or pin the image to a specific location. Image views are typically not interactive.
Best practices
Use an image view when the primary purpose of the view is simply to display an image. In rare cases where you might want an image to be interactive, configure a system-provided button to display the image instead of adding button behaviors to an image view.
If you want to display an icon in your interface, consider using a symbol or interface icon instead of an image view. SF Symbols provides a large library of streamlined, vector-based images that you can render with various colors and opacities. An interface icon (also called a glyph or template image) is typically a bitmap image in which the nontransparent pixels can receive color. Both symbols and interface icons can use the accent colors people choose.
Content
An image view can contain rich image data in various formats, like PNG, JPEG, and PDF. For more guidance, see Images.
Take care when overlaying text on images. Compositing text on top of images can decrease both the clarity of the image and the legibility of the text. To help improve the results, ensure the text contrasts well with the image, and consider ways to make the text object stand out, like adding a text shadow or background layer.
Aim to use a consistent size for all images in an animated sequence. When you prescale images to fit the view, the system doesn't have to perform any scaling. In cases where the system must do the scaling, performance is generally better when all images are the same size and shape.
Platform considerations
No additional considerations for iOS or iPadOS.
macOS
If your app needs an editable image view, use an image well. An image well is an image view that supports copying, pasting, dragging, and using the Delete key to clear its content.
Use an image button instead of an image view to make a clickable image. An image button contains an image or icon, appears in a view, and initiates an instantaneous app-specific action.
tvOS
Many tvOS images combine multiple layers with transparency to create a feeling of depth. For guidance, see Layered Images.
watchOS
Use SwiftUI to create animations when possible. If necessary, you can use WatchKit to animate a sequence of images within an image element. For developer guidance, see WKImageAnimatable.