更快的响应式图片加载与大规模加载优化方案

都1202年了，还在使用JS做图片响应式么？

1. 使用 picture 标签

HTML picture 元素允许你为同一张图片指定多个不同的源，浏览器会根据设备的屏幕尺寸和像素密度来选择最合适的源。这是实现响应式图片的最简单方法，也是最推荐的方法。

<picture>
  <source srcset="image-small.jpg" media="(max-width: 480px)">
  <source srcset="image-medium.jpg" media="(min-width: 481px) and (max-width: 800px)">
  <source srcset="image-large.jpg" media="(min-width: 801px)">
  <img src="image-small.jpg" alt="Image of a cat">
</picture>

2. 使用CSS object-fit 属性

CSS object-fit 属性可以用来控制元素的内容如何适应其父元素的可用空间。这个属性可以用来实现响应式图片，但要注意它只支持现代浏览器。

.image {
  object-fit: contain;
}

3. 使用JavaScript

JavaScript 可以用来实现响应式图片，但这不是一个好的选择。它不仅会减慢页面的加载速度，还会增加代码的复杂性。不过，如果你必须使用JavaScript来实现响应式图片，那么你可以使用以下代码：

function responsiveImage(image) {
  var width = image.clientWidth;
  if (width < 480) {
    image.src = "image-small.jpg";
  } else if (width < 800) {
    image.src = "image-medium.jpg";
  } else {
    image.src = "image-large.jpg";
  }
}

window.addEventListener("resize", function() {
  var images = document.querySelectorAll("img");
  for (var i = 0; i < images.length; i++) {
    responsiveImage(images[i]);
  }
});

4. 使用框架/库

有很多框架和库可以帮助你实现响应式图片，比如：Responsive Images、Picturefill和Imgix。这些框架/库可以简化响应式图片的实现过程，并提供一些额外的功能，比如懒加载和图像裁剪。

5. 优化图片大小

在实现响应式图片之前，你应该先优化图片的大小。你可以使用 TinyPNG、ImageOptim和 jpegtran 等工具来压缩图片的大小。

结论

响应式图片对于提高用户体验非常重要。你可以通过使用 picture 标签、CSS object-fit 属性、JavaScript框架/库或优化图片大小来实现响应式图片。