Menu
With the new Apple MacBook Pro with retina display, if you provide a "standard" image on your website, it'll be a little fuzzy. So you have to provide a retina image.
Is there a way to automatically switch to @2x images, like iOS (with Objective-C) does? What I've found is: CSS for high-resolution images on mobile and retina displays, but I wish I could find an automatic process for all my images, without CSS or JavaScript.
Is it possible?
UPDATE
I would emphasize this interesting article suggested by @Paul D. Waite and an interesting discussion about it linked by Sebastian.
926
To make your website retina-ready, use Scalable Vector Graphics (SVG) whenever possible. SVG is an XML-based graphic format that presents images in high quality. SVG images can be viewed in Internet browsers that use XML or be displayed on mobile phones in SVGB or SVGT file formats.
While 'Retina display' is an Apple brand name, the term 'retina' is often used to describe high-DPI displays from other manufacturers. Likewise, retina is commonly used to refer to images optimized for high-DPI displays, which you'll learn about below.
Retina-ready websites are websites that utilise modern technology to display high-resolution images on devices that have high definition (HD) displays, such as the many tablets and smartphones, and some modern laptops, macbooks and desktop PCs.
There is a new attribute for the img tag that allows you to add a retina src attribute, namely srcset. No javascript or CSS needed, no double loading of images.
<img src="low-res.jpg" srcset="high-res.jpg 2x">
Browser Support: http://caniuse.com/#search=srcset
Other Resources:
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
