What is the official iOS naming convention for(#2X),
iPhone 6 :
667x375 points 1334x750 pixels 2x scale 1334x750 physical pixels 326 physical ppi 4.7"
iPhone 5 :
568x320 points 1136x640 pixels 2x scale 1136x640 physical pixels 326 physical ppi 4.0"
iPhone 4 :
480x320 points 960x640 pixels 2x scale 960x640 physical pixels 326 physical ppi 3.5"
so, that device recognise the image(with #2X) is for iPhone 6, iPhone 5 or iPhone 4?
There is no publicly exposed way to differentiate your images between the various device sub-types. If you must load a separate image depending upon whether your app is running on an iPhone 4s, 5, or 6, you will need to perform the detection of the device and loading of the proper image entirely in your own code (use the screen size to differentiate).
You may try #3x, though I haven't checked it.
Related
I have already added all images in three format like test.png, test#2x.png, test#3x.png for IOS in resources folder, still on big resolution screen like ipad it shows default one test.png.
I am not getting why this is happening. Am I missing something from code side.
EDIT :
sorry my mistake. my question was wrong.it shows different image but in small size.
i tried 3 different images with same name having #2x,#3x extension. so i come to know that in ipadPro(9.7 inch) it shows #3x image while in iphone5(which lowest screen resolution simulator in my mac) it shows # 2x image.
so how could we decide which screen resolution will take which image?and how can we decide their size.?
Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor. A standard resolution image has a scale factor of 1.0 and is referred to as an #1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as #2x and #3x images.
Suppose you have a standard resolution #1x image that’s 100px x 100px, for example. The #2x version of this image would be 200px × 200px. The #3x version would be 300px × 300px.
iPhone X, iPhone 8 Plus, iPhone 7 Plus, and iPhone 6s Plus support 3x
resolution. iPhone 8, iPhone 7, iPhone 6/6s and iPhone 5s/5c support 2x
resolution. All other iPhone devices support 1x resolution.
Consider following sample set of images for view with size 10 points and how do iOS system selects device resolution specific image.
#3x -> 3 * (10px x 10px) = (30px x 30px) // iPhone X, iPhone 8 Plus, iPhone 7 Plus, and iPhone 6s Plus
#2x -> 2 * (10px x 10px) = (20px x 20px) // iPhone 8, iPhone 7, iPhone 6/6s and iPhone 5s/5c
#1x -> 1 * (10px x 10px) = (30px x 30px) // All other iPhone devices
Note: You don't need to do any code (setup) to assign device resolution specific images. Just add images for all (1x, 2x and 3x) types of resolution in your image set. iOS system automatically chooses/selects device resolution specific image from the set of image.
Look at this document of Apple: Image Size and Resolution
Here is nice tutorial for easy understading: DESIGNING FOR THE NEW IPHONE SCREEN RESOLUTIONS
I'm working on the graphics for an app that will run in portrait mode only for the iPhone 5 - 6 plus. The images should be the total width of the portrait screen. Based on this page:
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions it looks as if my image widths should be as follows:
x = 640 pixels in width,
2x = 750 pixels in width,
3x = 1125 pixels in width
Does the above look correct?
When creating these images in Photoshop is it best to save them at 72 ppi?
Thank you for your assistance.
Not sure why your refer to them as "x", "2x" and "3x", but the screen widths (native for iPhone 4/5/6, virtual for 6 Plus) are:
640 pixels (iPhone 4/5)
750 pixels (iPhone 6)
1242 pixels (iPhone 6 Plus)
The ppi resolution doesn't matter if you set the sizes in pixels. It only matters if you set the size in cm, inches or similar length units. If you want to see them at their "real" size, you should select 326 ppi for iPhone 4/5/6 and 461 ppi for 6 Plus.
I am completely new to iOS development. I want to make a small game with the Sprite-Kit framework and I am already stuck at the xcasset catalog.
Say I have a 320x320 pixel image for my iPhone 4s that features a resolution of 960x480 pixels. I put this to "iPhone 2x" in the xcasset catalog, right (cp. following image) ?
Now, do I need for the "iPhone 1x" a 160x160 and for the "iPhone 3x" a 640x640 version of the image? What about the iPad ? What does "iPad 1x" and "iPad 2x" exactly mean in terms of pixels? Is "iPad 1x" also 320x320 and "iPad 2x" 640x640 in my example ?
EDIT-1: Thanks for the link to the possible duplicate. But there's also not discussed what exactly the iPad version are for and how they are related in terms of pixels.
EDIT-2: The resizing results with Asset Catalog Creator are not satisfying, although I used a 4096x4096 pixel image to produce the launch images (cp. following image):
It looks like your Sky image isn't set for "universal devices" which is why it's asking about iPad images. See Apple's Asset Catalog Help for more info about why you'd want device-specific images.
Select the Sky image name, then hit Command-Opt-4 to open the Attribute Inspector. Where it says "Devices" set it to "Universal" and you should just see the "Universal" section with the 1x, 2x, & 3x image wells.
Also, your sample image sizes seem off. If your #2x image (for iPhone 4s) is 960x480 then the 1x image would be 480 x 240. (and your 3x image for use on the iPhone 6+ would be 1440 x 960.) Your 1x image should be whatever point size you want, the 2x should be twice that in both dimensions, and the 3x should be three times the 1x in both dimensions.
I think all that matters are the different display densities of those devices:
- iPhone 6 Plus 401 ppi
- iPhone 6 326 ppi
- iPhone 5, 5c, 5s, iPod touch 326 ppi
- iPhone 4, 4s, iPod touch 326 ppi
- iPad mini (2G/3G) 326 ppi
- iPad (3G/4G), iPad Air 264 ppi
- iPhone 1, 2, 3 163 ppi
Thus resulting in 1x (264 ppi), 2x (326 ppi), 3x (401 ppi) independent of the actual screen size in pixels.
I've a little confusion and facing a little problem regarding #2x images in iOS as according to Human Interface Guidelines HIG, the #2x For iPhone 6: 750 x 1334 (#2x) for portrait but same #2x for iPhone 4S has size of 640x1136.
HIG
When I placed #2x image named as MyTestImage#2x.png of size 750 x 1134, it was fine for iPhone 6 but not for iPhone 4S, but if I put MyTestImage#2x.png of size 640x1136 then its fine for iPhone 4S but not for iPhone 6.
I also placed 640x1136 as Retina 4 2x named as MyTestImage-568h#2x.png but its also not working for me.
Whats I'm conflicting? What should be the actual image sizes of #2x for iPhone 4S and iPhone 6 if I talk about a full screen image.
And also what should be the correct retina display image size.
EDIT 1:
My question is different as I want to know the difference between #2x and -568h#2x retina display regarding both screens. Also, any optimal solution for this which can avoid image redundancies.
The new iPhone 6 has been announced, and there are multiple posts about the number of pixels and the pixels per inch. That's great, but ignores an important question for developers that I don't seem to be finding anywhere.
What's the addressable screen size?
For example, the iPhone 5 has a 4" screen with 1136x640 pixels. Cool. But if I'm programming for it, the addressable screen size is 568x320. If I draw a line from 0,0 to 568,320 (in landscape mode, full seem, of course) it goes across the entire display, not half of it.
The iPhone 6 has two new pixel sizes, 1334x750 and 1920x1080 for the iPhone 6 Plus. Presumably, this means the addressable screen space for programming is 667x375 for the iPhone 6 and 960x540 for the iPhone 6 Plus. Can anyone confirm that?
Also, the simulator now has a variable size setting, but doesn't come preset for the new iPhones. Do you set the simulator to 1334x750 or 567x375 to set layouts for the iPhone 6?
The iPhone 6 has a scale of 2 so the point size is 375 x 667 (not 375 x 567).
The iPhone 6+ actually has a virtual pixel size of 1242 x 2208 with a scale of 3. So the point size is actually 414 x 736.