我想在HTML中拥有不错的图像，这些图像在带有视网膜显示器的计算机中非常好的显示。我猜想我只需要在img标签中具有高分辨率图像即可。但是，较低的分辨率浏览器将不得不下载此更大的文件，然后降低它，可能会导致质量较低的图像，而不是我在诸如Photoshop之类的工具中降低了它。
我希望我能做这样的事情：
<img src="/example.png" src-retina="/example-high-res.png"/>
显示2个不同图像的正确方法是什么，1个正常显示器和1个视网膜显示器？
with css这很容易
使用图像源属性，这样做的标准方法较少。我已经使用了基于JS的方法检查window.devicePixelRatio：
<img id="example-img" width="100" height="100"/>
<script>
if (window.devicePixelRatio > 1) {
$('#example-img').src = "/example-high-res.png";
} else {
$('#example-img').src = "/example.png";
}
</script>
但是，如果可以的话，请使用CSS和媒体查询。它更干净。
那里有几种不同的方法，它们具有局势和弊端。苹果本身实际上可以为视网膜设备提供视网膜和标准图像，这显然会导致下载相当大。
如果您想要半自动的东西，请尝试Retina.js。从描述：
当您的用户加载页面时，Retina.js检查页面上的每个图像 看看您的图像是否有高分辨率版本 服务器。如果存在高分辨率变体，则脚本将交换 那个图像就地。
脚本假设您使用Apple规定的高分辨率修饰符 （@2x）表示服务器上的高分辨率图像变体。
您需要制作两个（或可能更多）CSS文件，并根据用户的浏览器设置在JS的帮助下使用它们。移动网站的CSS文件应制作一个新的布局，该布局在手机中完全可见。
查看这个问题，以更好地了解该主题。
根据设备屏幕分辨率，使用响应式设计原理对图像大小进行扩展。
在CSS中，您可以定义目标设备的max-width和max-height。这就是您在CSS中声明它的方式：
@media only and (max-device-width:1024px) and (orientation:portrait)
之后，您必须相对于父元素指定百分比的元素宽度和高度。这是一种工作方法，但是在移动设备上的带宽消耗方面，这不是最好的方法，因为即使我们将百分比设置为较低，图像也会以本机大小上传，并且在浏览器解析CSS文档后完成了降尺度。
关于W3C的一些建议，术语应如何由不同的设备处理图像，但没有一个通常被接受和标准化。
最收到的建议之一是新的<image>和<source>标签，它们接受不同的图像源，并根据屏幕分辨率使用最适当的图像尺寸。
<picture alt="">
<!-- low-res, default -->
<source src="small.jpg">
<!-- med-res -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- high-res -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content -->
<img src="small.jpg" alt="description of image">
</picture>
有一个模仿提出的图片元素的多填充：https：//github.com/scottjehl/picturefill
以下是两篇有关该概念的彻底解释的文章：
http://nicolasgallagher.com/responsive-images-using-css3/
http://css-tricks.com/on-responsive-images/
您可以使用指定图像的CSS背景定义的DIV。使用CSS Media-Queries，当客户端是具有" Retina-Display"的Apple设备时，您可以选择正确的CSS定义。
您可以使用jQuery：
html：
<img src="/example.png" src-retina="/example-high-res.png"/>
javaScript：
if (window.devicePixelRatio > 1) {
$('img').each(function() {
var src_retina = $(this).attr("src-retina");
$(this).attr("src", src_retina);
});
}
此演示显示其工作方式：http：//jsfiddle.net/tlz7s/。
注意：我可能正在检测到视网膜显示错误；我实际上没有一个。如果有人发现不正确，请告诉我。