How to Add Images for Different Screen Size from Assets.Xcassets in Xcode 8

How to add Images for different screen size from Assets.xcassets in Xcode 8?

I would have created the following sizes:

iPhone:

• @1x - 640 x 1136 (iPhone SE)
• @2x - 750 x 1334 (iPhone 7, 6S)
• @3x - 1242 x 2208 (iPhone 7 Plus, iPhone 6S Plus)
  

iPad:

• @2x - 2048 x 1536 (iPad Air, Retina iPad 1st & 2nd Generation / 3rd & 4th & Pad Mini 2nd & 3rd Generation)

Images sizes for different screen

Here is how to add an image to your project:

1. In the Project Navigator, open the Assets.xcassets by double-clicking on it.
2. Control-click in the blank area below AppIcon and select New Image Set from the pop-up.
3. A new asset called Image will appear. Click on Image and give it the name you want to use, (for example "house").
4. Drag and drop 2x and 3x PNG images into the appropriate spots. If your image is 20 x 20 points on screen, then your 2x image should be 40 x 40, and your 3x image should be 60 x 60. It is up to you to make sure those images have the proper detail and are not just scaled up low resolution images. (See Xcode images explanation for more background on 1x, 2x and 3x images).
5. In your code, you can load the image with let image = UIImage(named: "house") and iOS will select the proper resolution image for your device. The iPhone 5 will use the 2x version, and the iPhone 6 Plus will use the 3x version.

xcode - asset catalog - image type - same scale - different resolutions

There are two options you can follow for setting background images for different devices.

1-) Setting UIImageView content mode to .aspectFill. By settings this property, your image will be croped for different aspect ratios but original aspect ratio will be protected. I recommend this option If you use repetitive images for background.

2-) Setting two different asset file for different aspect ratio and resolution. If you follow this option, in code, you need to check for the device and set the proper image asset.

let image: UIImage!
if UIDevice().userInterfaceIdiom == .phone {
switch UIScreen.main.nativeBounds.height {
    case 1920, 2208:
        print("iPhone 6+/6S+/7+/8+")
        image = UIImage(named:"StandartBackground.png")
    case 2436:
        print("iPhone X, XS")
        image = UIImage(named:"XBackground.png")
    case 2688:
        print("iPhone XS Max")
        image = UIImage(named:"XSBackground.png")
    }
}

Advice: Common and proper way is first option but there will be cases which won't suite it. Therefore, try to avoid second option but If have no other option. Put every different aspect ratio to different asset file.

Text size is changed when add launch images by xcasset

iOS 9 use San Francisco as the default font, where iOS 8 user Helvetica.

Xcode 6 - xcassets for universal image support

This is a little confusing - here's how I understand it (this is in reference to the top image):

• 1x images are for the original iPhone through the 3GS - 'standard' resolution devices (3.5" screens)

• 2x images are for the iPhone 4 and 4S (3.5" Retina screens) and are also used for the iPhone 6.

• Retina 4 2x are for the iPhone 5 and 5s (4" Retina screens)

• 3x images are for the new iPhone 6+ (5.5" super-Retina [3x] screen)

I believe that the iPhone 6 (4.7" screen) will use the Retina 4 2x images, but I would have to test it.

Side note, when I create a Launch Image inside my xcassets file, I am shown these options, which basically has all the device I am supporting. Just wondering why this is not also the case when creating an Image Set

If you compare the two images, the lower one has everything the upper one does, except for a 1x iPhone graphic. You don't need that if you're only supporting iOS 7 and above, since iOS 7 doesn't run on any non-Retina phone-form devices. To be honest, I don't understand why the top image has a 1x iPhone form graphic option - maybe because you checked the "iPhone" box in the sidebar?

Also how do you guys approach creating images/sprites for a universal application

For most non-fullscreen images (like a logo), you really only have 3 resolutions to support - standard (1x), Retina (2x), and the iPhone 6+ (3x). These are simply different quality of images, not really different sizes. So if you have a 10x10 image on a standard device, that would mean you need a 20x20 image on a Retina device and a 30x30 image on an iPhone 6+. On all devices, they would show up as a 10x10 image.

A great tool I used for managing different resolutions of icons is iConify.

I create them at the highest size I need (30x30 [@3x] for an image I want to be 10x10 on a device), then save it as a png and resize copies to 20x20 [@2x] and 10x10 [standard]. A better solution would be to create and use vector graphics, which would resize better to any size.

How to load specific image from assets with Swift

You cannot load images directly with @2x or @3x, system selects appropriate image automatically, just specify the name using UIImage:

UIImage(named: "green-square-Retina")

---

Related Topics