Image Resolution For New Iphone 6 and 6+, @3X Support Added

Image resolution for new iPhone 6 and 6+, @3x support added?

I've tried in a sample project to use standard, @2x and @3x images, and the iPhone 6+ simulator uses the @3x image. So it would seem that there are @3x images to be done (if the simulator actually replicates the device's behavior).
But the strange thing is that all devices (simulators) seem to use this @3x image when it's on the project structure, iPhone 4S/iPhone 5 too.

The lack of communication from Apple on a potential @3x structure, while they ask developers to publish their iOS8 apps is quite confusing, especially when seeing those results on simulator.

**Edit from Apple's Website **: Also found this on the "What's new on iOS 8" section on Apple's developer space :

Support for a New Screen Scale
The iPhone 6 Plus uses a new Retina HD display with a screen scale of 3.0. To provide the best possible experience on these devices, include new artwork designed for this screen scale. In Xcode 6, asset catalogs can include images at 1x, 2x, and 3x sizes; simply add the new image assets and iOS will choose the correct assets when running on an iPhone 6 Plus. The image loading behavior in iOS also recognizes an @3x suffix.

Still not understanding why all devices seem to load the @3x. Maybe it's because I'm using regular files and not xcassets ? Will try soon.

Edit after further testing : Ok it seems that iOS8 has a talk in this. When testing on an iOS 7.1 iPhone 5 simulator, it uses correctly the @2x image. But when launching the same on iOS 8 it uses the @3x on iPhone 5.
Not sure if that's a wanted behavior or a mistake/bug in iOS8 GM or simulators in Xcode 6 though.

Why does iPhone 6 use @2x image assets?

iPhone 6 uses @2x image assets and not R4 or something else because apple didn't provide suitable APIs for background images!

The most direct way now is to create 2 assets and programatically load them :(

Check this out: How to specify size for iPhone 6/7 customised edge-to-edge image?

Supporting iPhone 6 and iPhone 6+ with different launch/splash screen image for iPad Portrait and Landscape orientations

You don´t have to use the launch screen file to make your App iPhone 6 / 6+ resolution compatible. Instead, you can select the LaunchImage asset as your Launch Images Source.

It can be found at "App Icons and Launch Images" under your Targets:

Sample Image

If there is no LaunchImage asset just go to your Images.xcassets, make a secondary click (right click) and select "New Launch Image":

Sample Image

The result is something like that:

Sample Image

Now just drag and drop your images for the specific resolutions you want to support and set the created LaunchImage asset as your source.

Hope it helps

Cheers

Image resolution for iPhone 6/6s and 5/5s

1x images are only used by non-retina devices. So it's totally normal if 2x images are being used by iPhone 4 and later models.

Only iPhone 2G, 3G and 3GS were non-retina.

You can check device resolutions from here:
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

And you also got image resolutions wrong. It should look like this:

 a x b  (image.png)
2a x 2b (image@2x.png)
3a x 3b (image@3x.png)

iPhone 6 - Using precisely sized images through naming convention

I am making an assumption that the naming convention is the following:

retina display, > iPhone 4s

image_name@2x~iphone.png

retina display iPhone 6 plus:

image_name@3x~iphone.png

Note: iPhone 6 plus is not 3 x the original sized screen. It is 2.34 so what I mean when you are creating 1 to 1 pixel assets of 44x44 actual pixels, is 88x88 on a retina then 103x103 on an iPhone 6 plus. But you should be using the extra screen size for a different UI/UX rather than just scaling up the size of your elements.

The way to maintain a non scaling of existing sizes would be fixed autolayout on those image resources, making sure those images are constrained by the x1 size. Like if your image was at x1 32pixels squared:

UIImageView *imageView= [[UIImageView alloc] initWithFrame:CGRectZero];
imageView.translatesAutoresizingMaskIntoConstraints = NO;
imageView.image=[UIImage imageNamed:@"your_image"];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[image(32)]" options:0 metrics:0 views:@{@"image":@(imageView)]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[image(32)]" options:0 metrics:0 views:@{@"image":@(imageView)]];

And use your @2x @3x images, the issue is if apple doesn't have a @3x named image for a resource it will upscale the next best thing the @2x image. SO there might not be a way to avoid that easily. I sort of wish apple would remove the base x1 sizing now that there phones are different resolutions. I would prefer a one to one pxiel measurement convention.

Work it like Apple wants you to, use autolayout as a convention. Above should keep the image the same, I am getting an iPhone plus later so will test it out.



Related Topics



Leave a reply



Submit