Hi all. I was a web developer and designer about 10 years ago, before high-resolution retina displays made things much more complicated. I’ve recently begun dabbling again. If I specify via CSS that an image is 1000px in width with an auto height, it is about 8 inches or so wide on my Macbook Air. If I were to view the same image on a retina Macbook Pro display, does the high-resolution display show the image at approximately 4 inches wide? Or does it recalculate the intended width and show it still at about 8 inches wide?
I’m not that familiar with retina displays, but I believe that is the case, that elements will appear the same size as a normal display in css pixels, but the pixels will be double density. That is, each css pixel will be made up of 4 sub-pixels.
Otherwise everything would be tiny and hard to read/touch on the retina display.
Inches have no meaning here and the image is shown at an ‘apparent’ 1000px width in all devices. If you change the resolution on your device / desktop then of course the physical image size changes because the resolution has changed along with everything else on the page.
However for ‘double density displays’ one pixel is mapped to two pixels to allow for more detail to show. If the double density screen resolution is 2,560 x 1,600 pixels then you actually get the screen size of 1,280 x 800 pixel-resolution display to play with due to the pixel-doubled effect. That means your normal image is now stretched across two pixels and will look a little fuzzy but will still effectively be the same physical size as before. That’s why for retina (double density) displays you may need to create your images at double the size you want and then shrink them in the browser back to the normal size which then gives you double the pixels to play with and a sharper image.
If instead you can use svg images then you can be safe in the knowledge that they can be scaled up and down without a loss of quality.