Back to blog

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

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.

To further simplify, consider pixels as the tiny dots that light up to form an image on your screen. The more pixels you have, the sharper and clearer the image. On the other hand, points serve as a consistent unit of measurement in iOS, ensuring that designs maintain their intended appearance across devices with varying pixel densities.

It’s like having a standard ruler (points) to measure different types of fabrics (pixels). This distinction is crucial because while the number of pixels might change based on the device, the point measurement remains consistent, ensuring uniformity in design.

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

The concept of 1x, 2x, and 3x image scaling is rooted in Apple’s approach to accommodate the diverse range of display resolutions across its devices. As technology advanced and screens became sharper, there was a need to ensure that graphics and images didn’t appear pixelated or blurry on these high-resolution screens. Hence, the introduction of retina and super retina displays. The 1x, 2x, and 3x nomenclature is a straightforward way for developers to provide graphics optimized for these varying display qualities.

• 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)
• [email protected] for the 2x image size
• [email protected] 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!

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.

In the dynamic world of iOS development, adapting to various screen sizes isn’t just a luxury but a necessity. With a plethora of devices, each with its unique screen size and resolution, developers are often faced with the challenge of ensuring their apps look and function optimally across the board.

This is where understanding image scaling becomes pivotal. By leveraging the 1x, 2x, and 3x scaling mechanisms, developers can ensure that their apps’ visuals remain sharp and clear, irrespective of the device it’s viewed on.

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 [email protected] and [email protected].

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.

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…

• The Ultimate Guide to iPhone Resolutions (PaintCode)
• The iOS Design Guidelines (Ivo Mynttinen)
• Human Interface Guidelines (Apple)

Conclusion

Understanding image scaling and the intricacies of screen resolutions is crucial for iOS development. With various iPhone models boasting different screen sizes and pixel densities, it’s essential for developers to grasp the concepts of points, pixels, and the 1x, 2x, and 3x scaling mechanisms. By doing so, they can ensure their apps look sharp and function optimally across all devices.

Create Your App Now