Nuxt Image と Cloudinary を使用したパフォーマンスの高いイメージ-jsチュートリアル-php.cn

Nuxt Image と Cloudinary を使用したパフォーマンスの高いイメージ

Linda Hamilton

リリース： 2024-10-21 16:36:29

オリジナル

1124 人が閲覧しました

ウェブサイトのパフォーマンスを向上させたいときに最初に勧めるものは何ですかと尋ねられると、私の最初のアイデアは常に画像を見ることです。最新の最適化された形式で提供されていますか?サイズは適切ですか?実際に必要なときにブラウザが取得を開始できるように、それらは適切に遅延ロードされていますか?

そのため、私は常に最初からプロジェクトでパフォーマンスの高い画像を使用する傾向があります。私のお気に入りの最新 Web フレームワークは Nuxt なので、すぐに Nuxt Image について思いつきました。これは、よりパフォーマンスの高い画像をユーザーに提供するのに役立つモジュールです。ただし、さらに優れたエクスペリエンスを提供するために、多くのサードパーティのイメージプロバイダーの 1 つと連携するように Nuxt イメージモジュールを構成できます。ここでは常に 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 コンポーネント自体については、次の props を渡してパフォーマンスを向上させることができます。

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

ログイン後にコピー

利用可能な小道具のすべてのリストはここで確認できます

ただし、より高度な Cloudinary の使用法や、VideoPlayer、OgImage、ProductGallery などの事前構築済みコンポーネントをお探しの場合は、モジュールのドキュメントまたは GitHub リポジトリにアクセスして、Nuxt 用の Cloudinary モジュールを確認してください。

これに関する記事もいくつか公開していますので、こちらでご覧ください。