srcset と sizes の書き方 — 表示幅に合った画像を配る
同じ画像でも、スマートフォンで300pxほどに表示するのと、パソコンで1200pxに表示するのとでは必要な画素数がまったく違います。Responsive Image Generator は1枚の画像から幅ごとの画像を作り、ブラウザが画面に合ったものを選べるように srcset と sizes を書いた img タグを出力します。
大きすぎる画像はどれだけ無駄か
幅300pxで表示する場所に幅1200pxの画像を配ると、幅は4倍でも画素の数は縦横それぞれ4倍で16倍になります。ファイルの大きさもおおむね画素数に比例して増えるので、表示には使われない分のデータを読み込ませていることになります。ただし高解像度の画面では、300pxの表示に600pxの画像を使うと鮮明に見えます。どの幅を使うかを決めるのは画面の幅と解像度で、それを知っているのはブラウザです。だから複数の幅を用意して、選択をブラウザに任せます。
srcset と sizes の役割
srcset には用意した画像と、その画像の実際の幅を「image-768.webp 768w」の形で並べます。sizes には、画面の幅ごとにその画像が何pxで表示されるかを書きます。たとえば「(max-width: 768px) 100vw, 768px」は、画面幅768px以下では画面いっぱい、それより広い画面では768pxで表示する、という意味です。ブラウザはこの2つと画面の解像度から、ちょうどよい1枚を選んで読み込みます。sizes を書かないと画面いっぱいに表示されるものとして扱われ、必要以上に大きな画像が選ばれることがあります。
width と height で CLS を防ぐ
画像に width と height を書いておくと、ブラウザは画像を読み込む前に縦横比を知り、その分の場所を先に確保できます。書いていないと、画像が届いた瞬間に下の文章が押し下げられ、Core Web Vitals の CLS（レイアウトのずれ）が悪化します。CSS で width: 100%; height: auto; と指定していても、HTMLに書いた width と height の比率から高さが計算されるので、レスポンシブな表示と両立できます。このツールは作った画像の実際の縦横の大きさを書き込みます。
ファーストビューの画像だけは遅延読み込みしない
loading="lazy" を付けると、画面に近づくまで画像を読み込まないので、スクロールしないと見えない画像の転送を後回しにできます。しかしページを開いてすぐ見える大きな画像に付けると、読み込みの開始が遅れ、LCP（最大のコンテンツが表示されるまでの時間）が悪化します。ファーストビューの画像には loading="lazy" を付けず、fetchpriority="high" で優先して読み込むよう伝えます。このツールでは「ファーストビューの画像」に印を付けると、出力がそのように切り替わります。