ブラウザの表示画面に伴って異なる画像ファイルを表示させるjs「Picturefill」。
ヘッダーでjsを読み込んで、<picture>タグで表示サイズ別の画像ファイルを指定するという使い方。レスポンシブデザインのように自動で画像サイズを変更してくれるわけではないので、若干の手間がかかりますが、デモのように、ただ単に画像を小さくするというものより訪問者に分かりやすく伝えることができます。
手間がかかるので毎日大量に更新するブログなどには向きませんが、カタログページなどで活用できそうです。
[js] ブラウザの表示サイズ別に異なる画像を表示する「picturefill.js」
記事内にプロモーションを含む場合があります。