Well, I have basically two questions regarding screen resolution in iOS devices.
1) In iOS documentation, on the Point vs Pixels section, it states the coordinates are passed in to framework as points, and that "One point does not necessarily correspond to one pixel on the screen." as found here: https://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html
When they are different? Up until now I was assuming they were equal and passing in pixel coordinates. Is this a parameter that changes from device to device?
2) I'm also a little bit confused about PPI. I know what it means on the hardware screen (if a 10" and a 7" display have the same pixel resolution then the 7" display will have a better image quality since the PPI is higher). But what difference it makes if I save a .png with 72ppi or 96 or even 326? Is it just for printing or does it make any difference visually on my screen?
Thanks
On retina devices (iPhone 4, 4S, or 5, and iPad 3 or 4), there are 2 pixels per point. On non-retina devices, there is 1 pixel per point.
Except for the iPhone 5, all iPhones have a screen size of 320x480 points. The retina iPhones have a screen size of 640x960 pixels (but the same point size as the non-retina devices).
When working with images in iOS, it is the pixel size that matters, not the PPI. Just remember that your #2x images should have twice the width and height of the regular, non-retina images.
Related
My query is in two parts:
1) plain and simple, how do we decide the 1x, 2x and 3x image sizes ?
I found this SO question closest
what-should-be-3x-images-of-100x100 size UIimageView or UIButton
but there is no accepted answer in this so I am a little confused if that is really how it is
So if I have a UIImageView of size, say, 17 X 21
So will my 1x be 17X21, 2x be 34X42 and 3x be 51X63 ?
2) If it is so what the sizes would be in case my UIImageView size also varies as per screen size.
So for iPhone 4s 320X480 if my UIImageView was 17X21, for iPhone 6 375X667 it would be 20X29
So how do I decide my image sizes (1x, 2x & 3x) which are fit for all device sizes?
PS:
Really a big thanks in advance, coz this might sound a very basic question but I have really banged my head a lot over it but can't find a concrete satisfactory answer even after searching and reading a lot.
You should think in points, not pixels.
1
If your UIImageView has the size of 17x21 points then you'll need to provide 3 images 17x21 pixels, 34x42 pixels and 51x63 pixels. The OS will pick the correct one depending on the pixel density of the device the app is running on.
2
One way to decide the size a UI element is using a software like Graphic. You can draw a rectangle representing the screen and the UI element only thinking in points. This should make things easier.
It is a bit late but I understand your problem.
First you need to know the difference between point and pixel.
The point is when you in Xcode.The pixel is when you have the actual size of iPhones screen as pixel.
In 4s, 1 px equal 1 point.
In 5, Se, 6 , 1 point 2 px
in 6s, 7s , 1 point 3 pixel.
I am gonna give you 2 different example to understand this.
Example 1
You want you image 100x100 for all iPhones in Xcode.So you should make :
1x size 100x100 pixel in Ps or Sketch.
2x size 200x200 pixel in Ps or Sketch.
3x size 300x300 pixel in Ps or Sketch.
Another example answers you question.Because you have aspect radio.That means you want your image to be scaled.
You have 17x21 point for 4s then it should be 17x21 pixel.
You have 20x29 point for iPhone 6. It should be 40x58 pixel.
You have something for 6s and 7s so it should be 3 X something.
Because you have aspect ratio and scaled.It does not matter as long as you keep 1x for 4s, 2x for 5, 6, SE, 3x for 6s and 7s.
So you have 40x58 instead 34x42 (17x21) x 2 for iPhone 6.
40x50 for better resolution which Apple recommend.When you use aspect ratio, it sometimes be hard to choose the image size.If you used 32x42 instead 40x58 , there is nothing wrong with this but resolution would be less than 40x58.
Hope It works.
I have this image called image.png - I have created it in the 3 differen't sizes.
image#3x.png - 1001x132px
image#2x.png - 668x88px
image.png - 334x44px
What I dont understand is how come the #2x is 668px in width, when the iPhone 5&5S are only 640px wide?
I have designed the #3x using iPhone 6+ screen size.
Could someone please explain?
Let me explain you the difference between the iPhone screens, so you will understand the need of these #?x suffixes.
The first iPhone, and the two after it (3G and 3GS) had the standard display with dimensions w:320, h:480. With the introducing of iPhone 4, Apple also introduced the so called Retina display, which "packs" 4 physical pixels in 1 logical pixel (also called "point"), i.e.:
Now, even though the pixel dimensions of the iPhone 4 are w:640, h:960 (and iPhone 5/5C/5S w:640, h:1136), you still have screen size of w:320, h:480 points (respectively w:320, h:568 for 5/5C/5S). But because the coordinate system of the display uses points instead of pixels, the dimensions and position in points of all UI elements remains the same for every device.
What about the prefixes?
Now, the ratio between point and pixels is called "scale". UIScreen, UIView, UIImage, and CALayer classes have a property called scale, and when you load image with prefix #2x, the scale will be 2.0 and the display will fit 2x2 bitmap pixels from the image in one point. iPhone 6+ uses the #3x suffix because of the Retina HD display, which has scaling factor 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels (points on the screen).
The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That
means every 23 pixels from the original render have to be mapped to 20
physical pixels. In other words the image is scaled down to
approximately 87% of its original size.
(source).
Required image sizes
For example if you want to have an image of green circle in a black square with dimensions w:100, h:100, you will need two more images: one with dimensions w:200, h:200 and one with w:300, h:300, as the system will scale them according to the suffix.
Where to go next
Here is some stuff to read (if I didn't explain it right or easy to understand). My advice: check the link above and the official Apple documentation for further knowledge:
Apple documentation: Supporting high-res devices
Apple documentation: Points vs. Pixels
#2x is using for retina display, like iphone 4, 4s, 5, 5s, 6, ipads ....
The image has 668px in width, I think it use for a view that could have extra area for view, like horizontal scroll view, tutorial pages, or for ipad ... ... or something like that ..
And yes, you're right about the width of retina display, it is just 640px.
Hope this may help.
I designed an image on Adobe Illustrator that has H: 100 px and W: 2000 px. When the device is in landscape left, this asset should run across the bottom the of screen and completely cover it from end to end.
As far as I know, the iPhone 6+ is 1080 x 1920. An asset with the width of two thousand should comfortably fit on the bottom, so I must be missing something big here.
I used Prepo to covert my 3x (the one with width of 2000), into 2x and 1x.
The figures are as follows:
3x: 2001 x 102
2x: 1334 x 68
1x: 667 x 34
This set:
Fits: 5s, 5, 4s
Too Short: iPad Retina, iPad Air, iPad 2, 6+, 6
I'm assuming I'm missing some critical aspect of image xcassets because I'm sort of at a loss.
Thank you, and I'm happy to update this with any other details needed.
First thing...
The iPad Air resolution is 2048x1536 and so your image of 2001 pixel width will not fit. Also, iPhone 6+ resolution is 1242x2208 so again that won't fit.
Second...
You shouldn't only be relying on the image size to fit to the screen. You haven't shown what the image is but I imagine that something of that size will be some sort of gradients or something that spreads across the bottom of the screen.
In that case you should be using a sliced image that will resize to be any size regardless of the device resolution.
Third...
If you do rely on the image size then what guarantee do you have that in the future there will not be a device with an even bigger resolution that will break the image again?
Hint... The near future is guaranteed to have a device with a bigger resolution that will break your display.
Summary
Use a resizable image that will stretch to the required size no matter what it is.
Use something like AutoLayout so that the frame of the image view is set by the screen size rather than being set by the image size.
So I am currently having some images designed for my app (social stickers Facebook style/ Line) I'm not really sure what resolution the images should be. iPhone 5s is 320*568 pts so a perfect square panning the width of the screen would be 320*320 points and because 5s is retina that would be 640*640 pixels. Is that correct? For a pixel perfect image spanning the width it would be 640*640 pixels?
I saw that iPhone 6 plus is 414*736 pts which scales up by *3 so it's 1242*2208, so would a pixel perfect square spanning the width for the iPhone 6 plus be 1242*1242 pixels?
If I was to get my graphic artist to draw on a 1242*1242 canvas would I lose much quality scaling it down for the iPhone 6 and the iPhone 6 plus?
Not really sure how to go about this. Just want to make sure my square canvas rescales without loss of quality between the 6+,6 and 5. Any help would be greatly appreciated. Thanks!
When you rescale from higher pixels to lower pixels it never lose any quality, so in your case yes you must ask for iPhone 6+ size of images to your designer and you can rescale as per your need, you won't lose any quality for sure.
width for the iPhone 6 plus be 1242*1242 pixels?
Yes you are right, you will need 1242 x 1242 for iPhone 6+.
if you are making a universal app, you will need Retina and Unretina versions of each image for both iPad and iPhone. That is, four different images:
For every piece of art, you generate four sprites.
iPhone Unretina: image.png
iPhone Retina: image#2x.png
iPad Unretina: image-iPad.png
iPad Retina: image-iPad#2x.png
Except for backgrounds, make iPhone Retina art the same size as the iPad Unretina art.
Extract from this article: http://www.gameartguppy.com/how-to-size-game-art/
This might sound silly but when i'm working with sizes in Xcode, the total frame size is equal to 320 * 568 ( width * height ). I'm fine with that. But the resolution of the phone is actually different. The iphone 4S is 640*960 & the 5 and next generations are 640*1136.
I know the last one is exactly double of what xcode is using as units, so my question is :
What unit of measurement does XCode use? If it pixels, why not use the
phone size/resolution as reference?
It uses points.
In retina devices, 1 point equals four pixels. In non-retina devices, 1 points equals 1 pixel.
Check out apple's documentation on drawing and printing on ios.
https://developer.apple.com/library/ios/documentation/2ddrawing/conceptual/drawingprintingios/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7
Specially the section "Points Versus Pixels"
Edit
To answer your iphone 4S vs 5 and next generation question. These are actual screen sizes. The resolutions are different. The iPhone 4S and 4 screens are 320x480 points, or 640x960 pixels. iPhone 5, 5C and 5S screens are 320x568 points, or 640x1136 pixels. If you are working with xibs, you may be seeing one of the previous sizes because xibs have a size defined. That's where auto layout constraints come in. You tell in the xib or storyboard how you want the elements to be resized/relocated in the screen. You may be using struts and springs to decide how to relocate items in your view instead of auto layout. It's ok.
Even if your xib / storyboard is iphone5 size, if you check the size of the screen in your viewDidAppear methods when running the app on a iPhone4/4S simulator or device, you will see that your view bounds have the size of the corresponding device.
It's better to use points instead of pixels because it helps the developer abstract from resolutions. You don't have to bother about how many pixels are a point, you just locate items at points in the screen and let the system take care of the resolution for you.
Xcode 10.1, Swift 4.2 answer
Xcode uses points. But in case of next explanation what is point and how much pixels in point -> it depends what retina device are you using. Basicaly on non-retina devices 1 point = 1pixel. On iphone 6plus and newer "plus" models, apple added 3x resolution.
On normal retina devices 1 point = 4 pixels, NOT 2!!
then apple packing that pixels into point.
At iPhone plus models apple also uses downsampling with factor 1.15 which means for example, if you have 1242*2208 then it should be devided on 1.15 and you get your 1080*1920 fullHD on your device.
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
I believe that the top answer, which is:
It uses points. In retina devices, 1 point equals two pixels. In non-retina devices, 1 points equals 1 pixel.
is wrong because of outdate.
I provided a link to developer.apple.com.
https://developer.apple.com/documentation/uikit/uiscreen/1617836-scale
See also UIKit Size (Points) and UIKit Scale factor: https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html