画面幅で【簡単に】画像を切り替える方法

画面幅で簡単に画像を切り替える方法です。

HTMLのみのためJavascriptやメディア分けしなくても利用できるため簡単に使用できます。

使用するのは「img」タグ内での「srcset」です。

実際の使用方法は以下の通りです。

<img src="image-path" srcset="image-path 767w">

image-pathには画像URLをセットします。

デフォルトの「src」にはデフォルト表示のための画像パス、「srcset」には画面幅に合わせて表示させる画像パスを設定します。

「srcset」でパスの後ろに幅を指定することでその幅以下になった際にその画像が使用されるようになります。

画像にしっかり情報を含んでいるLPのようなタイプでは非常に有用な気がします。