5 ms·
The problem is that non-retina images get doubled in size on a retina display, so it looks blurry. I suggest providing 2x sized images. You can use media querie
by sabarjp 11y ago
The problem is that non-retina images get doubled in size on a retina display, so it looks blurry. I suggest providing 2x sized images. You can use media queries to show different sized images or rely on down-sampling. There's a few different strategies.
- s9w 11y agooh wait, ALL images get 2x upscaled? That sounds crazy. There are double-sized samples in the compare mode. But if they're still upscaled by macOS, what can I do?
- protomyth 11y agoI cannot vouch for this one, but Apple has a suggestion https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/Introduction/Introduction.html https://developer.apple.com/library/safari/documentation/Net...
- tuxracer 11y agoMac and Windows will 2x all images for users with HiDpi displays. You can use CSS to display the images as background-image then media queries are available to serve differently sized images for HiDPI. Alternatively, most images look completely fine scaled down, they just get blurry scaled up. If you use an image that is 2x bigger than defined in the img tag it will play nice on HiDPI.
- mariusc23 11y agoUse the srcset attribute to provide @2x sizes. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-srcset https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Im... Example: <img src="img.jpg" srcset="img@2x.jpg 2x" alt="">