nextjs系列教程(九)：图片优化

HarryDeveloper

已于 2023-04-21 09:28:03 修改

阅读量1.6k

点赞数 2

分类专栏： # nextjs合集文章标签：前端 javascript html

于 2023-04-19 14:53:22 首次发布

本文链接：https://blog.csdn.net/qq_26884891/article/details/130222123

版权

nextjs合集专栏收录该内容

11 篇文章 23 订阅

订阅专栏

图片和字体优化

图片是一个网页的重要组成部分，大部分网页中都包含了大量的图片信息。然而，如果图片没有得到适当优化，它们的加载也会减慢网站的运行速度，不利于用户体验。

图片优化方案

使用 nextjs 内置的 Image 组件，该组件可以自动优化图片以提升网站性能。
使用 nextjs 内置的图片处理功能，自动调整大小、压缩和优化图片。

Image组件

1. Image组件优势

Image 组件内置的优化功能包括：
- 性能提升：始终使用现代图片格式，为每台设备提供合适尺寸的图片。
  - webp 是一种现代图像格式，可为 web 上的图像提供卓越的无损和有损压缩。使用 webp，网站管理员和 web 开发人员可以创建更小、更丰富的图像，从而使 web 更快，性能更好。
- 视觉稳定性：自动阻止非预期内容偏移，简称 CLS。
  - 网站中的资源是异步下载的，页面内容也是动态添加到页面上，所以内容发生非预期偏移场景比较常见。比如：未设置宽高的<image>、<video>元素、实际使用的字体与备用大小不一致、可以动态变更大小的第三方广告或者组件都有可能是导致页面发生非预期偏移。
  - 可以给 image、vide 元素设置 size 属性，或者预留 image 需要的布局空间。这个做法确保让浏览器在图片正在加载时就分配好正确的布局空间，避免非预期内容偏移。
- 更快的页面加载速度：图像只有在进入网页视口时才会被加载，并带有可选的模糊占位符，用于图片未加载完成时的临时占位图片，类似于图片懒加载技术。
- 资源的适应性更好：按需调整图像大小，即使是存储在远程服务器上的图像也同样适用。

2. Image组件用法

Image 组件属性介绍
- width 和 height 属性：设置图片宽度和高度，可以只设置其中一个属性，另一个属性自适应调整大小。
- src 属性：设置图片资源地址，可以是远程图片、本地图片。
- alt 属性：图片加载失败时的文本提示。
- layout 属性：设置图片在容器中如何展示。

2.1 本地图片

使用 import 导入本地图片文件，.jpg、.png、.webp 文件都支持导入
```
// 新建 src/assets/imgs 目录，并导入图片资源
import test from "@/assets/imgs/test.jpg";
```
- 不支持动态导入 await import() 或 require()。导入必须是静态的，这样才能在构建时对其进行分析。

编写组件代码

import Image from "next/legacy/image";
import test from "@/assets/imgs/test.jpg";
export default function ImageCom() {
  return (
    <div className="ImageCom">
      // 设置src属性即可。Next.js将根据导入的文件自动确定图像的宽度和高度。这些值在加载图像时可以防止“非预期布局偏移”的问题。
      <Image src={test} alt="加载失败"></Image>
      <h5>图片优化</h5>
    </div>
  );
}

如果不采用 import 的方式进入图片导入，也可以将图片放在 public 目录下，组件内可以利用路径地址，找到图片资源

import Image from "next/legacy/image";
export default function ImageCom() {
  return (
    <div className="ImageCom">
      // /默认会从 public 目录下找资源。但这种设置方式，必须同时设置 width 和 height 属性指定宽高，否则报错。
      <Image src="/test.jpg" width={300} height={200} alt="加载失败"></Image>
      <h5>图片优化</h5>
    </div>
  );
}

layout 属性

在不知道图像的宽度和高度的前提下，仍希望图片在保持纵横比的同时填满整个父盒子空间。在这种情况下，您可以省略 Image 组件上的 width 和 height 属性。相反，添加一个 layout="fill" 的 prop 属性。这会将图像拉伸到父盒子的宽度和高度。使用 layout="fill" 属性时，最好将其与 objectFit="cover" 配对。
```
import Image from "next/legacy/image";
import test from "@/assets/imgs/test.jpg";

export default function ImageCom() {
  return (
    // 给父元素设置容器大小，并设定position: "relative"。
    <div className="ImageCom">
      <div
        className="img"
        style={{ position: "relative", height: "300px", width: "500px" }}
      >
        <Image src={test} layout="fill" alt="加载失败"></Image>
      </div>
      <h5>图片优化</h5>
    </div>
  );
}
```
- 在保证图片纵横比不失真，不变形的同时，不适合父元素的图像部分将被剪裁。
- objectFit 属性用于定义使用 layout=“fill” 属性时，图像将如何放入其父容器。详情参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
layout 属性取值
- fill：在 x 轴和 y 轴同比缩放，以保证图片能够充满整个父容器空间。
- responsive：在 x 轴缩放，以保证图片的宽度充满父容器空间，高度则不保证，高度会自适应。
- fixed：按图片自身宽度和高度精确尺寸。图像尺寸不会随着视口的变化而变化（无响应），类似于本地img元素了。
quality 属性

优化图像的质量，是1和100之间的整数，其中100是最好的质量，默认为75。
```
<Image
  src={test}
  layout="responsive"
  quality={60}
  alt="加载失败"
></Image>
```
placeholder 属性

加载图像时，placeholder属性用作备用图像，它的可能值为 blur或 empty，默认是 empty。
- 值为 empty 时，图像加载时不会有占位符，只显示空白。
- 值为 blur 时，将使用 blurDataURL 属性作为占位符。
blurDataURL 属性

blurDataURL 属性是占位符图片，在 src 图片成功加载之前加载，必须是 base64 编码的图片，只有与 placeholder="blur" 结合使用时才有效。
```
<Image
  src={test}
  layout="responsive"
  quality={60}
  alt="加载失败"
  placeholder="blur"
  blurDataURL="data:image/png;base64,..."
></Image>
```

2.2 远程图片

创建 Image 组件，并设置远程图片地址

<Image src="https://img0.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
  width="300"
  height="200"
></Image>

配置 next.config.js 文件，配置远程图片域名

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ["img0.baidu.com"],
  },
};

module.exports = nextConfig;

重启项目即可加载远程图片。

2.3 Image组件样式

图片组件不支持 style 属性。因此，要设置组件样式，需使用 className 或者是样式文件修改。

<Image
  // 报错，不支持style属性。
  style={{ border: "2px solid red" }}
  src="https://img0.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
  width="300"
  height="200"
></Image>