优化图片和资源加载：使用现代图片格式和懒加载

提升图片和资源加载性能是前端优化的重要环节，尤其在页面中存在大量图片时。下面是优化的几种方法以及代码示例。

优化方式

现代图片格式：
- WebP、AVIF 是现代图片格式，具有更高的压缩率和更小的文件大小，且不损失明显质量。
- 浏览器兼容性良好（Can I use WebP?）。
图像懒加载：
- 使用 loading="lazy" 属性让图片在进入视口（viewport）时才加载，减少初始加载时间。
响应式图片：
- 使用 srcset 和 sizes 属性加载适合屏幕尺寸的图片。
CDN 服务：
- 利用 CDN 提供图片压缩、格式转换和分发。

代码示例

1. 简单示例：使用现代图片格式和懒加载


import React from "react";

const ImageGallery = () => {
  return (
    <div>
      <h1>图片库</h1>
      <img
        src="example.webp"
        alt="示例图片"
        width="600"
        height="400"
        loading="lazy" // 懒加载属性
        />
      <img
        src="example2.webp"
        alt="示例图片2"
        width="600"
        height="400"
        loading="lazy"
        />
    </div>
  );
};

export default ImageGallery;

2. 响应式图片示例

通过 srcset 和 sizes 提供不同尺寸的图片，适应不同屏幕。


import React from "react";

const ResponsiveImage = () => {
  return (
    <div>
      <h1>响应式图片</h1>
      <img
        src="example-small.webp" // 默认图片
        srcSet="
        example-small.webp 600w, 
        example-medium.webp 1200w, 
        example-large.webp 2000w"
        sizes="(max-width: 600px) 600px, 
        (max-width: 1200px) 1200px, 
        2000px" // 根据屏幕宽度加载不同尺寸的图片
        alt="响应式示例图片"
        loading="lazy"
        />
    </div>
  );
};

export default ResponsiveImage;

3. 配合图片占位符的懒加载

在图片加载完成前，使用低质量图片或背景色作为占位符，提升用户体验。


import React, { useState } from "react";

const LazyImage = ({ src, alt }: { src: string; alt: string }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <div
      style={{
        width: "600px",
        height: "400px",
        backgroundColor: "#f0f0f0", // 占位背景
        position: "relative",
        overflow: "hidden",
      }}
      >
      {!isLoaded && (
        <div
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
          >
          加载中...
        </div>
      )}
      <img
        src={src}
        alt={alt}
        loading="lazy"
        onLoad={() => setIsLoaded(true)} // 图片加载完成时更新状态
        style={{
          display: isLoaded ? "block" : "none",
          width: "100%",
          height: "auto",
        }}
        />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>懒加载图片示例</h1>
      <LazyImage src="example.webp" alt="示例图片" />
    </div>
  );
};

export default App;

4. 使用第三方库（如 `react-lazyload`）

当需要懒加载大量图片时，可以借助第三方库，比如 react-lazyload：


import React from "react";
import LazyLoad from "react-lazyload";

const ImageGallery = () => {
  return (
    <div>
      <h1>使用 react-lazyload 懒加载</h1>
      <LazyLoad height={400} offset={100} placeholder={<div>加载中...</div>}>
        <img src="example1.webp" alt="图片1" width="600" height="400" />
      </LazyLoad>
      <LazyLoad height={400} offset={100} placeholder={<div>加载中...</div>}>
        <img src="example2.webp" alt="图片2" width="600" height="400" />
      </LazyLoad>
    </div>
  );
};

export default ImageGallery;