Xcode Images Explanation

Xcode images explanation

iOS uses points instead of pixels in its coordinate systems. In the original non-retina devices (iPhone, iPhone3G, iPhone3GS, iPad, iPad 2, iPad mini, and early iPod touches) one point in the coordinate system mapped to one pixel on the screen of the device. At that time, life was simple, you provided images to your app that mapped to the point size and everything looked great.

When Apple introduced the first retina display devices (iPhone 4, iPad with Retina Display, and iPod touch 4), the devices had 2 pixels for every point. Apple devised a clever way of dealing with this. The programmer just had to add a second image to their program with the increased resolution and add @2x to the name. No changes to the code were needed. If your code loads an image called "house", iOS will load "house" on a non-retina device (such as the iPad 2 or original iPad mini), and it will use "house@2x" for the retina devices. The iPhone 6 Plus has even higher resolution so it uses a @3x version.

So what makes an image @1x, @2x, or @3x? If your "house" image is 120 pixels by 90 pixels, then your "house@2x" image should be 240 by 180 pixels, that is twice the number of pixels in each dimension ("2x" for short). The "house@3x" version should be 360 by 270 (3 times the number of pixel in each dimension).

It's up to you to make sure that the @2x and @3x versions have more detail, and not just more pixels. You can use a program like Photoshop or Pixelmator to create your images. Start by creating the nice highly detailed version of your image (the @3x version), and then scale it down to the @2x resolution and save that version as your @2x version. Then open your @3x version again and scale it to the @1x resolution and save that as your @1x version. Add all three versions to the Assets Catalog in Xcode, and iOS will load the appropriate version for the appropriate devices.

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 I need the different image sizes for the Xcode assets?

You need image assets for all dimentions!

Think like this - you didn't provide image assets for all of them and the system start to upscaling or downscaling the image as result the system will do more work from expected. And now imagine that you put 2 or 3 in TableView or CollectionView for example. All of the scalled images must be stored somewhere ... ofcourse everything is comming with the price.

In short it is to decrease memory/disk usage so it is all about increasing performance and user experience.

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

The text on top of my 2 UI images is not showing in storyboard

I've seen this happen before...

When there are image views layered on top of each other, it seems that sometimes auto-layout renders the top-most image view on top of views that are on top of it (yeah, confusing with all the "on top of").

Easier way to explain:

- image view
  - image view
    - label

gets rendered as:

- image view
  - label
    - image view

I've never found an explanation for why, but that is what's happening.

Couple options:

Embed your image views as subviews of a UIView, or

On viewDidLoad() explicitly bring the label and text field to the front:

class OrderViewController: UIViewController {

    @IBOutlet var userNameLabel: UILabel!
    @IBOutlet var userNameTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        view.bringSubviewToFront(userNameLabel)
        view.bringSubviewToFront(userNameTextField)
    }

}

iOS Xcode fill background image based on percentage

You can use UIImageView. To make an image fill the screen, set imageView.contentMode to ScaleAspectFill.

To make UIImageView fill the screen, use auto layout. The easiest way is to add 4 constraints for UIImageView. Spacing to nearest neighbor = 0 will do. Like so:

Or leading/trailing/top/bottom space to superview = 0, if you like.

button image gets pixelated

Bigger is not necessarily better for a UIButton's image. Try to export your icon in more or less the same size with which it will be used. (Note that this also frees up memory in comparison to a way bigger image).

To adapt to different screens' resolutions, you should provide up to three images (@1x, @2x, @3x). You should read this excellent Apple's documentation on Image Size and Resolution. It explains perfectly how big should the images you provide in Xcode be.

They also have a good explanation on which format you should use according to the purpose of the image.

EDIT:
You can also use vector ressources (.pdf files for instance) that will render perfectly for any resolution. You can read this article about how to implement it in your Xcode project (If you do so, please be careful in the attributes of the asset to check Preserve Vector Data and the Scales to Single Scale, otherwise it may not render well).

---

Related Topics