How will Retina Safari handle my website?

[ladeer]

[deleted]

 

[Tea-Aholic]

So to sum it up, how does my new computer know when to double the image, and in what circumstance, and what image, to be doubled? Especially in PhotoShop, is a "pixel" a real pixel, or really 4 pixel when I save it? What if sometimes I need a pixel to be really a pixel (like designing Retina app)?

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/

 

[stevelam]

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)