使图像适应不同的屏幕宽度，以加快加载时间

Question

我有一个幻灯片放映的网站，我希望这些幻灯片对于在大屏幕上观看网站的人来说是高质量的。但问题是，如果我将带有4096 * 1800px的图像加载到我的图像文件夹中，它在任何设备上看起来都不错，但是当我尝试在手机上加载网站时，我并不需要那么高的图像质量，我d而是加载400 * 180px之类的东西，该图像的尺寸将减少10倍。

所以我的计划是让html根据屏幕分辨率加载不同的图像。 我想写一个脚本可以改变常规html，如下所示： 改变这个：

<img src="img/slide1.jpg"> 

对此：

<img src="img/1200px/slide1.jpg">

或者这个：

<img src="img/600px/slide1.jpg">

等等。

这是最好的方法，还是有更好的方法？ 非常感谢

Answer 1

我认为您正在尝试找到最佳的响应式图像解决方案。我个人更喜欢HISRC使用jQuery和Html方法，使用html标签，如下所示，

<img src="http://placekitten.com/200/100" data-1x="http://placekitten.com/400/200" data-2x="http://placekitten.com/800/400" class="hisrc" />

和javaScript如下所示，

$(document).ready(function(){
  $(".hisrc").hisrc();
});

但是还有许多其他类型的解决方案，您可能更喜欢这些解决方案，如here

所示