ひとことで言うと
レスポンシブ画像とは、画面サイズやデバイスの解像度に応じて最適なサイズ・形式の画像をブラウザが自動選択する仕組みだ。`<img>`タグの`srcset`属性と`sizes`属性を使い、360pxのスマホには軽い画像を、4Kモニターには高解像度の画像を配信することでパフォーマンスと品質を両立する。
AIで生成されたHTMLではCSSで`max-width: 100%`を設定して見た目をレスポンシブにしていても、srcsetが設定されておらず1枚の大きな画像を全デバイスに配信しているケースが多い。これが「スマホで開くと遅い」の直接原因になる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
共有したHTMLに2000px幅のJPEG画像が複数含まれている場合、スマホで開いた受け取り相手は数MBのデータを読み込むことになる。レビューのためにURLをクリックしただけで大量の通信が発生し、表示に10秒以上かかることもある。共有前にスクリーンショット画像を1000px以下に圧縮し、WebPやAVIF形式に変換するだけで大幅に改善できる。
ギガサイト便でzipをアップロードする際、フォルダ内の画像ファイルのサイズ合計がそのままネットワーク転送量に影響する。受け取った相手の環境でのロード体験を良くするため、共有前にimagesフォルダをSquooshやSharpで一括圧縮しておくことを強くお勧めする。
よくある誤解
「CSSで`width: 100%`にすれば画像もレスポンシブになる」という誤解が広まっている。これはあくまで表示サイズをコンテナに合わせるCSSの話で、ブラウザがダウンロードする画像ファイル自体のサイズは変わらない。見た目は小さくなっても重い画像をダウンロードし続けている。
「PNG形式はWebPより品質が高い」というのも状況依存の話だ。WebPはPNGと同等またはそれ以上の品質を保ちながらファイルサイズを30〜50%削減できる。AI生成ツールがPNGで出力した画像はWebPに変換してから共有すると、レビュー体験が大幅に向上する。
安全に使うための注意点
srcsetで複数サイズの画像を用意する場合、各画像ファイルに一貫した命名規則（例：hero-800w.webp, hero-1600w.webp）を使うとファイル管理がしやすい。共有zipを作る際に一部サイズのファイルを入れ忘れると、ブラウザがフォールバック先を探して余計なリクエストを発行する。
外部CDN（Cloudinary、imgixなど）のURLを画像srcとしてHardcodeしたHTMLを共有する場合、共有先のブラウザからそのCDNへのリクエストが発生する。CDNがリファラー制限をかけているとレビュー用URLから画像が表示されなくなる。ローカル画像ファイルを含めた自己完結型のzipにするのが安全だ。
よくある質問
AI生成HTMLの画像をWebPに変換する簡単な方法はありますか？
ブラウザ上のSquoosh（squoosh.app）が最も手軽です。複数ファイルを一括処理するならSharpのCLI（`npx sharp-cli`）を使うとドラッグ＆ドロップ不要で変換できます。変換後はHTMLのsrc属性のパスを更新するのを忘れずに。
srcsetを設定するとき、何pxの画像を何種類用意すればいいですか？
最低限400w・800w・1600wの3種類を用意するのが一般的です。モバイルファーストなら400wと800wを優先してください。デバイスのdprが2の場合は400wでも実際は800px相当の解像度で表示されます。
共有したHTMLの画像を後から最適化する場合、HTMLのコードも書き直す必要がありますか？
WebPに差し替えるだけならHTMLのsrc属性の拡張子を`.jpg`→`.webp`に変えれば済みます。srcsetを追加する場合はHTML編集が必要ですが、既存のsrc属性はそのままにsrcsetを追記するだけで古いブラウザへのフォールバックも維持できます。