4 ms·
Much easier said than done, sadly.
by napoleond 11y ago
Much easier said than done, sadly.
- Uehreka 11y agoNot that hard. Want to make it a background image? @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background-image: url(image@2x.png); } Do you consider the image to be part of your content? (Something you'd want to appear on printouts and RSS feeds) <img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x" /> Retina images are a solved problem for modern browsers. Very few users with Retina screens (and thus new computers) are on non-modern browsers, and those users who are using old computers and browsers will end up getting the 1x image. (Good luck finding a Retina Macbook Pro that runs IE9)
- napoleond 11y agoSorry, I just saw this now and I doubt you will see it 6 days later, but just in case: The main problem with that approach is (or at least used to be; I would love to learn that it's changed) that the browser will still load the 1x image first. Since the large chunk of retina users are on mobile devices, that sucks.