Next.jsのImage Optimizasionsのあれこれ

公式のドキュメントからImage Componentが何を出来るのか調べたメモ。

Next.js includes many image optimizations

• Next.jsのImage Componentは画像を表示させるための最適化をおこなっている

  • 最適化: いろいろな工夫くらいの認識

• Image Componentは<img/>を拡張しており、パフォーマンス(ここでは画像の読み込みなど.)の改善を

Image Componentが行う最適化

• Improved Performance: 各デバイスに対応した画像サイズの提供
• Visual Stability: 可視的な安定性(ここまだわかってないから詳しく調べる)
• Faster Page Loads: viewportに入った時だけ画像が読み込まれ、それまではblur-upプレイスホルダーが表示される
• Asset Flexibility:: オンデマンドで画像をリサイズすることが可能

オンデマンド

1. ローカルの画像(Local image)

ローカルの画像を利用する際はimport文を使用して、拡張子.jpg,.png,.webpを利用する。
import文(画像ファイルをインポートする)を利用することで、Next.jsは画像のwidth、heightを自動的に決めてくれる。

import hogePic from '../public/hoge.png'

注意

• Dynamic await import() と require() はサポートしていない

2. リモートの画像(Remote images)

注意

• ビルド時にリモートのファイルにアクセスすることがない
  • そのため、width, height とoptionalでblurDataURLの指定が必要

3.ドメイン(Domains)

これよくわからなかった
https://nextjs.org/docs/basic-features/image-optimization#domains

4.ローダー(Loaders)

myLoaderで複数のURLを作成して、生成したURLはsrcsetの自動生成に利用される

公式のコードを引用

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
// qualityはdefaultで75
 return `https://hoge.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
 return (
   <Image
     loader={myLoader}
     src="myhoge.png"
     alt=""
     width={500}
     height={500}
   />
 )
}

CDNや画像用のサーバーから画像を取得する場合→ Build in Loaderを利用する(自前でmyloaderのように書かないようにするため)

srcsetについて(Qiita記事)

srcset : 画像URLを複数保持しておいて、デバイスの幅に応じて最適化された画像を表示させる
「ピクセル数足りてるかな」と考えるプロセス

5.優先順位(Priority)

priorityをtrueにすることでdefaultのlazy loadを無効にすることができる。
LCP(Largest Contentful Paint)を向上させることができる

When true, the image will be considered high priority and preload. Lazy loading is automatically disabled for images using priority.
参考

参考