Image Optimization

Optimizing your app’s images improves performance. Strive to design your image files to be as small as possible while achieving optimal performance and maintaining the visual style you want.

Use one image for all display sizes. Multiple versions of a single image require more space. If an image looks sharp on all display sizes, use it. Use separate images only when a single image doesn’t work (for guidance, see Providing Device-Specific Images If Necessary). Alternatively, you can provide a PDF image that automatically scales based on the screen size (for guidance, see Autoscaling PDF Images).

Create your images using the correct file format. Depending on your image needs, the following formats give good results:

  • Use deinterlaced PNG files for bitmap/raster artwork and for photo-realistic app icons. PNG supports transparency and, because it's lossless, compression artifacts don't blur important details or alter colors. PNG is a good format 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.
  • 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, so it’s worth experimenting 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. For guidance, see Content.

Providing Device-Specific Images

When necessary, use a single image for all screen sizes. In many cases, you can use a single image for the 40mm, 42mm, and even the 38mm screen. However, the 44mm screen has considerably more space, and can benefit from larger images.

Xcode lets you 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 supply an image for that screen size, WatchKit defaults to the image that’s closest in size. For example, if you don’t provide a 44mm image, the system attempts to load the 40mm. The system looks for images in order from 44mm to 40mm to 42mm to 38mm to Universal, and loads the first image it finds.

Autoscaling PDF Images

Autoscaling PDFs let you provide a single asset for all 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, using the values shown below:

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