html - 网站的自动 Retina 图像

Question

对于配备 Retina 显示屏的新款 Apple MacBook Pro，如果您在网站上提供“标准”图片，它会有点模糊。所以你必须提供视网膜图像。

有没有办法像 iOS(带有 Objective-C)那样自动切换到 @2x 图像？我发现的是:CSS for high-resolution images on mobile and retina displays ，但我希望我能为所有图像找到一个自动处理过程，无需 CSS 或 JavaScript。

这可能吗？

更新
我会强调这个有趣的 article @Paul D. Waite 建议和一个有趣的discussion关于它由 Sebastian 链接.

Answer 1

img 标签有一个新属性，允许您添加视网膜 src 属性，即 srcset。 无需 javascript 或 CSS，无需双重加载图像。

<img src="low-res.jpg" srcset="high-res.jpg 2x">

浏览器支持:http://caniuse.com/#search=srcset

其他资源:

• WebKit release post
• W3C documentation对于 srcset
• good explanation about why and how to use srcset
• Chris Coyer's post了解更多好消息