有哪些方法可以优化图片的加载

吴小沫
163 阅读5分钟

优化图片以下几种:

  1. 压缩图片：使用图片压缩工具将图片文件压缩到更小的尺寸。这可以通过减少图片质量、压缩算法等方式来实现。
  2. 使用适当的图片格式：对于不同类型的图片，应该使用不同的格式来进行优化。比如说，JPEG 格式适合用于图片、PNG 格式适合用于图标或者简单的图形。
  3. 图片懒加载：将页面中的图片延迟加载，即当用户滚动到某个位置时，再加载该位置的图片，以减少页面首次加载时间。
  4. 基于浏览器的缓存：使用浏览器缓存来提高页面加载速度。浏览器会将页面中的图片、脚本等文件缓存起来，下次访问时不需要重新下载，从而加快页面加载速度。
  5. 使用 CDN 加速：将图片等静态资源上传至 CDN（内容分发网络）上，使用户可以从最近的节点获取这些资源，从而减少延迟时间，提高页面加载速度。
  6. 使用 WebP 图片格式：WebP 是一种现代的图片格式，与 JPEG 和 PNG 相比可以提供更小的文件尺寸和更好的质量，同时也支持透明度和动画等特性。
  7. 去除图片元数据：图片文件中可能包含一些元数据，比如拍摄日期、摄影师、地点等信息，这些信息对于网页显示来说是无用的，可以通过工具去除它们，从而减小图片文件尺寸。
  8. 使用 CSS Sprites：CSS Sprites 是一种将多个图片合并成一张图片，并通过 CSS 属性来控制显示的技术。这可以减少 HTTP 请求次数，从而提高页面加载速度。
  9. 缩小图片尺寸：将大图片缩小到实际需要的尺寸，以减少文件尺寸和加载时间。
  10. 使用响应式图片：使用 HTML5 中的 picture 标签和 source 标签来根据不同设备屏幕大小加载不同大小的图片，从而提高页面加载速度。

如何实现图片的懒加载？

懒加载（Lazy Loading）是一种优化网站性能的技术，它可以使网站的加载速度更快。懒加载指的是延迟加载图片或其他资源，只有当用户滚动到页面中需要显示它们的位置时，才开始加载它们。

以下是一个基本的图片懒加载实现的示例代码：

HTML:

<img class="lazy" data-src="image.jpg" alt="Image" width="600" height="400">

CSS:

.lazy {
  opacity: 0; /* 初始时图片不可见 */
  transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
  opacity: 1; /* 图片加载后可见 */
}

JavaScript：

const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');

        img.setAttribute('src', src);
        img.classList.add('loaded');
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

解释：

  1. 首先，我们使用 querySelectorAll 方法获取到所有的懒加载图片。
  2. 然后，我们定义了一个 lazyLoad 函数，它接收一个目标元素作为参数，并创建了一个 IntersectionObserver 对象。IntersectionObserver 可以监听元素的可见性，当目标元素进入视口时，就会触发回调函数。
  3. 在回调函数中，我们检查目标元素是否可见，如果可见，就获取 data-src 属性中的图片地址，并将它设置为 src 属性的值，然后给图片添加一个 loaded 类，最后调用 disconnect 方法断开观察器的连接。
  4. 最后，我们对每个懒加载图片都调用 lazyLoad 函数进行处理。

注意：以上代码仅为示例，实际情况可能需要进行适当的修改。

IntersectionObserver 对象是什么？

IntersectionObserver 是一种现代浏览器提供的 JavaScript API，用于监测一个目标元素与其祖先元素或视口之间的交叉状态。它可以实现很多有用的功能，比如实现图片懒加载、实现滚动时元素动画效果、实现响应式布局等等。

IntersectionObserver 对象可以通过 new 关键字创建，它接受一个回调函数作为参数。每当目标元素进入或离开视口，或者与祖先元素的交叉状态发生变化时，回调函数都会被调用。回调函数会接收一个 IntersectionObserverEntry 对象的数组作为参数，每个 IntersectionObserverEntry 对象都代表一个目标元素与视口或祖先元素的交叉状态。

IntersectionObserver 对象还可以配置一些选项，比如 threshold（交叉比例阈值）、root（根元素）、rootMargin（根元素的边距），这些选项可以用来调整观察器的行为。

相对于传统的事件监听方式，IntersectionObserver 更加高效和灵活。它可以减少回调函数的调用次数，避免了大量的重复计算，从而提高了网站的性能。同时，它也可以处理动态生成的元素，以及在任何时候都可以监听元素的可见性，无需重新计算位置。

Regenerate response

压缩图片网站：

以下是一些常用的图片压缩网站：

TinyPNG: tinypng.com/

Compressor.io: compressor.io/

Kraken.io: kraken.io/

Optimizilla: optimizilla.com/

ImageResize.org: imageresize.org/compress-im…

JPEGmini: www.jpegmini.com/

ResizePixel: www.resizepixel.com/image-compr…

这些网站可以帮助你压缩图片的大小，从而减少图片的加载时间，提高网页的加载速度。请注意，压缩图片可能会影响图片的质量，因此在压缩之前请确保备份原始图片

avatar
文章
阅读
粉丝