CODEWITHSUNDEEP
iosobjective-ciphonexcode
Mads Odgaard
Mads Odgaard

Reputation: 47

Image sizes for iPhone are incorrect-

I have this image called image.png - I have created it in the 3 differen't sizes.

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?

Upvotes: 0

Views: 690

Answers (2)

Lucifer
Lucifer

Reputation: 480

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.: Retina display

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. enter image description here

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

Upvotes: 1

Nghia Luong
Nghia Luong

Reputation: 790

@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.

Upvotes: 0

Related Questions