How to make sure images won't look crappy on retina displays

[santaji]

I don't own any retina display devices, but i occasionally do web design. I keep hearing about how most images on the internet look low quality on retina displays, so i was wondering what i should do to make sure that images that i upload online look decent on retina iPhones, iPads, and the new MacBook Pro.

Should i make sure all images i export to put online be over 326 ppi?

For example, when exporting a pdf as a png in preview, the default resolution is 150 pixels / inch. Do i have to increase this to 326 ppi to ensure that the PNG will look all right even on the new retina MacBook Pro?

When exporting an Adobe Illustrator file as a PNG, the High setting when choosing a resolution is 300 ppi. Will this look all right on the 326 ppi retina MacBook Pro display?

 

[aaron.lee2006]

All that can really be said is that images will look best in the proper pixel density of the screen being designed for. Shouldn't be anything wrong with increasing the PPI. Prior to this retina business we really only needed to design in 72PPI. Those days are gone.

 

[heehee]

As far as I know, it shouldn't matter. As long as pixel dimension stays the same, a 1200px x 800px with 1 pixel/inch is the same as 1200px x 800px with 600 pixels/inch.

 

[gnasher729]

I don't own any retina display devices, but i occasionally do web design. I keep hearing about how most images on the internet look low quality on retina displays, so i was wondering what i should do to make sure that images that i upload online look decent on retina iPhones, iPads, and the new MacBook Pro.

First, they don't look any worse on a retina display. They just don't look as good as the rest. The most obvious thing: Don't put text into images, because it will stand out badly.

Using 326 dpi images will make your website huge, and it will not help anyone who doesn't have a retina display (almost everyone). You can google around for methods to detect retina display and produce different images - that's what Apple does for their own website. But unless you have a really good reason, just make sure that your images are good quality. Don't use images that need scaling up even on a non-retina display.

 

[lucidmedia]

Using 326 dpi images will make your website huge, and it will not help anyone who doesn't have a retina display (almost everyone). You can google around for methods to detect retina display and produce different images - that's what Apple does for their own website. But unless you have a really good reason, just make sure that your images are good quality. Don't use images that need scaling up even on a non-retina display.

This. Do not serve up high resolution images to devices that do not require them. Use javascript to detect the users needs and then serve them the correct images. Retina.js is one library, but there are several more.

 

[aaron.lee2006]

This. Do not serve up high resolution images to devices that do not require them. Use javascript to detect the users needs and then serve them the correct images. Retina.js is one library, but there are several more.

Excellent point. I don't code, would have never crossed my mind. I'll have to keep this in mind next time I send a project to the devs.

 

[Hexiii]

Wait, does the dpi matter? I always thought that the only thing that matters is pixel dimension and dpi is only for printing unless you work with inches/centimeters.

 

[patent10021]

Wait, does the dpi matter? I always thought that the only thing that matters is pixel dimension and dpi is only for printing unless you work with inches/centimeters.

This is true. 72ppi all the way even for retina. We don't need to be talking about dpi unless you want to talk about printer output.

 

[blanka]

On the web you have nothing to do with PPI/DPI. Just make images twice as big. Apple renders websites that have an image of 300 pixels wide 600 pixels wide on a retina screen. Look around the web, there are people who experimented with JPEG compression, and they managed to get images with twice the pixels at roughly the same file size.
If you use IMG tags or CSS, you can just define the height and width at half the pixel size. Then it works great for retina. If you use the same-size JPEG file approach, it will also render well and fast on non-retina screens.