Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by mattlebl
mattlebl
10,849 Points

How should I set up images to scale on different devices? (i.e. @x2 & @x3 suffixes)

Are there any specific dimensions for the images? Can someone explain these suffixes to me?

1 Answer

Greg Kaleka
Greg Kaleka
39,021 Points

For app icons and certain other images, you'll need to follow certain dimensions. However, for most, you just need to have 1x, 2x and 3x resolution versions, with no set size for what any one would be.

For example, if you have a 100px by 100px image, you'll also need a 200px by 200px and a 300px by 300px version. iOS will handle serving up the correct image based on the device. Typically you'd start with the highest resolution and use a tool like photoshop to scale images down.

mattlebl
mattlebl
10,849 Points

Awesome. Thanks so much!

mattlebl
mattlebl
10,849 Points

Just a follow-up question though, when building interfaces, how does IB choose which version to display, taking size classes into consideration?

Greg Kaleka
Greg Kaleka
39,021 Points

My guess is it's based on your computer screen's resolution, not the device being depicted.

To be clear, the different size images are shown in the same "space" - the 2x and 3x are just more pixel-dense, and so they look sharp on higher-res devices.