画像の最適化
Web Almanacによると、画像は典型的なウェブサイトのページ重量のかなりの部分を占めており、ウェブサイトのLCPパフォーマンスに大きな影響を与える可能性があります。
Next.jsのImageコンポーネントは、自動画像最適化機能を備えたHTMLの<img>要素を拡張します。
- サイズ最適化: WebPやAVIFなどの最新の画像形式を使用して、各デバイスに適切なサイズの画像を自動的に配信します。
- 視覚的な安定性: 画像の読み込み時に、レイアウトシフトを自動的に防止します。
- ページ読み込みの高速化: ネイティブブラウザの遅延読み込みを使用して、画像がビューポートに入ってきたときのみ画像が読み込まれ、オプションでぼかしプレースホルダーを使用できます。
- アセットの柔軟性: リモートサーバーに保存されている画像でも、オンデマンドで画像サイズを変更できます。
🎥動画:
next/imageの使用方法の詳細については、→ YouTube (9分)をご覧ください。
使用方法
import Image from 'next/image'次に、画像のsrc（ローカルまたはリモートのいずれか）を定義できます。
ローカル画像
ローカル画像を使用するには、.jpg、.png、または.webp画像ファイルをインポートします。
Next.jsは、インポートされたファイルに基づいて、画像の固有のwidthとheightを自動的に決定します。これらの値は、画像の比率を決定し、画像の読み込み中に累積レイアウトシフトを防止するために使用されます。
import Image from 'next/image'
import profilePic from '../public/me.png'
export default function Page() {
return (
<Image
src={profilePic}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
)
}警告: 動的な
await import()またはrequire()はサポートされていません。importは静的である必要があり、ビルド時に解析できるようにする必要があります。
next.config.jsファイルでlocalPatternsを構成して、特定の画像を許可し、他のすべての画像をブロックすることもできます。
module.exports = {
images: {
localPatterns: [
{
pathname: '/assets/images/**',
search: '',
},
],
},
}リモート画像
リモート画像を使用するには、srcプロパティをURL文字列にする必要があります。
Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、width、height、およびオプションのblurDataURLプロパティを手動で指定する必要があります。
width 属性と height 属性は、画像の正しいアスペクト比を推測し、画像の読み込みによるレイアウトシフトを防ぐために使用されます。width と height は、画像ファイルのレンダリングサイズを決定するものではありません。画像サイズ設定の詳細については、こちらをご覧ください。
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://s3.amazonaws.com/my-bucket/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}画像の最適化を安全に許可するには、next.config.jsでサポートされるURLパターンのリストを定義します。悪意のある使用を防ぐために、できるだけ具体的に記述してください。たとえば、次の設定では、特定のAWS S3バケットからの画像のみが許可されます。
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
port: '',
pathname: '/my-bucket/**',
},
],
},
}remotePatterns設定の詳細については、こちらをご覧ください。画像のsrcに相対URLを使用する場合は、loaderを使用します。
ドメイン
リモート画像を最適化したいが、Next.js組み込みの画像最適化APIを使用したい場合もあります。その場合は、loaderをデフォルト設定のままにして、Image srcプロパティに絶対URLを入力します。
悪意のあるユーザーからアプリケーションを保護するには、next/imageコンポーネントで使用することを意図するリモートホスト名のリストを定義する必要があります。
remotePatterns設定の詳細については、こちらをご覧ください。
ローダー
前の例では、ローカル画像に部分的なURL（"/me.png"）が指定されていることに注意してください。これは、ローダーアーキテクチャによって実現可能です。
ローダーは、画像のURLを生成する関数です。指定されたsrcを変更し、さまざまなサイズで画像を要求するための複数のURLを生成します。これらの複数のURLは、自動的なsrcset生成に使用され、サイトの訪問者にはビューポートに適したサイズの画像が提供されます。
Next.jsアプリケーションのデフォルトローダーは、Web上の任意の場所からの画像を最適化し、Next.js Webサーバーから直接提供する組み込みの画像最適化APIを使用します。CDNまたは画像サーバーから直接画像を提供する場合は、数行のJavaScriptで独自のローダー関数を記述できます。
loaderプロパティを使用して画像ごとにローダーを定義するか、loaderFile設定を使用してアプリケーションレベルで定義できます。
優先順位
各ページのLargest Contentful Paint (LCP) 要素となる画像にpriorityプロパティを追加する必要があります。これにより、Next.jsは画像の読み込みを優先的に処理できるようになり（プリロードタグや優先順位ヒントなど）、LCPの顕著な向上につながります。
LCP要素は通常、ページのビューポート内で表示される最大の画像またはテキストブロックです。next devを実行すると、LCP要素が<Image>でpriorityプロパティがない場合、コンソールに警告が表示されます。
LCP画像を特定したら、次のようにプロパティを追加できます。
import Image from 'next/image'
export default function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
priority
/>
<p>Welcome to my homepage!</p>
</>
)
}next/imageコンポーネントのドキュメントで、優先順位の詳細を参照してください。
画像サイズ設定
画像がパフォーマンスを低下させる最も一般的な方法の1つは、レイアウトシフトです。これは、画像が読み込まれる際にページ上の他の要素を押し上げる現象です。このパフォーマンス問題はユーザーにとって非常に迷惑なため、累積レイアウトシフトという独自のCore Web Vitalがあります。画像ベースのレイアウトシフトを回避する方法は、常に画像のサイズを指定することです。これにより、ブラウザは画像の読み込み前に、正確に十分なスペースを確保できます。
next/imageは優れたパフォーマンス結果を保証するように設計されているため、レイアウトシフトに寄与するような方法で使用することはできず、必ず次の3つの方法のいずれかでサイズを指定する必要があります。
- 静的インポートを使用して自動的に
- 画像のアスペクト比を決定するために使用される
widthとheightプロパティを含めることによって手動で - 親要素に合わせて画像が拡大されるfillを使用することによって暗黙的に
画像のサイズがわからない場合はどうすればよいですか？
画像のサイズがわからないソースから画像にアクセスする場合、いくつかの方法があります。
fillを使用する
fillプロパティを使用すると、画像のサイズが親要素によって決定されます。CSSを使用して画像の親要素にページ上のスペースを与え、sizesプロパティを使用してメディアクエリブレークポイントに合わせることを検討してください。object-fitをfill、contain、またはcoverと共に使用し、object-positionを使用して、画像がそのスペースをどのように占めるかを定義することもできます。画像を正規化する
制御するソースから画像を提供している場合は、画像パイプラインを変更して画像を特定のサイズに正規化することを検討してください。
API呼び出しを変更する
アプリケーションがAPI呼び出し（CMSなど）を使用して画像URLを取得している場合は、API呼び出しを変更して、URLと共に画像の寸法を返すようにすることができます。
提案された方法のどれも画像のサイズ設定に機能しない場合、next/imageコンポーネントは標準の<img>要素と共にページで正常に動作するように設計されています。
スタイル設定
Imageコンポーネントのスタイル設定は、通常の<img>要素のスタイル設定に似ていますが、考慮すべきガイドラインがいくつかあります。
styled-jsxではなく、classNameまたはstyleを使用します。- ほとんどの場合、
classNameプロパティの使用をお勧めします。これは、インポートされたCSSモジュール、グローバルスタイルシートなどにすることができます。 styleプロパティを使用してインラインスタイルを割り当てることもできます。- styled-jsxは、現在のコンポーネントにスコープされているため使用できません（スタイルを
globalとしてマークしない限り）。
- ほとんどの場合、
fillを使用する場合は、親要素にposition: relativeを指定する必要があります。- これは、そのレイアウトモードでの画像要素の適切なレンダリングに必要なものです。
fillを使用する場合は、親要素にdisplay: blockを指定する必要があります。- これは
<div>要素のデフォルトですが、それ以外の場合は指定する必要があります。
- これは
例
レスポンシブ
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Responsive() {
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Image
alt="Mountains"
// Importing an image will
// automatically set the width and height
src={mountains}
sizes="100vw"
// Make the image display full width
style={{
width: '100%',
height: 'auto',
}}
/>
</div>
)
}コンテナを埋める
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Fill() {
return (
<div
style={{
display: 'grid',
gridGap: '8px',
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
}}
>
<div style={{ position: 'relative', height: '400px' }}>
<Image
alt="Mountains"
src={mountains}
fill
sizes="(min-width: 808px) 50vw, 100vw"
style={{
objectFit: 'cover', // cover, contain, none
}}
/>
</div>
{/* And more images in the grid... */}
</div>
)
}背景画像
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Background() {
return (
<Image
alt="Mountains"
src={mountains}
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{
objectFit: 'cover',
}}
/>
)
}様々なスタイルで使用されるImageコンポーネントの例については、Imageコンポーネントデモをご覧ください。
その他のプロパティ
next/imageコンポーネントで使用可能なすべてプロパティを表示します。
設定
next/imageコンポーネントとNext.js画像最適化APIは、next.config.jsファイルで設定できます。これらの設定により、リモート画像を有効化したり、カスタム画像ブレイクポイントを定義したり、キャッシュ動作を変更したりすることができます。
役に立ちましたか？