审核网站性能时，我总是要做的第一件事是查看图像。在大多数情况下，不良的性能是由于不为现代网络优化的图像而引起的。这对我来说尤其有趣，因为实际上，您可以使用许多快速的胜利来大大提高灯塔和您的实际用户的性能。
我最喜欢的优化提示之一是使用浏览器可以使用的图像格式。要可视化它的积极方面，请查看我创建的以下模因：
我已经在我最近的一篇文章中谈到了vue和nuxt的图像优化，您可以查看here
在本文中，我想查看NUXT的NUXTIMAGE模块，该模块可帮助您为用户提供优化的图像。
什么是nuxtimage？
nuxtimage是NUXT应用程序的插件图像优化。使用内置的优化器或您喜欢的图像CDN调整并更改图像。
它带有几个有用的功能：
- 本机
<img>元素的置换替换 - 本机
<picture>元素的置换替换。 - 带有UNJS/IPX的内置图像恢复和变压器
- 支持18+提供商
- 生成响应尺寸
- 使用诸如WebP和Avif之类的现代格式进行优化
基本上允许您为用户提供优化的图像，这对灯塔和用户的一般体验都有益。
让我们看看如何在代码中使用它。
代码
使用nuxtimage模块相对简单。首先，您需要像以下内容一样安装模块：
yarn add --dev @nuxt/image@rc
接下来，让我们将其添加到nuxt.config.ts文件中，特别是modules数组：
export default defineNuxtConfig({
modules: [
'@nuxt/image',
]
})
如果我们喜欢：
，我们可以选择通过一些配置
image: {
// Options
}
我们可以开始使用NUXT应用程序内部的<nuxt-img/>组件如下：
<nuxt-img src="/nuxt-icon.png" />
此NUXTIMG组件带有几个道具，您可以用于交付优化图像，例如：
- 宽度/高度 - 指定图像的宽度/高度
- 尺寸 - 这是屏幕大小/宽度对的空间分隔列表
- 提供商（默认情况下IPX） - 例如云，故事博等等
- 格式 - 可用格式是WebP，AVIF，JPEG，JPG，PNG，GIF和SVG。如果未指定格式，它将尊重默认图像格式。
- 质量 - 生成图像的质量。
- 预紧力 - 如果要预紧图像，请使用此道具。这将在页面的头部放置一个相应的链接标签。
- 加载 - 这是一个本机属性，可以提示浏览器如何处理视图外部的图像的加载
以及更多！您可以查看可用道具和事件的完整列表here
资源
我创建了几个视频和文章，我在其中使用Nuxtimage模块，您可以在下面查看：