HTMLレスポンシブ画像生成

<picture>要素によるレスポンシブ画像の基本構造

異なる画面サイズに応じて最適な画像を切り替えるには、<picture>要素を用いるのが効果的です。
内部に<source srcset="images-page/sp.png" media="(max-width:750px)">のような条件分岐を記述し、<img>タグにはデフォルトの画像を設定します。
これにより、クライアントの画面幅に応じて軽量な画像を選択でき、表示速度とパフォーマンスの向上が期待できます。

media属性で細かく表示条件をコントロール

<source>タグに指定するmedia属性では、CSSと同様のメディアクエリを用いて表示条件を定義できます。
たとえばmedia="(min-width:1024px)"とすれば、PCサイズ向けの画像を設定可能です。
複数の<source>を順番に記述することで、環境に応じた画像最適化が柔軟に行えます。

srcsetとsizesによる画像選択の最適化

srcsetは複数の画像を候補として与える仕組みで、sizes属性と組み合わせることで表示幅に応じた画像が選択されます。
たとえばsrcset="image@1x.jpg 1x, image@2x.jpg 2x"のように記述すると、デバイスの解像度に応じて適切な画像が読み込まれます。
これにより、Retinaディスプレイや高解像度モニターでも画像がぼやけることなく表示できます。

デフォルト画像としてのimgタグの重要性

<picture>の中にある<img>は、条件に合致する<source>がなかった場合に表示されるフォールバック用の画像です。
この<img>には必ずsrcとalt属性を記述し、かつwidthとheightも指定しておくことで、レイアウトの安定性とユーザー体験を向上させることができます。
また、decoding="async"やloading="lazy"も組み合わせておくと、表示パフォーマンスの最適化につながります。

フォーマット切り替えでWebPやAVIFに対応

<source>のtype属性を使えば、画像フォーマットごとに異なるファイルを提供することも可能です。
たとえばtype="image/webp"を指定した<source>を先頭に配置し、非対応ブラウザには<img src="fallback.jpg">でJPEGを読み込ませるといった運用ができます。
これにより、WebPやAVIFなどの次世代フォーマットに対応しつつ、後方互換性も確保できます。

画像タグを正規表現で検出し、変換処理を行います。

const imgRegex = /<img([^>]*?)>/gi;

この正規表現は<img>タグの中身をすべて対象にします。そこからsrcやaltなどの属性値を1つずつ抽出して、変換に使用します。

スマホ向け画像の生成では、画像ファイル名の末尾に-spを追加しています。

const mobileSrc = fileName + '-sp' + extension;

そして、元の<img>タグを<picture>タグでラップし、メディアクエリ(max-width:750px)に一致した場合にスマホ用画像が表示されるようにしています。

return `<picture><source srcset="${mobileSrc}" media="(max-width:750px)"><img ${imgAttributes}></picture>`;

このようにすることで、1つのHTMLコードでデバイスに応じた画像切り替えが自動で行われ、ユーザー体験が向上します。

さらに、入力エリアにコードを打ち込むと、変換後のコードがリアルタイムで出力されるようにしています。

document.getElementById('inputCode').addEventListener('input', function(e) {
	const input = e.target.value;
	const output = document.getElementById('outputCode');
	const convertedCode = convertImages(input);
	output.textContent = convertedCode;
});

addEventListener('input')を使うことで、入力が変更されるたびにconvertImages関数が実行され、変換結果をリアルタイムに表示します。