Next.js 10 图片优化组件与 next-optimized-images 的简要比较

编辑：自从写了这篇博客之后，我试用了 Next.js 内置的图片优化功能。我发现，由于必须指定 `<img>`width或height使用layout="fill"父组件来调整图片大小，因此无法让图片根据容器的高度动态调整大小，例如，不能再使用 `<img>` 了height="100%"。这个限制似乎也给其他人的项目带来了问题。希望他们将来能修复这个问题！目前，我还是会继续使用 `<img>`。next-optimized-images

Next.js 10 于昨日发布，这是首届Next.js Conf的一部分，这是一场互动式在线体验，包含围绕 Next.js 各个方面的各种演讲。

版本 10 中一项突破性功能是全新的图像组件和自动图像优化。图像组件旨在完全替代现有<img>元素，使用后将：

1. 缩小图片尺寸。
2. 针对桌面和移动设备屏幕等各种视角进行优化。
3. 图片延迟加载，页面下方的图片稍后加载，页面顶部的图片优先加载。
4. 尽可能将图像转换为下一代格式，例如 WebP（比 JPEG 小 30%）。

这些优化措施累积起来，有可能通过将一个更改<img>为一个来大大提高网站速度<Image>。

以下是一些来自 Next.js 10 博客的关于图像优化的有趣数据：

• “图片占用网页总字节数的 50%”。
• “一半的图片大小都超过 1 MB”。
• 用户使用手机、平板电脑和笔记本电脑浏览网页，但图片仍然采用统一的尺寸。例如：网站加载的是2000 x 2000像素的图片，但手机上却只能显示为100 x 100像素。
• “网页上30%的图片位于初始视口之外，这意味着浏览器加载的图片用户只有在向下滚动页面后才能看到。”
• “网站上99.7% 的图片未使用 WebP 等现代图片格式”。
• “WebP……比JPEG小约30%”。

请访问 nextjs.org 阅读完整博文。

如果你读到这里，我知道你在想什么……这难道不是已经有人做过了吗？

答案是，算是吧……

输入下一个优化图像

Next-optimized-images 是一个 Next.js 插件，顾名思义，它可以自动优化您的图像。

我用它好几年了，第一次接触它是在为客户搭建网站https://artistjodi.com的时候。这个网站图片数量多得惊人，它让我省去了手动压缩每张图片或者编写脚本的麻烦。总之，它帮我节省了大量时间，还提供了我之前从未想过的功能。

Next-optimized-images 表示它将：

• 通过在构建过程中优化图像来减小图像大小（20-60%）
• 通过提供渐进式图像（对于支持的格式）来提高加载速度。
• 内嵌小图片以减少HTTP请求和额外的往返次数。
• 在文件名中添加内容哈希值，以便图像可以在 CDN 层和浏览器中长时间缓存。
• 多个构建版本使用相同的图像 URL 以实现长期缓存
• 提供用于文件特定处理/设置的查询参数；JPEG/PNG 图像可以动态转换为 WebP 格式，从而获得更小的尺寸。
• 当多次使用相同的图标（例如在列表中）时，可以使用 SVG 精灵图来提高性能。
• 可以在延迟加载图像时调整图像大小或生成不同的占位符：例如低质量图像、主色调或图像轮廓。

来自 GitHub 仓库

这听起来很像 Next.js 的Image组件。事实上，在其 canary 分支（版本 3）中，它有自己的 Image 组件。让我们从理论上看看它们之间的区别。

快速查看差异

看来 Next.js 的图像组件可以完成基本操作，但如果您正在寻找 Next.js 的完整图像优化解决方案，next-optimized-images 仍然有用武之地。

易用性

Next.js 代码示例：

function DemoMyImage() {
  return <img src="./picture.jpg" alt="a picture" height="200" width="100" />
}

Next.js 图像组件

要修改示例代码以使用该<Image>组件，只需将其导入即可。

import Image from 'next/image'

function DemoMyImage() {
  return <Image src="./picture.jpg" alt="a picture" height="200" width="100" />
}

下一版优化图像（V2/当前）

Next-optimized-images 也即将推出 V3 版本，其中包含自己的 Image 组件，我在下文中会详细介绍。

由于 next-optimized-images 是一个外部插件，因此设置起来稍微复杂一些。

首先，我们需要安装图像优化所需的软件包以及其他必要的软件包。由于示例图像是 JPEG 格式，我们需要添加相应的imagemin-mozjpeg软件包webp-loader来启用 JPEG 优化和 WebP 转换。此外，我们还会添加responsive-loader用于图像缩放的软件包。

npm install -s next-optimized-images imagemin-mozjpeg responsive-loader sharp

接下来，我们需要更新 Next.js 配置以启用图像优化。

// next.config.js
const optimizedImages = require('next-optimized-images');
module.exports = optimizedImages();

通过图像尺寸调整、JPG 优化以及可能的 WebP 转换，使用该插件的示例将如下所示：

function DemoMyImage() {
  const imgSrc = require('./picture.jpg?resize&size=100');
  return <img src={imgSrc.src} alt="a picture" />
}

下一代优化图像（V3/Canary）

Next-optimized-images V3 是对现有扩展的完全重写，旨在修复 V2 版本中的所有已知 bug。在 V3 中，您可以使用 `import Image`import而不是`import Image` 来导入图像require，并利用<Img>Next.js 内置的组件等功能。

V3 的配置在canary 分支上。

我们来看看这个<Img>组件的用法。

import Img from 'react-optimized-image';
import MyImage from './picture.jpg';

function DemoMyImage() {
  // Attempt WebP conversion and fallback to JPEG
  <Img src={MyImage} webp sizes={[100]} />
}

如您所见，它比 V2 的 require 系统使用查询进行调整大小要简洁得多?resize。它也比 Next.js 组件更具可定制性<Image>，因为它可以利用 Next-optimized-images 多年来积累的所有功能。

V3 的发布日期目前未知，并且可能存在 bug，因此如果您想使用自定义图像组件，Next.js 组件是更安全的选择，因为它已完全发布并得到支持。

代码比较摘要

虽然初始设置比内置组件要长一些，但一旦完成，你只需require()在现有文件路径周围添加一个即可。

 结论

新的内置图像组件是优化图像的一个很好的起点，但下一个优化图像似乎仍然能够处理更多图像类型并提供更多自定义功能，例如渐进式图像加载和占位符。

也就是说，对于使用少量图片的项目，Next.js 的图像组件可能更合适，因为它开箱即用，无需任何额外配置即可优化图片。我相信未来图像组件只会越来越好，所以它与 next-optimized-images 插件相比有哪些不同之处，尤其是在 V3 版本包含了自己的 React 组件之后，将会非常有趣。

版本 10 中的所有新特性都为 Next.js 成为您的首选 React.js 框架提供了更多理由，我很兴奋能尝试所有这些特性——尤其是图像组件。

你觉得新的图像组件怎么样？请在评论区留言告诉我你的想法！