Why Do I Need @1X, @2X and @3X iOS Images

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.

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.

Do I need to add @2x and @3x images for iPad application?

If your deployment target is iOS 7 or later then you require two launch images 1x and 2x of size 768 x 1024 pixels and 1536 x 2048 pixels respectively for portrait and vice versa for landscape for iPads!

You can easily know this from the attributes inspector - expected size after clicking any 1x or 2x image from launchImage from assets!

And you do not require 3x images for iPads!

Adding @2x and @3x pictures without 1x version

Use asset catalogs. See Apple Documentation

Then it's really easy to define 1x, 2x and 3x images by drag&drop. If you load the image in code by name (without scale) it works like a charm. If 1x is missing the next possible image will be used automatically.



Related Topics



Leave a reply



Submit