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. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density and a scale factor of 2.0 (referred to as @2x). As a result, high-resolution displays demand images with more pixels.

Diagram of a circle rendered at standard resolution and having 10 x 10 pixels.

@1x (10px × 10px)

Diagram of a circle rendered at high resolution with scale factor 2.0 and having 20 x 20 pixels.

@2x (20px × 20px)

Supply images with a scale factor of @1x and @2x for all your app’s artwork. You accomplish this by multiplying the number of pixels in each image by the scale factor. 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.