Image: learn how the system displays content on the screen.

To ensure your artwork appears properly on all supported devices, it's important to understand how content is displayed on different screens.

Feburary 12, 2023 | 5 minutes read

Share this article

Scale Factors

The measurement system used by all platforms is based on points, which correspond to pixels on the display. A standard-resolution display has a pixel density of 1:1 (also known as @1x), meaning that one pixel equals one point. High-resolution displays have higher pixel densities, such as 2:1 or 3:1, which are known as @2x and @3x, respectively. This means that high-resolution displays require images with more pixels because of their increased pixel density.

Formats

Image Type	Format
Bitmap or raster work	De-interlaced PNG files
PNG graphics that don't require full 24-bit color	An 8-bit color palette
Photos	JPEG files, optimized as necessary, or HEIC files
Flat icons, interface icons, and other flat artwork that requires high-resolution scaling	PDF or SVG files

Best Practices

It's recommended that you provide high-resolution images for all artwork used in your app, regardless of the device being used. This can be achieved by increasing the number of pixels in each image based on a specific scale factor. When adding images to your project's asset catalog, it's important to identify their scale factor by adding "@1x," "@2x," or "@3x" to the end of their filename. The following values can serve as a reference to help determine appropriate pixel densities.

Platform	Scale Factors
iOS	@2x and @3x
iPadOS	@2x
macOS, tvOS	@1x and @2x
watchOS	@2x

As a general rule, it's recommended to design images at a lower resolution and then scale them up to create high-resolution assets. When using resizable vectorized shapes, it may be useful to position control points at whole values so that they align cleanly at a resolution of 1x. This will allow the points to remain aligned to the raster grid at higher resolutions since 2x and 3x are multiples of 1x. However, there may be situations where it's not necessary or desirable to align a shape precisely to the raster grid, such as when aligning a circle to the grid can result in a flattened appearance at the top and bottom.

Color:

It's important to include a color profile with each image to help ensure that the colors in your app appear accurately on different displays. Color profiles can help maintain color consistency across various devices and platforms.

Actual Devices:

It is important to ensure that images are tested on multiple real devices. An image that appears visually appealing during the design phase may not necessarily look good when viewed on different devices. It could appear distorted, blurry, or compressed due to variations in device specifications such as screen size, resolution, and pixel density. Therefore, it is crucial to check how images

Platform Considerations

No additional considerations for iOS, iPadOS, or macOS.

tvOS

The Apple TV user experience is centered around images that are created using multiple layers. These layered images utilize features such as transparency, scaling, and motion to produce a realistic and dynamic feel that fosters a personal connection between users and the onscreen content. This combination of visual elements results in a lively and engaging interface that enhances the overall user experience.

Parallax Effect

The system employs a subtle visual effect known as Parallax to create a sense of depth and movement when a particular element is in focus. When an element comes into focus, the system raises it to the foreground and gently moves it, while also adding illumination that gives the element's surface a shiny appearance. Conversely, if an element is out-of-focus and inactive for a period of time, it dims, while the focused element enlarges, providing a clear indication of the user's current point of focus. This technique adds a dynamic and engaging aspect to the system's interface.

Layered images are required to support the parallax effect.

Layered Images

It is recommended to utilize standard interface elements. When displaying layered images in order to ensure a seamless user experience. By using standard views and system-provided focus APIs like Focus State, the layered images will receive the parallax effect automatically when a user brings them into focus.

To create a visually pleasing layered image, it is important to categorize the elements into logical foreground, middle, and background layers. In the foreground layer, it is best to display prominent elements such as characters in a game, or text on an album cover or movie poster. Middle layers are suitable for secondary content and effects, such as shadows and highlights that complement the foreground elements. Background layers serve as opaque backdrops that highlight the foreground and middle layers without drawing too much attention away from them.

In general, it is recommended to keep text in the foreground layer of a layered image. This ensures that the text remains clear and legible, and is not obscured by other elements.

It is important to ensure that the background layer of a layered image is opaque,meaning it is not transparent or see-through. While varying levels of opacity can be used to allow content from higher layers to shine through, the background layer must remain opaque to avoid errors.

When creating layered images, it is important to keep the layering simple and subtle. The parallax effect is designed to be subtle and almost imperceptible, so excessive use of 3D effects can appear unrealistic and jarring to users.

It is important to leave a safe zone around the primary content in a layered image to ensure that it remains visible during focus and parallax effects. It is important to leave a safe zone around the primary content in a layered image to ensure that it remains visible during focus and parallax effects.

It's important to pay close attention to the previewed images, as this can help identify potential issues and areas that may require further refinement. Once the layered images are finalized, it is also advisable to preview them on an actual TV to get the most accurate representation of what users will see. This can help ensure that the images are optimized for the specific viewing conditions of an actual TV and that the user experience is as seamless as possible.

You have two options for adding layered images to your app: you can either create them yourself using certain tools, or you can retrieve them from a content server when your app is running.­­

• Parallax Previewer App for macOS: The Parallax Previewer app for macOS allows you to import PNG files, layered images created with the Parallax Exporter plug-in, and layered Photoshop images. You can use these images as individual layers for parallax effect. Additionally, you can export LSR files that can be directly imported into an Xcode project.
• Parallax Exporter Adobe Photoshop Plug-in: The Parallax Exporter plug-in for Adobe Photoshop enables you to test your layered images within Photoshop and then export them as LSR files. These LSR files can be directly imported into an Xcode project.
• Xcode: In Xcode, you can add standard PNG files to your app's asset catalog and use them as individual layers in an image stack. These image stacks can be exported as LSR files, and Xcode can also import LSR files.

watchOS

To reduce the size of image files, it's best to avoid using transparency whenever possible. Including a solid background in the image can make it more efficient, especially if you always composite the image on the same background color. However, transparency is essential in certain cases, such as complication images, menu icons, and other interface icons that serve as template images. In these cases, the system uses transparency to determine where to apply color.

You can use autoscaling PDFs as a single asset for all screen sizes. To do this, design your image for the 40mm and 42mm screens at 2x resolution. When you load the PDF into WatchKit, it will automatically scale the image based on the device's screen size using predefined values.

Screen Size	Image Scale
38mm	90%
40mm	100%
41mm	106%
42mm	100%
44mm	110%
45mm	119%
49mm	119%