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

santaji

macrumors member
Original poster
Dec 13, 2008
38
0
Mumbai, India
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

macrumors 65816
Feb 23, 2006
1,215
0
Ontario, Canada
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.
 

gnasher729

macrumors P6
Nov 25, 2005
16,594
3,217
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

macrumors 6502a
Oct 13, 2008
702
37
Wellington, New Zealand
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

macrumors 65816
Feb 23, 2006
1,215
0
Ontario, Canada
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

macrumors 65816
Jun 30, 2011
1,113
373
Prague, Czech Republic
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

macrumors 68030
Apr 23, 2004
2,970
416
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

macrumors 68000
Jul 30, 2012
1,549
3
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.