1 Reply Latest reply on Aug 28, 2012 5:29 PM by Noel Carboni

    Viewing graphics on a Mac Retina display?

    StanWelks Level 1

      I want to make some graphics that will be viewed on the web. I understand that lower resolution displays will display graphics larger than higher resolution displays. My question is with regards to how the graphics will be displayed on a Retina display that has 326 pixels per inch. My understanding has always been that you design graphics based on 72ppi for web.


      1. If I wanted to create graphics knowing that all of my users would have Retina displays, would I setup my .PSD files at 326ppi?

      2. Will graphics and websites designed at 72ppi appear really small on a Retina display?



        • 1. Re: Viewing graphics on a Mac Retina display?
          Noel Carboni Level 8

          You're asking the question kind of the wrong way.  Pixels per inch (ppi) has nothing to do with the web, it's all about the pixel count - the number of horizontal x the number of vertical pixels.  Trying to think in ppi just muddies the water.


          Assume that a typical web graphic is from a few hundred pixels to roughly a thousand pixels wide and tall and you won't be far wrong.


          But your thinking is not off base.  You actually SHOULD be thinking about designing graphics with greater pixel counts for higher resolution display - both by high ppi Retina displays and by users who might zoom in to see things more closely.  That's less common on a computer, but quite natural on a tablet.  Your web visitor wants to buy a product, he/she invariably just does a reverse pinch gesture to see it close up.  It's natural.


          Today's web graphics that are designed to show on a typical non-retina display monitor will not look as crisp as they could when displayed on a Retina display, because the display processor is upsampling them to be of sufficient size to see.


          A forward-thinking individual who values image presentation quality over minimizing download file size (which is becoming less important each day) might design his/her web graphics with 2 to 3 times the pixel count in each dimension normally used, then set up in the HTML to display on a typical monitor at a zoomed-out size.  That way when viewed on a super-high ppi display, or zoomed-in on a tablet, the graphics will look good.


          If you're all about making things look better on the web than the next guy, here's a whole new realm to work in. 


          Check out this page for an example of what I'm talking about in action:  http://Noel.ProDigitalSoftware.com/temp/WebImage/Test.html


          Perhaps someone here with a Retina display will describe how different the two images look.