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 a 1x image but with 4 (2 x 2) times the number of pixels b. A hiPiD display works by effectively reducing the "physical" size of a pixel - so the same size of physical screen shows up sharper because it is showing more pixels c. When a 1x image is displayed on a hiPiD display the available pixels are effectively stretched out making the image appear "blocky" d. To cater for both 1x and 2x screens you start by creating an image intended for 2x screens at 72dpi or more. Then create the 1x version by simply scaling the image down 50%

That last statement is related to how I would do things with Paint.NET.

I suspect that at least some of the statements above are partially or wholly incorrect. I'd be much obliged to anyone who might be able to clarify matters.


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.
  • You might want to say that the images themselves dont have any higher pixel density. After all all images have a pixel density of 1 pixel per pixel. Anyway im sure we are on the verge of starting to honor ppi settings of images in browsers. The current trend is just too complex to manage for perfection obsessive authors.
    – joojaa
    Oct 1 '14 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.