レスポンシブ画像と picture 要素を作る

よくある質問

source の順番はなぜ大事なのですか。

ブラウザは読める最初の source を採るので、AVIF は WebP より前に、素の img は最後に置かなければなりません。順番を誤ると、訪問者全員が提供した中でいちばん大きなファイルを受け取ります。手で書くと退屈で、気づかないうちに間違えやすいのがまさにこの部分です。

2 つの幅はそれぞれ何のためですか。

1280 はノートパソコンと多くのタブレット、360 はスマートフォンのためで、通信量が本当に効くのはスマートフォンです。srcset が選択をブラウザに委ねるので、回線の遅いスマートフォンがデスクトップ用のファイルを落とすことはありません。

ビルドの仕組みや CDN が必要ですか。

要りません。ふつうのファイルなので、HTML の隣に置けばマークアップは動きます。のちに本物の画像 CDN をサイトの前に置けば、これらは不要になりますが、手書きのページに数枚の画像を置くだけなら、これで作業は全部です。

代替テキストには何を書けばよいですか。

その画像が何を示しているかを、見えない人に語るように書いてください。まとめて処理するときは画像ごとに欄があります。10 枚の写真に 1 つの説明を共有させても、誰の助けにもならないからです。純粋に飾りの画像のときだけ、空にしてください。