使用 Nuxt Image 和 Cloudinary 的高性能图像

当人们问我在尝试提高网站性能时的第一个建议是什么时，我的第一个想法总是查看图像。它们是否以现代且优化的形式提供？它们的尺寸合适吗？它们是否正确延迟加载，以便浏览器在实际需要时开始获取它们？

正因为如此，我总是倾向于从一开始就在我的项目中使用高性能图像。由于我最喜欢的现代 Web 框架是 Nuxt，我立即想到了 Nuxt Image - 一个可以帮助您向用户提供更高性能图像的模块。但为了提供更好的体验，您可以将 Nuxt Image 模块配置为与众多第三方图像提供商之一合作 - 在这里我将始终选择 Cloudinary ？

在本文中，我将向您展示如何使用 Nuxt Image 和 Cloudinary 向用户提供优化的高性能图像。

希望你会喜欢:)

享受吧！

？使用 Nuxt Image 和 Cloudinary 制作高性能图像

要获得这些高性能图像，我们需要做的第一件事是在我们的项目中安装 Nuxt Image 模块。我们可以通过使用 nuxi 来做到这一点，如下所示：

npx nuxi@latest module add image

这将使用默认（本地）配置将模块添加到我们的项目中。为了与 Cloudinary 配合使用，我们需要将其更改为以下内容：

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
    }
  }
})

Nuxt Image 的 Cloudinary 提供商会自动启用自动格式选择和自动质量选择，以获得最佳性能。这意味着，除非我们的用例与最常见的用例不同，否则我们不需要关心这些方面。

除了自动质量和格式选择之外，我们还可以采取一些措施来为用户提供性能更高、优化的图像。

首先，我们可以配置图像的尺寸属性，该属性将用于生成图像的调整大小和优化版本。可以像下面这样完成：

export default defineNuxtConfig({
  image: {
    screens: {
      'xs': 320,
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536
    },
  }
})

接下来，我们可以添加全局修饰符，这些修饰符将添加到我们的所有图像中，如下所示：

export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',
      modifiers: {
        quality: 'auto:best',
      }
    }
  }
})

最后，对于 NuxtImg 组件本身，我们可以通过以下属性来获得更好的性能：

<NuxtImg src="/nuxt-icon.png" loading="lazy" />

您可以在此处查看所有可用道具列表

但是，如果您正在寻找更高级的 Cloudinary 用法或预构建组件（例如 VideoPlayer、OgImage 或 ProductGallery），请通过访问模块文档或 GitHub 存储库来查看 Nuxt 的 Cloudinary 模块。

我还发表了几篇有关它的文章，您可以在这里查看。

？了解更多

如果您想了解有关 Vue、Nuxt、JavaScript 或其他有用技术的更多信息，请单击此链接或单击下图查看 VueSchool：

它涵盖了构建现代 Vue 或 Nuxt 应用程序时最重要的概念，可以帮助您完成日常工作或业余项目？

✅ 总结

干得好！您刚刚学习了如何使用 Nuxt Image 和 Nuxt Cloudinary 模块向用户提供高性能图像。

保重，下次再见！

一如既往地快乐编码？️

以上是使用 Nuxt Image 和 Cloudinary 的高性能图像的详细内容。更多信息请关注PHP中文网其他相关文章！