PC、スマートフォン、タブレットに対応したレスポンシブデザインでお悩みの方も少なくない「画面に適した画像を表示につて」。特にトップの顔となる画像などは、PCでは画面いっぱいに表示するなどインパクトのある画像で訪問者に印象付けたい。しかし…そのままスマートフォンで表示させるとなると、PCの画像をそのまま使用することは縦横比、画面の大きさ、テキストとの兼ね合いでなかなか、両立できる画像を準備することは困難です。やはり画面に応じ画像を使い分けたレスポンシブデザインが好ましいと考えます。これまではJavaScriptやCSSで表示・非表示を切り替えた対応となっておりましたが、HTML5から新しく使用可能となった「picture」要素で簡単にレスポンシブな画像切り替えができるようになりました。
- <picture>
- <source media="(min-width: 960px)" srcset="img/pc-agency.jpg">
- <img src="img/sp-agency.jpg" alt="スマホ用画像">
- </picture>
対応ブラウザ：
Can I use Picture element
Can I use Picture element
picture要素は、IE (Internet Explorer) には対応していませんが、ほとんどのブラウザで対応しています。なお未対応のブラウザでも img 要素として読み込まれるので、画像が表示できないということはありませんが、IEなどの未対応ブラウザでも同様に対応しておきたいところです。
IEなど対応していないブラウザで picture 対応させる方法：
picturefill という JavaScript を利用します。
picturefillを導入すれば srcset と sizes 属性も使えるようになります。
設定は簡単！
CDNもCloudflareから提供されていますのでファイルを読み込む（head部へ以下を記述する）だけです。
これだけでpicture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになります。こちらの設定で前述のpicture要素がそのまま使用可能となる為、picture要素で特別な設定は不要です。
picturefillを導入すれば srcset と sizes 属性も使えるようになります。
設定は簡単！
CDNもCloudflareから提供されていますのでファイルを読み込む（head部へ以下を記述する）だけです。
- <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>
これだけでpicture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになります。こちらの設定で前述のpicture要素がそのまま使用可能となる為、picture要素で特別な設定は不要です。