レスポンシブイメージのクロスブラウザ対応

レスポンシブイメージは便利な機能ですが、対応ブラウザが気になるところです。srcset属性とsizes属性、picture要素は、Inetnet Explorerを除くほぼすべてのブラウザで利用可能です

srcset属性とsizes属性のブラウザ対応状況 (参照「Can I use」)

picture要素のブラウザ対応状況 (参照「Can I use)」

案件で使用する場合、IE対応必須という要件で依頼され、レスポンシブイメージ未対応のブラウザ向けの対応が必要な場合も多いでしょう。このような場合にはポリフィルを用います。

ポリフィル「picturefill」でレスポンシブイメージのクロスブラウザ対応

ポリフィルとは、最新のブラウザの機能を古いブラウザでも利用可能にする技術です。レスポンシブイメージのポリフィルの一つとして「picturefill」があります。HTMLコードでスクリプトをを読み込めば、レスポンシブイメージに対応していないブラウザでも、レスポンシブイメージが有効になります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>

下図は、レスポンシブイメージに対応していないIE 11でポリフィルを使った場合のキャプチャーです。画面幅を小さくした時、picture要素による画像切り替えが行われていることがわかります。

▲ IE 11でレスポンシブイメージが動作している様子

なお、IE 9でもレスポンシブイメージに対応する場合は、pictureタグにvideoタグを追記をする必要があります。pictureタグだけではIE 9がsourceタグを解釈できないためです。

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source media="(max-width:520px)"
  (中略)
  <!--[if IE 9]></video><![endif]-->
  <img src="images/large.jpg" alt="">
</picture>

これからはレスポンシブイメージを積極的に使おう

CSSやJavaScriptを使わず、HTMLのみでレスポンシブなレイアウトの画像表示を扱うレスポンシブイメージ。

srcset属性とsizes属性の特徴は、画像サイズの異なる複数の画像情報を示しておけば、ブラウザが環境に応じて自動で最適な画像をユーザーに表示することです。picture要素の特徴は、特定の条件のときに異なる見た目の画像を出し分け、アートディレクションを実現できることです。

レスポンシブイメージの用途・メリットを理解し、必要に応じて使い分け、今後のレスポンシブウェブデザイン制作に役立てましょう。

Tips:異なるサイズの画像ファイルの作成について

本記事内で使用した画像ファイルは、Adobe Photoshop CCの画像を複数スケール向けに書き出す機能で作成しています。[ファイル]→[書き出し]→[書き出し形式]より書き出しダイアログボックスを表示すると、[すべてのスケール]の箇所から書き出したいスケールを選択するだけで簡単に複数の画像を書き出せます。