Retina Ready HTML image(<img />) 正确的解决方案？答案

【问题标题】：Retina Ready HTML image(<img />) Proper solution?Retina Ready HTML image(<img />) 正确的解决方案？
【发布时间】：2015-06-17 23:42:16
【问题描述】：

我们知道我们可以使用 css3 媒体查询来准备图像视网膜

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
    }

以上媒体查询为背景图像制作视网膜就绪图像。有什么方法可以让 HTML 图像视网膜准备好像

<img src="example.png" />

我需要在这里提到一些更多的问题。我的图像尺寸是 274x48 。它在视网膜屏幕上看起来有点模糊。这是我拥有的这张图片的最高分辨率。有没有办法让图像视网膜准备好保持现有的尺寸和分辨率。提前致谢！

是否可以制作低分辨率图像 RETINA READY？在每个屏幕上都很好，但在视网膜屏幕上有点模糊！

【问题讨论】：

如果您的图像只有这么小的分辨率，将其放大以适应显示器上每英寸双（或更多）像素不会有帮助吗？
Automatic Retina images for web sites的可能重复
你可以在你的 css 中尝试这个，但是 (-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);) 不确定是否会有所帮助小图像，但如果它们被放大或放大，它有助于大图像

标签： html image css retina-display

【解决方案1】：

除非您提供更高的源分辨率/质量，否则无法使图像“视网膜就绪”。

您可能有一个选项是在 Photoshop 或其他编辑器中打开图像并放大它，然后应用一些抗锯齿过滤器以使边缘看起来稍微好一些，然后使用媒体查询添加它。除此之外，您别无选择。

【讨论】：

【解决方案2】：

您应该改用<picture> 元素：

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

【讨论】：