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 by 10 pixels.

@1x (10px × 10px)

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

@2x (20px × 20px)

For example, suppose you have a standard resolution @1x image that’s 100px × 100px. The @2x version of this image would be 200px × 200px.

Supply high-resolution images 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. For templates and other resources, see Apple Design Resources.

Always preview high-resolution images at lower resolutions. If you’re not satisfied with how your high-resolution images look when scaled down, redraw and preview the art again.