Explained: 1x 2x 3x Images In Xcode

1x, 2x or 3x? What does this mean in Xcode?

1x, 2x, 3x Images For Xcode

Which image will be used for your app? That depends on the device your app is viewed on. Higher resolution devices (larger and newer devices) have more pixels on their screens. Thus they need higher resolution images to display properly without any blurring.

If you don’t supply the higher resolution (2x or 3x) images, your app will automatically try to scale the 1x image up. This is not good and can result in a distorted or blurry image!

Here’s a table showing the scale factor for popular iOS devices:

Device Scale Factor
12.9” iPad Pro 2x
11” iPad Pro 2x
10.5” iPad Pro 2x
9.7” iPad 2x
7.9” iPad Mini 2x
iPhone XS Max 3x
iPhone XS 3x
iPhone XR 2x
iPhone X 3x
iPhone 8 Plus 3x
iPhone 8 2x
iPhone 7 Plus 3x
iPhone 7 2x
iPhone 6s Plus 3x
iPhone 6s 2x
iPhone SE 2x

How To Create 1x, 2x, 3x Images For Your App

If you already have your asset but need to scaled correctly for 1x, 2x and 3x in Xcode you can try using one of these services:

Most of these services you input your image and you will get the @2x and @3x images.

How To Create 1x, 2x, 3x In Sketch

If you’re using Sketch to create your assets, simply go to the export panel and click the + icon to add the different scale factors

slider

Then you can export your logo for all the different scale factors.

If you liked this post and want to learn more, check out The Complete iOS Developer Bootcamp. Speed up your learning curve - hundreds of students have already joined. Thanks for reading!

Eddy Chung

I teach iOS development on ZeroToAppStore.com.

Similar Posts