图说图论：一张图搞定图片处理

前端

2023-09-09 23:48:58

在当今这个图像主导的互联网世界中，图片已经成为网站不可或缺的一部分。它们不仅可以使网站看起来更具吸引力，还可以帮助您传达信息并吸引访问者。然而，如果您不注意图片的优化，它们可能会拖慢您网站的速度，从而导致访客流失。

图片优化

图片优化是指通过各种方法减小图片的大小，以便更快地加载。这可以通过多种方式来实现，包括：

选择合适的图片格式 ：图片有PNG、JPG、WEBP等多种格式，每种格式都有其优缺点。PNG格式无损压缩，图像质量好，但文件较大；JPG格式有损压缩，图像质量略有下降，但文件较小；WEBP格式是谷歌开发的新格式，兼顾了PNG和JPG的优点，文件较小，图像质量也很好。
使用图片懒加载 ：图片懒加载是指在页面加载时不立即加载所有图片，而是在用户滚动到图片所在位置时再加载。这可以有效地减少页面加载时间，提高网站的性能。
压缩图片 ：您可以使用各种工具来压缩图片，以减小其大小。这不会影响图像质量，但可以显著减少文件大小。
使用CDN加速图片加载 ：CDN（内容分发网络）可以帮助您将图片存储在离用户更近的地方，从而加快图片的加载速度。

图片格式

图片有PNG、JPG、WEBP等多种格式，每种格式都有其优缺点。

PNG ：PNG格式无损压缩，图像质量好，但文件较大。PNG格式适用于需要高画质的图片，如产品图片、插图等。
JPG ：JPG格式有损压缩，图像质量略有下降，但文件较小。JPG格式适用于需要中等画质的图片，如新闻图片、博客图片等。
WEBP ：WEBP格式是谷歌开发的新格式，兼顾了PNG和JPG的优点，文件较小，图像质量也很好。WEBP格式适用于所有类型的图片。

图片懒加载

图片懒加载是指在页面加载时不立即加载所有图片，而是在用户滚动到图片所在位置时再加载。这可以有效地减少页面加载时间，提高网站的性能。

图片懒加载可以通过多种方式来实现，最常见的是使用JavaScript。以下是一个使用JavaScript实现图片懒加载的例子：

function lazyLoadImages() {
  var images = document.querySelectorAll("img[data-src]");

  for (var i = 0; i < images.length; i++) {
    var image = images[i];

    if (image.getBoundingClientRect().top < window.innerHeight) {
      image.src = image.getAttribute("data-src");
    }
  }
}

window.addEventListener("scroll", lazyLoadImages);