レスポンシブイメージで画像の表示を最適化

<img src="images/large.jpg" sizes="(max-width:1280px) 100vw, 1280px" srcset="images/small.jpg 320w,images/medium.jpg 640w,images/large.jpg 1280w" />

画像ファイルのパスと横幅はsrcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をwebページ上で表示する際の横幅」では無いことに注意してください。

srcset="images/small.jpg 320w,
      images/medium.jpg 640w,
      images/large.jpg 1280w"

パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw(幅記述子)を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。

画像を表示する際の横幅はsizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。ディスプレイ1280px以下の時は画面幅、それ以外では1280pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"

 

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

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

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

なお、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もJSもいらないHTML 5.1の新機能

この投稿へのコメント

  1. WordPress コメントの投稿者 said on 2017年9月19日 at 1:50 PM

    こんにちは、これはコメントです。
    コメントの承認、編集、削除を始めるにはダッシュボードの「コメント画面」にアクセスしてください。
    コメントのアバターは「Gravatar」から取得されます。

コメントを入力するためにはログインが必要です。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL