Posted on

How To Optimize Images For Retina Display

retina

If people are viewing your content on iPads, MacBooks and other new Apple devices they may not be seeing the best image quality thanks to the new “retina” screens. Most images contain 72 dots per square inch. Retina screens show images optimally at 227 dots per inch.

1. Use SVG (vector) images when possible.

SVG Vector Image 516 KB

 

You can convert PDF vectors to SVG, PNG, JPG and more using the free website Cloud Convert.

2. Scale your PNG and JPG images.

A lot of people think you need to set the image DPI in Photoshop for this but it’s really about the overall dimensions not the pixel density. The larger your source image, the better it will look on every screen. Especially with responsive design templates.

To prove DPI means nothing I have saved the same image in 72 and 300 DPI using identical pixel dimensions. As you can see they both get jagged edges when you increase the browser magnification (Command +).

The best result was using a larger pixel dimension and shrinking it to fit. Of course the trade off here is file size.

[twocol_one]

8 Bit PNG @ 72dpi 280 x 428 36 KB
8 Bit PNG @ 72 dpi
280 x 428
36 KB

[/twocol_one] [twocol_one_last]

24 Bit @ 72dpi 280 x 428 82 KB
24 Bit PNG @ 72 dpi
280 x 428
82 KB

[/twocol_one_last]

[twocol_one]

24 Bit @ 300 dpi 280x428 102 KB
24 Bit PNG @ 300 dpi
280×428
102 KB

[/twocol_one] [twocol_one_last]

8 Bit @ 72 dpi 1959 x 2996 195 KB
8 Bit PNG @ 72 dpi
1959 x 2996
195 KB

[/twocol_one_last]

Use your browser zoom feature to see the scaling issues (Command + on a Mac).

Conclusion, although SVG images are future proof because they are true vectors, the file size is prohibitive. My advice is to make your images 3-4 times larger than you plan to display them. This will increase the quality on retina displays, responsive designs and browser zoom in.

8 Bit PNG files are smaller in KB than 24 bit and rarely show a difference when starting with vector source files. I recommend them for optimization purposes. The edges however, may be a bit jagged on certain transparancies.