Image Optimizations

Optimizing your app’s images improves performance. Think about the needs of your app and how you might design your image files to be as small as possible while achieving optimal performance and maintaining the visual style you want.

Produce artwork in the appropriate format. Use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it's lossless, compression artifacts don't blur important details or alter colors. It's a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for flat, vector artwork that requires high-resolution scaling.

Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.

Optimize JPEG files to find a balance between size and quality. You can compress most JPEG files without noticeable degradation of the image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.

Avoid transparency. Images with transparency include an alpha channel, which increases the file size. If you always composite an image on the same, solid background color, it’s more efficient to include the background in the image. However, transparency is necessary in complication images, menu icons, and other glyphs that serve as template images. The system tints these images programmatically.

Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.

Device-Specific Images

Wherever possible, use a single image for multiple screen sizes. In many cases, you can use a single image for the 40mm, 42mm, and even the 38mm screen. However, the 44mm screen provides considerably more space, and can benefit from larger images.

Xcode allows you to specify a different version of an image for each screen size. When loading images from your app’s image asset catalog, WatchKit attempts to load the image for the device’s screen size. If you don’t have an image for that screen size, WatchKit falls back to the next closest image.

For example, if you don’t provide a 44mm image, the system attempts to load the 40mm. This continues down the chain from 44mm to 40mm to 42mm to 38mm to Universal. The system loads the first image it finds.

Autoscaling PDF Images

Autoscaling PDFs let you provide a single asset for all four screen sizes. Design your image for the 40mm and 42mm screens at 2x. When you load the PDF, WatchKit automatically scales the image based on the device’s screen size, as shown below:

Screen size Image scale
38mm 91%
40mm 100%
42mm 100%
44mm 110%