画像最適化
Web Almanacによると、画像は一般的なウェブサイトのページ重量の大部分を占め、サイトのLCPパフォーマンスに大きな影響を与える可能性があります。
Next.jsのImageコンポーネントは、自動画像最適化の機能でHTMLの<img>要素を拡張します：
- サイズ最適化: WebPやAVIFなどの最新画像フォーマットを使用して、各デバイスに適切なサイズの画像を自動的に提供
- 視覚的安定性: 画像の読み込み時にレイアウトシフトを自動的に防止
- ページ読み込みの高速化: 画像はビューポートに入ったときにのみ読み込まれ、オプションのブラーアッププレースホルダーを利用可能
- アセットの柔軟性: リモートサーバーに保存された画像でもオンデマンドでリサイズ可能
🎥 動画:
next/imageの使用方法について詳しく学ぶ → YouTube (9分).
使用方法
import Image from 'next/image'その後、画像のsrc（ローカルまたはリモート）を定義できます。
ローカル画像
ローカル画像を使用するには、.jpg、.png、.webp画像ファイルをimportします。
Next.jsはインポートされたファイルに基づいて、自動的に画像のwidthとheightを決定します。これらの値は、画像の読み込み中に累積レイアウトシフトを防ぐために使用されます。
import Image from 'next/image'
import profilePic from './me.png'
export default function Page() {
return (
<Image
src={profilePic}
alt="著者の写真"
// width={500} 自動的に提供
// height={500} 自動的に提供
// blurDataURL="data:..." 自動的に提供
// placeholder="blur" // 読み込み中のブラーアップ（オプション）
/>
)
}警告: 動的な
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="著者の写真"
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画像最適化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設定でアプリケーションレベルで定義できます。
優先度
各ページのLargest Contentful Paint (LCP)要素となる画像にpriorityプロパティを追加する必要があります。これにより、Next.jsは画像の読み込みを特別に優先し（例：プリロードタグや優先度ヒントを通じて）、LCPの大幅な向上につながります。
LCP要素は通常、ページのビューポート内で表示される最大の画像またはテキストブロックです。next devを実行すると、priorityプロパティのない<Image>がLCP要素である場合、コンソール警告が表示されます。
LCP画像を特定したら、次のようにプロパティを追加します：
import Image from 'next/image'
import profilePic from '../public/me.png'
export default function Page() {
return <Image src={profilePic} alt="著者の写真" priority />
}優先度についての詳細は、next/imageコンポーネントドキュメントをご覧ください。
画像サイズ設定
画像がパフォーマンスに悪影響を与える一般的な方法の1つは、読み込み中に画像がページ上の他の要素を押しのける_レイアウトシフト_です。このパフォーマンス問題はユーザーにとって非常に煩わしいため、Cumulative Layout Shiftという独自のCore Web Vitalがあります。画像ベースのレイアウトシフトを回避する方法は、常に画像のサイズを設定することです。これにより、ブラウザは画像が読み込まれる前に正確に十分なスペースを確保できます。
next/imageは優れたパフォーマンス結果を保証するように設計されているため、レイアウトシフトに寄与する方法で使用することはできず、次の3つの方法のいずれかでサイズを設定する必要があります：
画像のサイズがわからない場合はどうすればよいですか？
画像のサイズがわからないソースから画像にアクセスする場合、いくつかの方法があります：
fillを使用する
fillプロパティを使用すると、親要素によって画像のサイズが決まります。親要素にページ上のスペースを与えるためにCSSを使用し、メディアクエリのブレークポイントに合わせてsizesプロパティを使用することを検討してください。fill、contain、coverとobject-fit、およびobject-positionを使用して、画像がそのスペースをどのように占有するかを定義することもできます。画像を正規化する
制御可能なソースから画像を提供している場合は、画像パイプラインを変更して特定のサイズに正規化することを検討してください。
API呼び出しを変更する
アプリケーションがAPI呼び出し（CMSへの呼び出しなど）を使用して画像URLを取得している場合、URLと一緒に画像の寸法を返すようにAPI呼び出しを変更できる場合があります。
提案された方法のいずれも画像のサイズ設定に適していない場合、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="山"
// 画像をインポートすると
// 自動的に幅と高さが設定されます
src={mountains}
sizes="100vw"
// 画像を全幅で表示
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="山"
src={mountains}
fill
sizes="(min-width: 808px) 50vw, 100vw"
style={{
objectFit: 'cover', // cover, contain, none
}}
/>
</div>
{/* グリッド内の他の画像... */}
</div>
)
}背景画像
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Background() {
return (
<Image
alt="山"
src={mountains}
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{
objectFit: 'cover',
}}
/>
)
}さまざまなスタイルで使用されたImageコンポーネントの例については、Imageコンポーネントデモをご覧ください。
その他のプロパティ
next/imageコンポーネントで利用可能なすべてのプロパティを表示します。
設定
next/imageコンポーネントとNext.js画像最適化APIは、next.config.jsファイルで設定できます。これらの設定により、リモート画像の有効化、カスタム画像ブレークポイントの定義、キャッシュ動作の変更などが可能になります。