: High Pixel Density Images I am in the process of trying to understand how high pixel density displays handle images. Here is what I think I have figured out so far a. A 2x image is effectively

@Holmes874

Note that it's not so much high density displays as much as devices with high density displays that also support the 2x model.

On devices like that, 1px on a regular device = 4px on the high density device (2x the width, 2x the height).

So if you want an image to be 100px by 100px, you create an image that is 100px by 100px.

It will then look the same PHYSICAL size on both devices. But on the 2x screen, it will have 'stretched' the pixels to fill up the same space.

As such, if you want to take full advantage of the double pixels, you would make a 2x image at 200px by 200px for that device.

A couple of things to note:


the DPI setting in your design software is irrelevant. Ignore it. All that matters is the number of pixels x number of pixels
yes, a common way to accommodate both is to start with a 200px x 200px image, save that as the 2x version, then scale that down to 100px x 100px and use that as the 'regular' image
You may not need to actually make two versions of all your images. The 'regular' screen can do the scaling down for you.
If you use SVG files, you don't need to worry about any of this as it's taken care of you already.
There are actually more than just 1x and 2x options. Some devices can support 1.5x images. The iPhone 6 can also support 3x images.

Vote Up Vote Down