极客教程Next.js 图像优化
对于图像优化，NextJS 提供了一个图像组件，它是 HTML 元素 的扩展。NextJS 提供了一些内置的优化来实现良好的核心网页指标。
首先让我们了解下什么是核心网页指标（Core Web Vitals）：核心网页指标是一组标准化的度量指标，用于衡量网页上的用户体验。这些指标评分了页面内容加载的速度。
有三种核心网页指标：
- 最大内容绘制时间（Largest Contentful Paint，LCP）
- 首次输入延迟（First Input Delay，FID）
- 累积布局偏移（Cumulative Layout Shift，CLS）
1. 最大内容绘制时间（Largest Contentful Paint，LCP）： 它用秒表示，衡量了网页主要内容加载的速度。基本上，它衡量了页面加载到图像渲染完成的时间。LCP 值越低，结果越好。我们可以通过优化渲染路径、CSS 和图像来改善 LCP。
2. 首次输入延迟（FID）： 它衡量了从你点击链接到它们响应的时间。我们可以通过减少JavaScript执行时间和第三方代码的影响来改善FID。
3. Cumulative Layout Shift (CLS): CLS用于衡量一个网页移动的次数，基本上，它用于计算一个网页的视觉稳定性。我们可以通过在图像上包含 width和height 属性来改善CLS。
NextJS提供的一些内置图像优化API（next/image）包括：
- 提升用户体验 : 延迟或立即加载图像，加快网站加载时间性能。
- 良好的开发者体验 : 提供缓存和加载器等选项。
- 视觉稳定性 : 自动预防内容移位。
- 优化LCP : NextJS为图像提供优先级属性。
- 响应式设计 : 如果在布局中设置了响应式属性，NextJS会自动处理。
NextJS中的Image组件： <image/>类似于HTML中的 < img>元素，都接受src和alt属性。
运行NextJS及其Image组件的步骤：
步骤1： 在您的计算机上安装NodeJS。要了解如何安装NodeJS，请点击这里。
步骤2： 创建一个新文件并将目录更改为所创建的文件。在终端中使用以下命令：
cd file_name
步骤3： 使用以下命令创建下一个应用程序：
npx create-next-app app_name
步骤4：项目结构 应该长这样：
步骤5： 在pages/index.js中导入图像组件
import Image from "next/image";
图像优化：
1. 图像加载： 我们可以指定图像的加载行为，当您向下滚动时，下一个图像会自动加载。有两种加载方式：
- eager： 立即加载图像。
- lazy： 默认为图像组件。加载直到图像可见。
示例：
import Image from "next/image";
const index = () => {
return (
<>
<h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
<Image src="/gfgg.png" alt="Loading"
width={500}
height={550}
loading="eager"
/>
</>
);
};
export default index;
注意： 急切模式不适合优化，请使用优先级属性。
运行应用的步骤： 使用以下命令运行你的Next应用：
npm run dev
输出：
2. Priority prop: 有时候我们需要使用 priority = {true} 提前预加载关键图像，从而提高LCP。
示例:
//Priority prop
import Image from "next/image";
const index = () => {
return (
<>
<h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
<Image src="/gfgg.png" alt="Loading"
width={500}
height={550}
priority={true}
/>
</>
);
};
export default index;
3. 图片尺寸： 如我们所见，为了改善CLS，我们需要包括图片的宽度和高度。这样可以让浏览器在加载图片之前保留空间。如果您不知道图片的尺寸，您可以使用 layout = “fill”。
layout = “fill” 响应其父元素的尺寸 。
布局提供了四个值：
- fill
- intrinsic（固有）
- responsive（响应式）
- fixed（固定）
示例：
import Image from "next/image";
const index = () => {
return (
<>
<h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
<Image src="/gfgg.png" alt="Loading"
layout="fill"
/>
</>
);
};
export default index;
输出：
4. ObjectFit属性： 与 layout = “fill” 一起使用。它设置图像在容器中如何调整大小以适应。
Objectfit提供四个值：
- contain
- cover
- fill
- none
示例：
//ObjectFit
import Image from "next/image";
const index = () => {
return (
<>
<h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
<Image src="/gfgg.png" alt="Loading"
layout="fill"
objectFit="contain"
/>
</>
);
};
export default index;
输出:
5. Placeholder prop: 它用作在图片加载时的替代图像。它也被称为临时替代或加载指示器。占位符表示正在加载图像。
Placeholder提供两个值：
- blur
- 空
示例：
//Placeholder
import Image from "next/image";
const index = () => {
return (
<>
<h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
<Image src="/gfgg.png" alt="Loading"
width={600}
height={450}
placeholder="blur"
blurDataURL="data:image/png;base64,[IMAGE_CODE_FROM_PNG_PIXEL]"
/>
</>
);
};
export default index;
输出:
6. 图片质量设置: 通过提供 1 到 100 之间的数值，我们可以定义图片的质量。默认值为75。
我们可以通过使用以下命令来调整quality的值：
quality="100"
示例:
//Quality of the image
import Image from "next/image";
const index = () => {
return (
<>
<h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
<Image src="/gfgg.png" alt="Loading"
width={500}
height={550}
quality="100"
/>
</>
);
};
export default index;
输出：
