What Should Image Sizes Be at @1X, @2X and @3X in Xcode

Do image sizes in Xcode need to be exactly the 1x/2x/3x ratio?

The reason we're using 1x,2x,3x resolutions is to show the best possible resolution on a variety of display sizes. If you're mistagging your images it could cause undesirable effects. I'm not talking about fatal problems, but still as an app developer you should aim for perfection and use the image sizes as recommended by the Human interface guidelines.
Avoiding downscaling and upscaling (by providing the correct image sizes) will result in a much nicer user interface and also less processing on the fly.

It is simple to resize the images in most photo editors, if you have many you can do a batch job in Photoshop or in the free ImageMagick command line tools.

Why do I need @1x, @2x and @3x iOS images?

If you don't have the exact size, there are two things that can happen:

Upscaling

@3x or @2x can be upscaled from @1x but usually the visual result is blurry, with thick lines and doesn't look good. Upscaling @3x from @2x can be even worse because subpixels must be used.

Downscaling

In general, the results are much better than with upscaling, however, that doesn't apply for all the images. If you have a 1px border on a @3x image, after downscaling it to @1x the border won't be visible (0.33px). The same applies for any small objects in the image. Downscaling destroys all details.

In general - for an image to look perfect, you want to avoid both downscaling and upscaling. You can always go with only @2x or @3x images and add other scales only if you see visual problems. Using higher resolution won't improve downscaling. High resolutions are used only to avoid upscaling. Downscaling from a high scale (e.g. @100x) to @1x won't create better results than downscaling from @3x.

Understanding Image Size for Different Resolution Screens

The concept is simple. The size in Storyboard or Interface Builder should be the size of you asset in @1x format.

The retina display ( or the iPhone 6+ @3x size ) does not mean than you have much space than before, it means that you can draw 2 ( or 3 ) pixels where you draw 1 before.

So for a 50x50 px Image View, cou should have 3 assets :
- Image@1x.png ( 50x50 px)
- Image@2x.png ( 100x100 px)
- Image@3x.png ( 150x150 px)

---

Related Topics