使用 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/'
    }
  }
})
</your-cloud-name>

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',
      }
    }
  }
})
</company>

最後，對於 NuxtImg 組件本身，我們可以透過以下屬性來獲得更好的性能：

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

您可以在此處查看所有可用道具清單

但是，如果您正在尋找更高級的 Cloudinary 用法或預先建置元件，例如 VideoPlayer、OgImage 或 ProductGallery，請透過存取模組文件或 GitHub 儲存庫來查看 Nuxt 的 Cloudinary 模組。

我還發表了幾篇有關它的文章，您可以在這裡查看。

？了解更多

如果您想了解有關 Vue、Nuxt、JavaScript 或其他有用技術的更多信息，請單擊此鏈接或單擊下圖查看 VueSchool：

它涵蓋了建立現代 Vue 或 Nuxt 應用程式時最重要的概念，可以幫助您完成日常工作或業餘專案？

✅ 總結

幹得好！您剛剛學習如何使用 Nuxt Image 和 Nuxt Cloudinary 模組向使用者提供高效能影像。

保重，下次再見！

一如既往地快樂編碼？ ️

以上是使用 Nuxt Image 和 Cloudinary 的高效能影像的詳細內容。更多資訊請關注PHP中文網其他相關文章！