srcsetとは？HTML共有・AI生成サイトでの意味をやさしく解説

ひとことで言うと

`srcset`とは`<img>`タグの属性で、複数の画像ファイルとその幅（Wディスクリプタ）またはデバイスピクセル比（Xディスクリプタ）を列挙し、ブラウザが最適なものを自動選択できるようにする機能だ。例えば`srcset="img-400.webp 400w, img-800.webp 800w"`と書けば、ブラウザは表示サイズとデバイスのdprを考慮して適切なファイルを選ぶ。

srcsetを正しく設定することで、スマホユーザーは軽いファイルだけをダウンロードし、Retinaディスプレイのユーザーには高解像度画像が自動で表示される。HTML配信において最も費用対効果の高い画像最適化手法の一つだ。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

AI生成のHTMLをzipで共有する際にsrcsetが設定されているかを確認することが重要だ。設定されていない場合、スマホでレビューする担当者に2MB以上の画像が複数届くことになる。共有前に`grep -r 'srcset' ./dist/`でチェックし、srcsetがなければ画像を複数サイズで出力してsrcsetを追記する。

ギガサイト便でフォルダをアップロードする際、srcsetで参照される各画像ファイルがすべてフォルダ内に存在しているかを確認する必要がある。パスが相対参照なら通常問題ないが、`/images/hero-800.webp`のような絶対パスだと配信ドメインによってはファイルが見つからない場合がある。

よくある誤解

「srcsetを設定すれば必ずそのサイズの画像が使われる」という誤解がある。srcsetはヒントであり、ブラウザが最適と判断したものを選ぶ。キャッシュに大きいサイズが既に存在する場合はそちらを使い続けることもある。`sizes`属性も合わせて設定することで、ブラウザへの判断ヒントがより正確になる。

「srcsetはPicture要素と同じ」という混同もある。srcsetは同じ内容の画像を解像度別に提供するもので、Picture要素は形式（WebP/AVIF/JPEG）の切り替えや、アートディレクション（スマホでは縦長、PCでは横長など）を制御するために使う。AI生成コードではどちらが使われているかを確認してから修正すると良い。

安全に使うための注意点

srcsetに列挙したファイルが存在しない場合、ブラウザは自動でsrc属性のフォールバック画像を使う。共有zip内の画像ファイルを整理する際に一部ファイルを削除すると、意図した解像度の画像が表示されなくなる。ファイル名の変更・削除の際はHTMLのsrcset記述も同時に更新すること。

srcsetに外部URL（CDNのURL）を混在させると、共有先のブラウザがそのCDNにアクセスしログが残る。社内の未公開ページのレビューで外部CDNの画像URLを使うと、CDNのアクセスログから共有URLや社内サイトの存在が間接的に漏れる可能性がある。レビュー共有時は画像をローカルファイルで完結させること。