画像最適化
Web Almanacによると、画像は一般的なウェブサイトのページウェイトの大部分を占め、ウェブサイトのLCPパフォーマンスに大きな影響を与える可能性があります。
Next.js Imageコンポーネントは、自動画像最適化機能でHTMLの<img>要素を拡張します。
- サイズ最適化： WebPなどの最新の画像形式を使用して、各デバイスに適切なサイズの画像を自動的に提供します。
- 視覚的安定性： 画像の読み込み時にレイアウトシフトを自動的に防ぎます。
- 高速なページロード： ネイティブブラウザの遅延読み込みとオプションのぼかしプレースホルダーを使用して、画像がビューポートに入ったときにのみロードされます。
- アセットの柔軟性： リモートサーバーに保存されている画像でも、オンデマンドで画像サイズを変更できます。
🎥 視聴：
next/imageの使用方法について詳しくはこちら→ YouTube (9分)。
使用法
import Image from 'next/image'次に、画像のsrcを（ローカルまたはリモートで）定義できます。
ローカル画像
ローカル画像を使用するには、.jpg、.png、または.webp画像ファイルをimportします。
Next.jsは、インポートされたファイルに基づいて画像の固有のwidthとheightを自動的に決定します。これらの値は、画像の比率を決定し、画像読み込み中のCumulative Layout Shiftを防ぐために使用されます。
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/**',
search: '',
},
],
},
}remotePatternsの設定について詳しくはこちら。画像のsrcに相対URLを使用したい場合は、loaderを使用してください。
ドメイン
リモート画像を最適化したい場合でも、組み込みのNext.js Image最適化APIを使用したい場合があります。これを行うには、loaderをデフォルト設定のままにし、Imageのsrcプロパティに絶対URLを入力します。
悪意のあるユーザーからアプリケーションを保護するために、next/imageコンポーネントで使用するリモートホスト名のリストを定義する必要があります。
remotePatternsの設定について詳しくはこちら。
ローダー
前の例では、ローカル画像に部分的なURL（"/me.png"）が提供されていることに注意してください。これはローダーアーキテクチャによるものです。
ローダーは、画像のURLを生成する関数です。提供されたsrcを修正し、さまざまなサイズの画像を要求するための複数のURLを生成します。これらの複数のURLは、自動的なsrcset生成で使用され、サイト訪問者はビューポートに合った適切なサイズの画像を受け取ることができます。
Next.jsアプリケーションのデフォルトローダーは、組み込みの画像最適化APIを使用します。このAPIは、ウェブ上のあらゆる場所から画像を最適化し、Next.jsウェブサーバーから直接提供します。CDNまたは画像サーバーから画像を直接提供したい場合は、数行のJavaScriptで独自のローダー関数を記述できます。
ローダーは、loaderプロパティで画像ごとに定義することも、loaderFile設定でアプリケーションレベルで定義することもできます。
優先度
各ページの最大コンテンツフルペイント (LCP) 要素となる画像にpriorityプロパティを追加する必要があります。これにより、Next.jsが画像をプリロードすることができ、LCPの大幅な向上が期待できます。
LCP要素は通常、ページのビューポート内で最も大きい画像またはテキストブロックです。next devを実行すると、LCP要素がpriorityプロパティのない<Image>である場合、コンソールに警告が表示されます。
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としてCumulative Layout Shiftと呼ばれています。画像に基づくレイアウトシフトを回避する方法は、常に画像のサイズを指定することです。これにより、ブラウザは画像が読み込まれる前に、画像のために正確に十分なスペースを予約できます。
next/imageは優れたパフォーマンス結果を保証するように設計されているため、レイアウトシフトを引き起こすような方法で使用することはできず、以下の3つのいずれかの方法でサイズを指定する必要があります。
- 静的インポートを使用して自動的に
- 手動で、画像の縦横比を決定するために使用される
widthおよびheightプロパティを含めることで - fillを使用することで暗黙的に。これにより、画像は親要素いっぱいに広がるようになります。
画像のサイズがわからない場合はどうすればよいですか？
画像のサイズが不明なソースから画像にアクセスしている場合、いくつかの対処法があります。
fillを使用する
fillプロパティを使用すると、画像は親要素によってサイズが決定されます。sizesプロパティを使用して、メディアクエリのブレークポイントに合わせて画像の親要素にページ上のスペースを与えるためにCSSを使用することを検討してください。また、fill、contain、またはcoverと一緒にobject-fitとobject-positionを使用して、画像がそのスペースをどのように占めるかを定義することもできます。画像を正規化する
制御できるソースから画像を提供している場合は、画像パイプラインを修正して、画像を特定のサイズに正規化することを検討してください。
API呼び出しを修正する
アプリケーションがAPI呼び出し（CMSなど）を使用して画像URLを取得している場合、API呼び出しを修正して、URLとともに画像寸法を返すことができるかもしれません。
推奨された方法のいずれも画像のサイズ調整に機能しない場合でも、next/imageコンポーネントは標準の<img>要素とともにページでうまく機能するように設計されています。
スタイル設定
Imageコンポーネントのスタイル設定は通常の<img>要素のスタイル設定と似ていますが、いくつかのガイドラインに留意する必要があります。
classNameまたはstyleを使用し、styled-jsxは使用しないでください。- ほとんどの場合、
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 Component Demoをご覧ください。
その他のプロパティ
next/imageコンポーネントで利用可能なすべてのプロパティをご覧ください。
設定
next/imageコンポーネントとNext.js Image最適化APIは、next.config.jsファイルで設定できます。これらの設定により、リモート画像を有効にしたり、カスタム画像ブレークポイントを定義したり、キャッシュの動作を変更したりすることができます。
これは役立ちましたか？