Lang x Lang

︙

Image Optimization

Examples

Web Almanac によると、画像は一般的なウェブサイトの page weight の大部分を占め、あなたのウェブサイトの LCP performance に大きな影響を与える可能性があります。

Next.js Image component は、HTML の<img>要素を自動的な image optimization 機能で拡張します：

  • Size 最適化: モダンな image formats である WebP や AVIF を使用して、各デバイスに適したサイズの画像を自動的に提供します。
  • ビジュアル安定性: 画像が loading されているときに自動的に layout shift を防ぎます。
  • ページの読み込みが速くなる: Images は、ネイティブブラウザの lazy loading を使用して、 viewport に入るときだけ読み込まれます。必要に応じて、ブラーアップのプレースホルダーが使用できます。
  • アセットの柔軟性: リモートサーバーに保存されている画像であっても、オンデマンドで image のリサイズが可能

🎥 視聴： next/imageの使い方について詳しく学びます → YouTube (9 分) 。

Usage

import Image from "next/image";

その後、image(ローケルまたはリモートのどちらか)の src を定義することができます。

ローカル画像

ローカルの image を使用するには、あなたの.jpg、.png、または.webpの image ファイルを import してください。

Next.js はインポートされたファイルに基づいて、あなたの image のwidthとheightを自動的に決定します。これらの値は、あなたの image が loading されている間、累積的な Layout シフト を防ぐために使用されます。

pages/index.js
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
    />
  )
}

警告： Dynamic await import() または require() はサポートされていません。import は静的でなければならず、それによって build 時に分析が可能になります。

リモートイメージ

リモートの image を使用するには、src プロパティは URL string であるべきです。

Next.js が build プロセス中にリモートファイルにアクセスできないため、width、height、およびオプションのblurDataURL という props を手動で提供する必要があります。

widthとheightの属性は、Image の正しいアスペクト比を推定し、layout のシフトを image loading から避けるために使用されます。widthとheightは image ファイルの出力される size を決定しません。image のサイズ設定について詳しく学習します。

app/page.js
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 バケットからの画像のみを許可します:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

remotePatterns 設定についてもっと学びましょう。もし image の src に相対 URL を使用したい場合は、loader を使用してください。

Domains

時にはリモートの Image を最適化したいけれども、組み込みの Next.js Image Optimization API を使用したい場合があるかもしれません。これを行うには、loaderをその default 設定のままにし、image のsrcプロパティに絶対 URL を入力します。

あなたのアプリケーションを悪意のあるユーザーから保護するために、next/image component と共に使用する予定のリモートホスト名のリストを定義する必要があります。

remotePatterns 設定について詳しく学びましょう。

Loaders

以前の例で注意すべき点は、一部の URL ("/me.png") がローカルの image に対して提供されていたことです。これは loader アーキテクチャのおかげで可能になっています。

loader は、あなたの image のための URL を生成する機能です。それは提供された src を変更し、異なる sizes で image を request するための複数の URL を生成します。これらの複数の URL は、自動的な srcset の生成に使用され、その結果、あなたのサイトを訪れる訪問者には、彼らの viewport に適した size の image が提供されます。

Next.js アプリケーションの default loader は、ビルトインの Image Optimization API を使用し、ウェブ上の任意の場所から画像を最適化し、 Next.js のウェブ server から直接提供します。もし、CDN や image server から直接画像を提供したい場合は、 JavaScript の数行で独自の loader 関数を書くことができます。

loader prop を使って、画像ごとに loader を定義できます。または、loaderFile configuration を使ってアプリケーションレベルで定義することも可能です。

Priority

各ページの Largest Contentful Paint (LCP) element となる image にpriorityプロパティを追加するべきです。これにより、 Next.js は loading (例えば preload タグや priority ヒントを通じて)のための image を特別に優先することができ、LCP の意義深い向上をもたらします。

