1x, 2x and 3x Image Scaling on iOS Explained

Written by Abhinav Girdhar on August 20 2020 in App Development, iOS

1x, 2x and 3x Image Scaling on iOS Explained

How does image scaling work on iOS, and what does @2x mean? Different iPhone and iPad models have different screen sizes and pixel densities (PPI). This affects the graphics assets, images and artwork you’re going to use in your iOS app.

In this tutorial, you’ll learn more about:

  • The difference between points and pixels
  • When to use 1x, 2x and 3x image scaling
  • File naming conventions with @2x and @3x
  • How to keep working with different screen resolutions simple
  • Recommended tools and resources

Ready? Let’s go.

  1. Pixels and Points
  2. Image Scaling with 1x, 2x and 3x
  3. Screen Sizes and Scaling in Practical iOS Development
  4. Resources and Cheatsheets
  5. Further Reading

Pixels and Points

Different iPhone models have different screen sizes and pixel densities. For example, an iPhone 11 Pro Max’s screen measures 6.5″ across. You can fit 1242 × 2688 pixels on its screen.

Compare that to the iPhone 11, with 6.1″ and 828 × 1792 and you can deduce that the pixels-per-inch (PPI) of an iPhone Pro Max is greater. You can fit more pixels in the same space, which means that images on screen appear with more detail.

What does that mean for iOS development? As app developers and designers, we need to take into account different screen sizes and pixel densities. This is made easier thanks to 2 important concepts:

  1. Points: Instead of measuring UIs in pixels, we use points. Depending on the iPhone model, one point corresponds to a raster of 1×1, 2×2 or 3×3 pixels. You can use the same point size on any iPhone model without needing to calculate how many pixels that is. This is similar to density independent pixels (dips) on Android.
  2. @2x, @3x: When you can fit more pixels on the same screen real-estate, you also need higher resolution images. This is where 1x, 2x and 3x come in. You provide higher resolution image files for the same assets, which are automatically selected by iOS when your app runs on a high-PPI iPhone model.

Your head spinning yet? Don’t worry! It boils down to a simple rule: More pixels in the same square inch means you need bigger images! We use density-independent points to not have to worry about pixels.

Image Scaling with 1x, 2x and 3x

Let’s check out an example:

Example of pixel densities and scale on iOS

In the above image you can see an example (yours truly!) of the same image with different pixel densities, and how that affects the amount of detail in the photos.

  • On the first row you see 3 images, represented in absolute pixels; every pixel is the same size on screen. As a result, an image with a fewer number of pixels is smaller than an image with more pixels.
  • On the second row you see the same image, represented in relative points; every point is the same size. Pixels are more “blown up” and pixelated on the left, and there’s more detail in the photo on the right.

How does this translate to iPhone screen sizes? Let’s say we show the above images on an old iPhone 3GS, an iPhone 8 and an iPhone X. Also imagine that each of those iPhone’s has the same absolute screen size, like 5.8 inch across.

That means that…

  • … on the iPhone 3GS we use the 1x image of 75 × 75 pixels
  • … on the iPhone 8 we use the 2x image of 150 × 150 pixels
  • … on the iPhone X we use the 3x image of 225 × 225 pixels
  • … and on every iPhone the size of the image is 75 × 75 points
    (If those iPhones really had the same screen size, these 3 images would have the same physical size, too!)

If you were to design a User Interface that includes a user’s avatar photo, you’d simply set the UIImageView or Image view to dimensions of 75 by 75 points. The amount of pixels differs within that space, from 1x to 2x to 3x. More pixels in the same square inch means you need bigger images!

Xcode and iOS have file naming conventions for 1x, 2x and 3x image assets. It’s quite simple:

  • filename.png for the base image size (so no @1x)
  • filename@2x.png for the 2x image size
  • filename@3x.png for the 3x image size

When you import images in an asset catalog in Xcode, it’s smart to drag-and-drop the 3 image sizes in one go. This will link them together, creating one image asset, with 3 size variations. Neat!

Adding images to asset catalog in Xcode

Screen Sizes and Scaling in Practical iOS Development

How does this affect practical, day-to-day iOS development? Let’s take a birds-eye view of screen sizes, image scaling, and 2x-3x.

As an iOS developer, it’s important to understand the concepts of scaling, screen resolution, pixels-per-inch, and the @2x and @3x file name conventions.

We’ve discussed how different iPhone models have a different absolute screen size and resolution, which results in a distinct pixels-per-inch (PPI) for that iPhone. When you can fit more pixels in the same “physical” space, you need bigger images. You provide those images in your iOS app through Xcode, and the filename@2x.png and filename@3x.png.

As you build your app, its graphics, icons, images and UI are usually provided as scale-independent vector graphics. This means you can export those graphics in pretty much any resolution you want. Tools like Sketch allow you to exports graphics files with the right settings automatically.

Export vector graphics at 1x 2x 3x in Sketch

When your workflow permits it, you can of course also export graphics directly in a vector format. Xcode 12 and onwards supports SVG, which is a standardized format for vector graphics, such as icons, illustrations and graphs.

A common mistake in working with scaled images is mixing up the base image size. When you’ve got a 1x, 2x and 3x image, what’s the size of that image in points?

You take the 1x image size, i.e. 75 × 75 pixels, and convert that to points: 75 × 75 points. This is the point size of that image, regardless of resolution.

Another potential snafu to keep in mind is that your graphic designer’s MacBook also has gotten a higher resolution Retina screen. This means they sometimes design a User Interface already at 2x resolution, for example at 750 × 1334 pixels (iPhone 8). That’s a 2x screen resolution, so you need to divide asset sizes by 2 or multiply by 1.5x to get to @2x and @3x respectively.

The size of an image (or UI element) within the User Interfaces of your app is governed by Auto Layout (or SwiftUI). With Auto Layout, for example, you position an image relative to the screen’s edge. This is not affected by screen PPI, to the extent that Auto Layout’s points are scaled up or down too, of course.

Resources and Cheatsheets

It’s almost impossible to work with scaling and PPI’s without a few excellent resources. Bookmark ’em, pin ’em, keep ’em open in a tab…

Further Reading

Awesome! Image scaling and @2x are challenging to wrap your head around initially, but they’re essential to practical iOS development.

Here’s what we’ve discussed:

  • The difference between points and pixels
  • When to use 1x, 2x and 3x image scaling
  • File naming conventions with @2x and @3x
  • How to keep working with different screen resolutions simple
  • Recommended tools and resources

Want to learn more? Check out these resources: