imgix で新しい Nuxt イメージコンポーネントを使用する

Nuxtは最近、新しい画像最適化モジュールをリリースしました。これにより、開発者は追加のサードパーティライブラリをインストールしなくても、Nuxt内で画像を簡単に最適化できます。imgixは、新しいNuxt Image Componentを使用する最初の画像プロバイダーの1つであることを嬉しく思います。このブログでは、これらの変換を設定して使用する方法の優れた例をいくつか紹介します。 <nuxt-img>。

なぜimgixを使うの？

最初は、なぜ Nuxt Image コンポーネントで imgix を使うべきなのか疑問に思われるかもしれません。Nuxt には、私の画像を最適化するためのオープンソースモジュールが既に含まれています。はい。Nuxt Image に含まれている IPX インスタンスは、ローカルでホストされているイメージの最適化に役立つ優れたモジュールです。代わりに imgix を使うべき理由はいくつかあります。

imgix はデベロッパーのイメージの 120 以上の API 変換を可能にします。
事前に画像を編集する必要はありません。imgixですべて編集できます。
オープンソースのイメージモジュールを使用すると、イメージはビルド中に処理されるため、Nuxt でのビルド時間も長くなります。
imgix はイメージ管理のニーズを簡素化することもできます。S3 や GCS バケットなど、画像が保存されている場所ならどこからでも接続でき、それらの画像を簡単に整理してアクセスできる UI や API を提供します。
imgix には、カスタム Fastly インスタンスによるグローバル CDN 配信が含まれています。
imgix には無料利用枠があるため、小規模なプロジェクトでも imgix のすべての機能にアクセスできます。無料利用枠!

これにより、インクルードIPXインスタンスで最初に提供されていたものよりも、Webサイトやプロジェクトが確実に強化されます。

imgix を使ってみよう

imgix のアカウントを既にお持ちの場合は、インストール手順セクションに進んでください。imgix アカウントが必要な場合は、サインアップしてください。無料アカウントはこちら。サインアップしたら、ソースを設定し、imgix ドメインを選択する必要があります。ソースを設定したら、現在ストレージにあるイメージを新しい imgix ドメインで提供することも、新しいイメージをアップロードすることもできます。より詳細な手順については、を参照してください。 imgix セットアップページ同様に。

インストール手順

Nuxt イメージコンポーネントを使用するには、作成済みの Nuxt プロジェクトにインストールする必要があります。インストール手順の完全版をご覧になりたい場合は、以下でご覧いただけます。 Nuxt のウェブサイト。この説明では、既に既存の Nuxt プロジェクトがあるか、最近作成した Nuxt プロジェクトが静的にホストされることを前提としています。まず、Nuxt Image コンポーネントをインストールする必要があります。

npm インストール-D @nuxt /image

次に、新しくインストールしたデベロッパーディペンデンシーを nuxt.config.js に追加する必要があります。

デフォルトをエクスポート { ターゲット：'静的'、ビルドモジュール:[ '@nuxt /image', ] }

次に、お使いのimgixドメインを使用してnuxt.config.js内のイメージセクションを設定する必要があります。

