Image Size and Resolution

The coordinates system macOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. On a standard-resolution screen, one point is equal to one pixel. High-resolution screens have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.

@1x (10px × 10px)

@2x (20px × 20px)

Supply images with a scale factor of @1x and @2x for all your app’s artwork. In a @1x graphic, one point equals one pixel. In a @2x graphic, one point equals two pixels. For example, an icon that’s 18pt × 18pt translates to 36px × 36px @2x. Append a suffix of “@2x” to your @2x image names, and insert them into @2x fields in the asset catalog of your Xcode project.

Designing High-Resolution Artwork

Produce art at the largest size you need and scale it down for smaller sizes. It’s easiest to design a detailed image at a large size and reduce the level of detail, if necessary, at smaller sizes.

Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.

If necessary, redraw art at smaller sizes. If you’re not satisfied with the results when you scale down art, redraw it.