LCP 要素は通常、ページの viewport 内で見える最大の image またはテキストブロックです。next devを実行すると、LCP 要素がpriorityプロパティを持たない<Image>である場合、コンソール警告が表示されます。

一度 LCP image を特定したら、次のようにプロパティを追加できます：

app/page.js
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 component ドキュメンテーションで priority についてさらに詳しく見てみてください。

Image Sizing

画像がパフォーマンスを最もよく損なう方法の一つは、Layout shiftで、image が読み込まれるときにページ上の他の要素を押しのけます。このパフォーマンス問題は、ユーザーにとって非常に迷惑なので、それ自体が Core Web Vital と呼ばれるものを持っており、その名前は Cumulative layout Shift です。画像ベースの layout シフトを避ける方法は、常に size を画像に設定する ことです。これにより、ブラウザは image が読み込まれる前に、正確に十分なスペースを予約することが可能になります。

next/imageは優れたパフォーマンス結果を保証するように設計されているため、layout シフトに寄与する方法で使用することはできず、以下の 3 つの方法のいずれかでサイズ設定する必要があります:

  1. 自動的に、static import を使って
  2. 具体的には、width と height プロパティを含めることで
  3. 暗黙的に、親要素に対してその image''が拡大する原因となる fill を使用することで。

画像の size がわからない場合はどうすればよいですか？

あなたが source から sizes の知識なしに画像にアクセスしている場合、いくつか行うことができることがあります：

fillを使用する

fill プロパティーは、親要素によって image のサイズが決定されるようにします。 CSS を使用して、画像の親要素がページ上のスペースを占めるようにし、sizes プロパティを用いて任意のメディア query のブレークポイントに一致させることを検討してみてください。また、object-fit をfill、contain、またはcoverと共に使うことで、 image がそのスペースをどのように占めるべきかを定義することもできます。もし object-position も併用すれば、その場所の指定も可能です。

あなたの画像を正規化してください

あなたが制御する source から画像を提供している場合、あなたの image パイプラインを変更して、画像を特定の size に正規化することを検討してみてください。

あなたの API コールを変更する

あなたのアプリケーションが API コール(CMS など)を使用して image の URL を取得している場合、その API コールを修正して image の寸法とともに URL を返すことができるかもしれません。

提案された方法のいずれも画像のサイズ変更に効果的でない場合、next/image component は、標準の<img>要素と一緒にページ上で適切に動作するよう設計されています。

Styling

Image component のスタイリングは通常の<img>要素のスタイリングと似ていますが、頭に入れておくべきいくつかのガイドラインがあります：

  • className または styleを使用し、styled-jsxは使用しないでください。
    • ほとんどの場合、classNameプロップの使用をお勧めします。これは、インポートされた CSS Module、global stylesheet などです。
  • また、styleプロパティを使用してインラインの styles を割り当てることもできます。
    • 現在の component(あなたが style をglobalとマークしない限り)にスコープされているため、styled-jsx を使用することはできません。
  • fillを使用する場合、親要素にはposition: relativeが必要です。
    • これは、その layout モードでの image 要素の適切なレンダリングに必要です。
  • fillを使用する場合、親要素にはdisplay: blockが必要です。
    • これは<div>要素のための default ですが、それ以外の場合は明示的に指定すべきです。

Examples

Responsive

Responsive image filling the width and height of its parent container 
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>
  );
}

Container を埋めてください

Grid of images filling parent container width 
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>
  );
}

背景 Image

Background image taking full width and height of page 
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",
      }}
    />
  );
}

さまざまな styles で使用される Image Component の例については、Image component デモ を参照してください。

Other Properties

next/image component が利用可能なすべてのプロパティを表示します。

Configuration

next/imagecomponent と Next.js Image Optimization API は、 next.config.js ファイルで設定することができます。これらの設定により、リモート画像を有効にする、カスタム image ブレークポイントを定義する、キャッシュ動作を変更する等が可能となります。

詳しくは image 設定ドキュメンテーションをご覧ください。

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use