How will Retina Safari handle my website?

Discussion in 'MacBook Pro' started by ladeer, Jun 11, 2012.

  1. ladeer, Jun 11, 2012
    Last edited: Nov 19, 2014
  2. Tea-Aholic macrumors 6502

    Joined:
    Dec 8, 2011
    Location:
    Melbourne, Australia
    #2
    I both hate and love the way Safari handles webpages. For one, it does scale all non-retina images 2x so things don't look small. But it also scales stuff like high-res photographs which makes them blurry until I save them and open it up in Preview.

    1 pixel is not 4. The retina display has 4X more pixels (aka detail) in the same amount of area.

    To answer your question, (I'm not a web developer btw) but how I understand is that you need 2 versions of your graphic, one for non-retina devices and another one that is 4 times the size for the retina version. So for example:

    50x50 image.png
    100x100 image_2x.png

    Now, I'm not sure if Safari automatically uses images that have the filename "_2x" in it, you might need to code Safari to use those images. You can read about how Apple does it for their website for the iPad.

    http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
     
  3. stevelam macrumors 65816

    Joined:
    Nov 4, 2010
    #3
    First of all, retina will not double your margin. Why would it? It's still mapping everything at the scaled resolution which is why images are blurrier but still the same length and width as on a regular screen.

    Secondly it's twice the size for retina, not 4 times. You will need 2 images. One retina and one non retina. All you have to do is use media queries or some js library to detect retina display and show the appropriate image (using CSS to scale the retina image down so it occupies the same size as the non retina)
     

Share This Page