在系统的目录里找到页面上显示的这个本地图像，检查一下图像的尺寸，显示这张图像的大小是 2.2MB，图像的类型是 jpg，图像的宽度是 5184。

在浏览器，开发者工具，打开网络选项卡，过滤出页面加载的图片。再勾选一下停用缓存，然后刷新页面。

找到页面显示的这张图像，你会发现这个图像的类型是 webp 格式的，大小只有 133KB，比原本的体积小了很多。这是因为 Next.js 框架会优化要显示的图像，为用户提供合适的类型与尺寸的图像。

检查一下这个图像元素，显示这个图像用的是 img 元素，在元素上多了很多属性，暂时先不用管这些属性。鼠标放在这个图像元素的上面，会显示图像的大小，还有它当前渲染的尺寸与它的固定尺寸，这里显示图像的固定尺寸是 3840 像素。也就是 Next.js 不但转换了图像的格式，还调整了图像的大小，因为在本地，这张图像原本的宽度是 5184 像素。

再回到网络选项卡，这里显示页面上加载的图像名称里面，有一些查询符，比如 w 这个查询符后面的值应该就是这个图像的大小，Next.js 会按这个值生成需要的图像，q 查询符后面的值是图像的质量，它的值可以是从 1 到 100 之间的数字，现在用的是 75% 的质量。

在这个 Image 组件上面，用 quality 属性可以设置图像质量，比如设置成 80 ，保存一下文件。再回到浏览器观察一下，你会看到如果把这个图像质量设置成 80%，它的体积会比 75% 质量的图像要大一些，因为它的质量更高了。