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

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

そのため、私は常に最初からプロジェクトでパフォーマンスの高い画像を使用する傾向があります。私のお気に入りの最新 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/'
    }
  }
})
</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 コンポーネント自体については、次の props を渡してパフォーマンスを向上させることができます。

<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 中国語 Web サイトの他の関連記事を参照してください。