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

Discussion in 'Design and Graphics' started by santaji, Aug 31, 2012.

  1. macrumors member


    Dec 13, 2008
    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?
  2. macrumors 65816


    Feb 23, 2006
    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.
  3. macrumors 68020


    Jul 31, 2006
    Same country as Santa Claus
    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.
  4. macrumors G5


    Nov 25, 2005
    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.
  5. macrumors 6502a

    Oct 13, 2008
    Wellington, New Zealand
    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.
  6. macrumors 65816


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


    Jun 30, 2011
    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.
  8. macrumors 68020


    Apr 23, 2004
    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.
  9. macrumors 68000

    Jul 30, 2012
    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.

Share This Page