Search code examples
iosimageipadresponsive-designphotoshop

Optimized web image resolution for iPad Pro display


I'm creating a header image (full screen width) for a responsive website.

What's the optimal resolution that will still look good on the 12.9" iPad Pro?

My normal workflow is to create an image at 72 PPI in Photoshop.

The specification shows that it has a resolution of 2732 x 2048 at 226 pixels per inch.

I don't want it to look pixelated when viewing on iPad Pro in landscape mode.


Solution

  • iPad Pro actually has 2732 x 2048 pixels that it uses to display the screen but we the user sees this rendered as a 1336x1024 display.

    So what this means is if you want an image that takes up 100px on the iPad Pro screen you need to use a 200px (2x) image at 72dpi to get that retina sharpness. Alternatively, a 100pt (point) image at 226dpi.

    So for a full size image for iPad Pro you would want to output your image at 2732x2048 at 72dpi

    People on my team often find it useful to design at 1x but ensure that all raster images in a document are converted to Smart Objects so they can be scaled back up to 2x without quality loss and then output at 72dpi to take advantage of the (now legacy) Save for Web tools in Photoshop