画像の最適化
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 は、画像ファイルの表示サイズ自体を決定するものではありません。Image Sizing について詳しく学びましょう。
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/**',
},
],
},
}
remotePatterns の設定について詳しく学びましょう。画像 src に相対URLを使用したい場合は、loaderを使用してください。
ドメイン
ときにはリモート画像の最適化をしたいかもしれませんが、それでも組み込みの Next.js Image Optimization API を利用したい場合があります。そ のためには、loader をデフォルト設定のままにし、Image src プロップに絶対 URL を入力します。
悪意のあるユーザーからあなたのアプリケーションを保護するために、next/image コンポーネントで使用する予定のリモートホスト名のリストを定義する必要があります。
remotePatterns設定について詳しく学びましょう。
ローダー
前述の例では、ローカル画像に対して部分的な URL ("/me.png") が提供されています。これはローダーアーキテクチャのおかげで可能です。
ローダーは、画像の URL を生成する関数です。提供された src を変更し、異なるサイズで画像をリクエストするために複数の URL を生成します。これらの複数の URL は、自動 srcset 生成で使用され、あなたのサイトの訪問者がそのビューポートに合ったサイズの画像を提供されるようにします。
デフォルトのローダーは、組み込みの Image Optimization API を使用して、ウェブ上のどこからでも画像を最適化し、次にそれらを Next.js ウェブサーバーから直接提供します。CDN や画像サーバーから画像を直接配信したい場合は、数行の JavaScript で独自のローダー関数を書くことができます。
loader プロップを使用して画像ごとにローダーを定義するか、loaderFile 設定を使用してアプリケーションレベルで定義できます。
優先度
各ページの Largest Contentful Paint (LCP) 要素 となる画像に priority プロパティを追加する必要があります。このプロパティを追加することで、Next.js は画像の読み込みを特別に優先し（例えばプリロードタグや優先ヒントを通じて）、LCP の大幅な改善をもたらします。
LCP 要素は通常、ページのビューポート内で表示される最大の画像またはテキストブロックです。next dev を実行すると、LCP 要素が priority プロパティなしの <Image> の場合、コンソールに警告が表示されます。
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つは、画像がページ上の他の要素を読み込むときに押し出すことによる レイアウトシフト です。このパフォーマンスの問題は、ユーザーにとって非常に煩わしいため、それ自体が 累積レイアウトシフト というコアウェブバイタルを持っています。画像によるレイアウトシフトを回避する方法は、常に画像のサイズを設定することです。これにより、ブラウザは画像がロードされる前に正確にスペースを確保できます。
next/image は良好なパフォーマンス結果を保証するように設計されているため、レイアウトシフトに寄与する方法では利用できず、次の3つの方法のいずれかでサイズを指定しなければなりません：
画像のサイズがわからない場合はどうすればよいですか？
サイズを知らないソースから画像にアクセスす る場合、次のようなことができます：
fillを使用する
fillプロップを使用すると、画像のサイズを親要素から指定できます。CSS を使用して画像の親要素にページ上のスペースを与え、任意のメディアクエリブレイクポイントを持つsizesプロップを持たせることを考慮してください。また、fill、contain、coverに対応したobject-fitおよびobject-positionを使用して、画像がそのスペースをどのように占めるかを定義できます。画像を正規化する
管理するソースから画像を配信している場合、画像を特定のサイズに正規化するように画像パイプラインを変更することを検討してください。
APIコールを変更する
アプリケーションが API コールを使用して画像 URL を取得している場合（たとえば、CMS にアクセスする場合）、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="山々"
// インポートした画像は幅と高さが自動的に設定されます
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 Component Demo を参照してください。
その他のプロパティ
next/image コンポーネントで利用可能な全プロパティを確認する。
設定
next/image コンポーネントおよび Next.js Image Optimization API は、next.config.js ファイルで設定できます。これらの設定により、リモート画像の有効化、カスタム画像のブレークポイントの定義、キャッシュ動作の変更などが可能になります。