1x, 2x & 3x Images

Hi,

I am trying to figure out if it’s necessary (which I expect it is) and the best approach applying the different resolution images in an app. I see from EddiesElectronics, 2x is used, but nor reference to the lower or higher res.

Do I just stick with 2x or do I need to figure out the device and apply the correct image on the fly?

Thanks for any help

iOS will figure out which version of the image to use…
if you have
myPicture.png
myPicture@2x.png
myPicture@3x.png

just refer to myPicture, and iOS under the covers will use the proper one if available.

One of the new things apple is going to be releasing soon (and I don’t know if it will work with XOJO apps, but it should). The Developer provides all the resquired images @1,@2, @3 and the app store will strip out the ones NOT required for the device you are downloading for.

What I have been doing lately is using images LARGER than @3x and providing only ONE, and letting iOS rescale on the fly… so far it looks great on all the devices I’ve tried it on

Thanks very much Dave! & Thanks for the quick response.

[quote=214235:@Dave S]
What I have been doing lately is using images LARGER than @3x and providing only ONE, and letting iOS rescale on the fly… so far it looks great on all the devices I’ve tried it on[/quote]
Apple does specifically recommend against this as scaling a really large image down to a 1x resolution will result in a poor looking icon / image

Just saying Apple says not to do this & that you should provide the correct sizes
You do whatever you want but they could reject any submitted apps for this

understood… but so far they have not rejected… and I have one that if I had to supply 3 sizes , the app would have almost 1000 image files… but with app thinning, that need might change

and I have not seen anywhere where Apple says “don’t do this”… they offer guidelines in this subject, but Ive not seen “rules”

COULD ? WILL but the guidelines do say
[i]10. User interface

10.1
Apps must comply with all terms and conditions explained in the Apple iOS Human Interface Guidelines
10.2
Apps that look similar to Apps bundled on iOS or Watch OS devices, including the App Store, iTunes Store, and iBooks Store, will be rejected
10.3
Apps that do not use system provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines may be rejected
10.4
Apps that create alternate desktop/home screen environments or simulate multi-App widget experiences will be rejected
10.5
Apps that alter the functions of standard switches, such as the Volume Up/Down and Ring/Silent switches, will be rejected
10.6
Apple and our customers place a high value on simple, refined, creative, well thought through interfaces. They take more work but are worth it. Apple sets a high bar. If your user interface is complex or less than very good, it may be rejected
10.7
Watch Apps whose primary function is telling time will be rejected
[/i]
The HI guidelines do say to provide all sizes
Apple has been known to suddenly start enforcing guidelines without any warning
Your next update could be rejected without any prior warning

Yes apps use a lot of images - the XDC app used nearly 100 and its not that big an app

Should I use 72 dpi or 144 dpi where the IDE ask for @2x? Width/height in pixels are the same? Does it matter at all? I just want to get your experience on this, cause when I see red text in the IDE I tend to see this as a warning. Se the enclosed snapshot.

In the end it’s the pixels that matter. DPI is for printing.

[quote=216415:@Viggo Danielsen]Should I use 72 dpi or 144 dpi where the IDE ask for @2x? Width/height in pixels are the same? Does it matter at all? I just want to get your experience on this, cause when I see red text in the IDE I tend to see this as a warning. Se the enclosed snapshot.

[/quote]

2x is the same picture twice as wide and twice as big. Effectively 144 dpi (twice 72).

The notion of dot is synonymous with pixel. On paper, one could consider an elementary dot as a pixel the same way. Actually, there is even the notion of the pixel shape, especially with Canon printers, for instance, which have a different resolution in width than height.

With HiDPI screen on iOS devices, screen is no longer 72 pixels per an inch, but 144 or even 216 (iPhone 6).

For Retina screens, pixels are no longer the only way to define a view. Apple has the notion of point, which can be composed of several pixels, depending on the 2x or 3x resolution.

In fact, the notion of “dot per inch” can be used for any pixel based peripheral.

…and further more, if you ad an image lets say 1536 x 2048 at 72 dpi and name the source file “iPad 768x1024 @2x.png” you will trigger the warning too. Delete the @-sign and the warning goes away. Weird… bug?

Which warning are you referring to ?

I drop an image 1546x2048 at 72 dpi in the IDE for relevant iPad Launch Image (se snapshot). The red warning tells me the image is at 144 dpi, which’ is not so. The filename is “iPad 768 x 1024 @2x.png”. If I delete the @-sign in the filename the warning goes away. This means that filenaming is relevant towards trigger a warning in the IDE. I read somewherethat filenaming on Launch Images was NOT relevant, but it is.

[quote=216537:@Viggo Danielsen]I drop an image 1546x2048 at 72 dpi in the IDE for relevant iPad Launch Image (se snapshot). The red warning tells me the image is at 144 dpi, which’ is not so. The filename is “iPad 768 x 1024 @2x.png”. If I delete the @-sign in the filename the warning goes away. This means that filenaming is relevant towards trigger a warning in the IDE. I read somewherethat filenaming on Launch Images was NOT relevant, but it is.
[/quote]

It is not a warning. It just tells you what image it corresponds to.

The way it works for iOS is :

iPad.png is 1024 x 768 corresponding to a 72 dpi screen
The @2x in iPad@2x.png means the picture has twice the number of pixels, to correspond to a Retina 2x screen which is in fact 2048 x 1546 pixels, and 1024 x 768 points.
You could even on an iPhone 6 have pictures that are 3 x, which means they would be 3 times the size in pixels of the number of points.

iOS will be expecting 2x pictures to be twice the size of the number of points.

If you don’t add the @2x.png file, the result will be blurry on a Retina screen. If it even displays…

See https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

Thanks, Michel - I finally got my head around this. Good explanation. I did things right the first time, and messed up when starting to think - on my own :slight_smile: Great help!!