HOW - 图像加载自动优化方案

前言

在 HOW - next/image Web 图片优化参考指南 中我们同样发现 next/image 具备如下特性：

自动优化：next/image 自动优化图像，确保它们以最合适的格式、尺寸和质量加载，提升页面性能。

next/image 的自动优化能力是 Next.js 的一大亮点，它背后的原理结合了服务端处理（或者边缘函数）和浏览器端的响应式加载。下面是它实现“自动优化图像”的核心机制和原理。

next/image 自动优化的实现原理

1. 图像请求通过 Image Optimization API 拦截

当你使用：

import Image from 'next/image';
<Image src="/images/cat.jpg" width={
   500} height={
   300} alt="Cat" />

Next.js 实际不会直接返回 /images/cat.jpg 静态文件，而是将它通过 内部的图像优化 API 进行处理，会变成这样：

<img
  src="/_next/image?url=%2Fimages%2Fcat.jpg&w=750&q=75"
  srcset="/_next/image?url=%2Fimages%2Fcat.jpg&w=500&q=75 500w,
          /_next/image?url=%2Fimages%2Fcat.jpg&w=1000&q=75 1000w"
  sizes="(max-width: 768px) 100vw, 750px"
  loading="lazy"