コーディングブログ

Coding Blog

pictureタグの使い方。IEはjavascriptで画像切り替えor『Picturefill』で対応!

HTML

jQuery

最終更新日:2019/10/05

レスポンシブでPC用とスマホ用で画像を切り替えるときはHTML5.1新要素のpictureタグを使用するのが最適です。

しかし、pictureタグがIE11で未対応。
そのIE対策として、jQueryJavaScriptPolyfill (ポリフィル)のPicturefillの3パターンで対応させる方法を解説します!

    pictureタグの使い方

    まずは基本的なpictureタグの使い方はこちら。

    【画像パス】にそれぞれ画像のパスを入れてください。
    min-width:768pxで、画面幅768以上での画像指定。
    max-width:767pxで、画面幅767以下の画像指定です。

    これだけで画像切り替えを行う事ができます。

    それぞれの画面幅で読み込んだ際、もう片方の画像は読み込まれないので、ページスピード強化にも使えます。
    PC、SPそれぞれimgタグで出力してcssでdisplay:none;とかやっている方は今すぐpictureタグに切り替えましょう。

    pictureタグ ブラウザ対応

    Can I use picture
    Can I Use … pictureタグ対応表

    しかし、ブラウザ対応の面でIEが未対応となっているので、IE用にjavascriptを用意します。

    IE対策 – jQueryで画像切り替え

    完成版ソースはこちら

    解説

    $('.switching')はpictureタグの中のimgタグにつけたclassを指定してください。
    PC画像は『_pc』、SP画像は『_sp』と付けることにします。

    jQueryで切り替えたいのはIEだけでなのでユーザーエージェントで判定して分岐します。

    function imgReplace()で画像を切り替えていきますが、spNamepcNameに、またその逆に切り替わるので、
    画像のパスと『_sp』、『_pc』以前の命名を統一する必要があります。
    例)image01_pc.png、image01_sp.png

    あとはメディアクエリでブレイクポイントを超えた時に切り替える処理をします。
    mediaQueryList.addListener(imgReplace);

    imgReplaceはメディアクエリで判定して画像名を置換します。
    リサイズの判定はresize関数ではなくメディアクエリで判定しましょう。

    これをeachswichElementsの数繰り返すので、複数画像があっても問題ありません。

    これで安心してpictureタグを使ってレスポンシブで画像を切り替えることができます!

    javascript版 画像切り替え

    若干記述は長くなりますが、jQuery無しの場合はこちら

    Picturefillで対応

    実際これが一番良いかと思います。
    PicturefillはpictureタグのPolyfillです。

    上記画像切り替えのjQueryとJavaScriptでは、ファイル名の『_pc』『_sp』を置換するので、ファイル名は画像ディレクトリの縛りがありますが、こちらでは普通に何も気にせず切り替えられます。

    Polyfill (ポリフィル)とは

    ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。

    https://developer.mozilla.org/ja/docs/Glossary/Polyfill

    Picturefillの使い方

    下記サイトから『picturefill.min.js』をダウンロードし、読み込ませるだけです。
    http://scottjehl.github.io/picturefill/

    async属性を付けると非同期で読み込むので、レンダリングを速くすることができ、公式でも推奨されています。

    IEのみ読み込み

    IEのための対策なのでphpかjavascriptでユーザーエージェントを判定し、IEのみ読み込むようにすると良いでしょう。

    PHP
    javascript