画像:{ imgix: { ベース URL: "https://assets.imgix.net」 } }、

を使用する `<nuxt-img>` タグ:imgix 付き

これで交換できます <img> タグ付き <nuxt-img> タグ。imgix を選択し、src タグにイメージパス名を追加すれば、さらにプロップを追加してイメージをさらに最適化できます。以下は Nuxt Image ドキュメンテーションにもある典型的な例です。

<nuxt-img プロバイダー=「imgix」 src=」/blog/woman-hat.jpg」幅=「300" 高さ=「500" フィット=「カバー」 :modifiers= "{auto: 'フォーマット、圧縮'、クロップ:'faces'}」 />

これにより、ブラウザに応じてフォーマットを最適化した300 x 500の画像が自動的に圧縮され、画像の表面までインテリジェントにトリミングされます。結果の URL は次のとおりです。https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces&auto=format,compress

Nuxt イメージを使ったレスポンシブデザインの作成

もっと複雑な例としては、sizes属性を使用してレスポンシブデザインを構築することが挙げられます。画像ギャラリーを列として設定し、レスポンシブデザインを使用してモバイルで全幅にする画像ギャラリーを作成したい場合は、実際にサイズ属性でこれを渡すと、Nuxt が各メディア幅に適したサイズの画像を生成します。このようなものを追加すると、画像タグにレスポンシブな srcset が生成されます。

<nuxt-img プロバイダー=「imgix」 src=」/blog/woman-hat.jpg」フィット=「クロップ」サイズ=「cm: 100VW MD:100VW LG: 50vw xl: 33VW」 :modifiers= "{auto: 'フォーマット、圧縮'、クロップ:'フェース、エッジ'、ar: '1:1'}」 />

ここで良いヒントがあります。私のSサイズとMサイズはどちらも100vwですが、両方を入力する必要があります。サイズオプションを追加すればするほど、結果の srcset で利用できるサイズオプションが増えます。また、imgix では、すべての画像のレンダリング回数が無制限なので、ウェブサイトに常に最適なサイズの画像を読み込めるように、サイズ変更オプションを多く含めない理由はありません。

最初の例と比べて、モディファイアに追加したアイテムがいくつか追加されていることにお気づきかもしれません。追加したのは バー:1:1 モディファイアに。これにより、すべての画像が正方形にトリミングされます。最初は、私がすべての画像をトリミングするのではないかと心配するかもしれません。実際、トリミングリクエストを次のように変更しました。 フェース、エッジ。そのため、画像が正方形ではなく、画像の一部を切り取ってしまった場合は、顔を切り抜かないようにします。顔がない場合は、画像内の目立つエッジにもピントが合います。

上記の nuxt-img で生成されたイメージタグの例を次に示します。

srcset に 4 つの異なるバージョンが生成され、それぞれサイズが異なることがわかります。これにより、ブラウザーはレンダリングされた画像の解像度に最も近い画像を選択できます。これにより、多くの画像オプションを読み込んで、レスポンシブなデザインを実現できます。

さらに、使っているので オート=フォーマット、imgix は視聴者のブラウザに基づいて最適な画像形式を自動的に選択します。

チュートリアル

このチュートリアルでは、Nuxt プロジェクトで簡単な画像ギャラリーを作成します。また、Tailwind CSS を使用し、このサイトを Vercel にデプロイする予定です。画像ギャラリーは、最大の画面サイズでは3列、小さいデスクトップサイズでは2列、モバイルサイズでは1列のフレックスデザインになります。画像には Nuxt Image コンポーネントが使用され、レスポンシブデザインが含まれます。チュートリアルを飛ばしてすぐにコードに戻りたい場合は、以下を参照してください。 Github。

まずは以下から始めてください Nuxt プロジェクトの開始そして、このブログの冒頭で説明したように、Nuxt イメージコンポーネントをインストールします。Nuxt プロジェクトを開始するときは、Tailwind CSS を選択することをおすすめします。私の例ではこのモジュールを css に使用することになるからです。

設定がすべて完了したら、pagesフォルダのindex.vueファイルに移動します。現在そこにあるものを消去し、div タグで最初からやり直してください。こんな感じです:

<template> <div> </div> </template>

ページの上部に見出しとテキスト用のセクションをいくつか追加できます。Tailwind CSS を使ってこれを追加した例を次に示します。

<template> <div> <h1 class="title-font sm:text-4xl text-3xl m-4 font-medium text-gray-900">Nuxt 画像コンポーネントの使用例</h1> <p class="m-4 leading-relaxed">Nuxt 画像コンポーネントの imgix を使用して画像を最適化します。</p> </div> </template>

次に、画像や画像を含むフレックスdivの追加に焦点を当てます nuxt-img タグ。

これで、ギャラリーに好きなだけ画像を flex div 内に追加できます。次のコード例では、次のコードだけに焦点を当てます <nuxt-img /> タグ。

<nuxt-img class=「フロートレフト P-2 M-オート W-フル LG: W-1/2 XL: W-1/3 2XL: W-1/3" プロバイダー=「imgix」 src= "」サイズ=「x: 98vw sm: 98vw md: 98vw md: 98vw lg: 49vw xl: 31vw 2xl: 31vw」フィット=「クロップ」 :modifiers= "{自動:'フォーマット、圧縮', ar: '1:1'}」 />

レスポンシブデザインに役立つサイズに関する情報を2か所に含めました。まず、クラスセクションで。繰り返しになりますが、これは Tailwind CSS の使用例であることを思い出させてください。これが初めての場合は、ぜひチェックしてみることをお勧めしますドキュメンテーション。XL および 2XL サイズの画面では、画像は CSS で画面サイズの 33% で表示されます。画面サイズが 1024 ピクセルから 1280 ピクセルの間では、画像は画面の 50% のサイズの CSS で表示されます。そうすると、幅が 1024px より小さい画面はすべて画面の 100% のサイズで表示されます。私もこれと同じ考え方を次の記事で再現しました サイズ 属性は、Nuxt イメージコンポーネントに、これらの各シナリオ用にサイズ変更されたバージョンを生成するように指示します。

これで、これらをいくつでも作成できます <nuxt-img> ギャラリーに必要なタグ。データや API から画像の URL を渡す場合は、v-for 属性も簡単に使用できます。これは Nuxt の最も強力な側面の 1 つだと思いますので、データセクションに 6 つのイメージ名を追加して v-for として渡します。また、imgix アカウントに含まれているイメージ管理ソリューションを使用して、使用したい適切なイメージを見つける絶好の機会でもあります。

私の画像リストでは、1から6までの便利な名前が付けられているので、私の画像に入れます 脚本 私のindex.vueのセクション：

<script> デフォルトをエクスポート { データ () { リターン { 画像:[ '/artsy/1.jpg?'、 '/artsy/2.jpg?'、 '/artsy/3.jpg?'、 '/artsy/4.jpg?'、 '/artsy/5.jpg?'、 '/artsy/6.jpg?' ] } } } </script>

これで、私のv-forを使ってこれらの画像にアクセスできるようになりました <nuxt-img>。そのために、タグを変更する方法は次のとおりです。

<nuxt-img class=「フロートレフト P-2 M-オート W-フル LG: W-1/2 XL: W-1/3 2XL: W-1/3" v-for= "(画像、インデックス) 画像内」 :キー=「インデックス」プロバイダー=「imgix」 :src=「イメージ」サイズ=「x: 98vw sm: 98vw md: 98vw md: 98vw lg: 49vw xl: 31vw 2xl: 31vw」フィット=「クロップ」 :modifiers= "{自動:'フォーマット、圧縮', ar: '1:1'}」 />

これにより、6枚の画像がループ処理され、ギャラリー内のそれぞれにレスポンシブなimgタグが作成されます。これは v-for を使用するというかなり単純なアイデアですが、大量の画像にどれだけ早く使用できるかがわかれば幸いです。

Nuxt プロジェクトのデプロイ

このプロジェクトをGithubデスクトップを使ってGithubにプッシュする予定です。プロジェクトを Github にプッシュしたら、デプロイできます。この例では、Vercel を使用します。Vercel で Vercel のビルドをスムーズに行うために 1 つ行うことは、vercel.json ファイルを作成し、ビルド・セクションを追加することです。私のものはこんな感じです。

「ビルド」: [ { 「src」:「nuxt.config.js」, 「使用」: "@nuxtjs /vercel-builder「, 「設定」: {} } ]

Vercelがうまく連携する上級アイテムでさらに一歩進みたいなら、セットアップでしょうクライアントヒントこれらの画像で。クライアントヒントは Chrome ブラウザーで画像の正確な幅と DPR を imgix に伝えるので、imgix は毎回最適なサイズを提供することができます。このソリューションはChromeブラウザでのみ動作しますが、このようなレスポンシブ設定と組み合わせて使うには素晴らしいアイテムです。ドキュメントを見ると、Chrome がサードパーティのオリジンへのクライアントヒントの送信をサポートしていないという警告が表示されることがあります。さて、Vercelは vercel.json ファイル内のルートと機能ポリシーを確認することでこの問題を解決し、サードパーティーオリジンではなくなりました。vercel.json ファイルに追加する内容は次のとおりです。

「ルート」: [ { 「src」:「/*」, 「ヘッダー」: { 「アクセプトCH」:「DPR、幅、ビューポート幅」、「機能ポリシー」:「ch-dpr https://assets.imgix.net 'self'; ch-width https://assets.imgix.net 'self'; ch-viewport-width https://assets.imgix.net 'self'」 } } ]

この例で使用している imgix ドメインの代わりに、お使いの imgix ドメインを入力します。最後に、Vercel for Github インテグレーションを使用しました。これにより、自分の Github アカウントのリポジトリからウェブサイトをすばやく起動できます。

完成したページへのリンクは次のとおりです。https://nuxt-image.vercel.app/

結論

これは、新しい Nuxt イメージコンポーネントで imgix を使用する方法の非常に簡単なチュートリアル例ですが、お役に立てば幸いです。これは、imgix の非常に強力な画像ソリューションにアクセスしながら、Nuxt 内で直接レスポンシブデザインを作成する非常に簡単な方法です。このチュートリアルのより高度なバージョンや、ヘッドレス CMS やその他の API のような他のデータソースの例をご覧になりたい場合は、ぜひご要望をお聞かせください。遠慮なく当社にご連絡ください。ツイッター。

imgix の詳細については、こちらをご覧くださいドキュメンテーションまたは無料で試してみる。