レスポンシブイメージを使う

※2017年1月17日修正

HTML 5.1が11月1日にW3Cによって勧告されました。
HTML 5.1で新たに導入されたレスポンシブイメージが結構よい感じです。
以前はPC、スマーフォン、タブレットで画像を切り替えるには画像をdisplay:noneやvisibility:hiddenなど設定しメディアクエリで振り分けるか、画像をjsで変えるかくらいしかありませんでした。
レスポンシブイメージを使うと、複雑なjsやcssなどは不要で画像を切り替えることができます。

デモページ

デモページではブラウザ幅が
0~409px
410px~639px
640px~979px
980px~
の4段階で画像が変化していきます。

※2017年1月17日HTML修正しました
HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js"></script>
<picture>
<source media="(min-width:980px)" srcset="img/demo/pc.jpg" sizes="100vw">
<source media="(min-width:640px)" srcset="img/demo/sp980.jpg"  sizes="100vw">
<source media="(min-width:410px)" srcset="img/demo/sp640.jpg" sizes="100vw">
    <img src="img/demo/sp410.jpg" >
</picture>

CSS

.demo_post{
   picture {
    display: block;
    width: 100%;
    text-align: center;
    }

<picture>内に記述していきます。
<picture>の中には<source>と<img>の要素を含むことができます。

下のソースで説明すると・・・
<source media=”(min-width:410px)” srcset=”img/demo/sp640.jpg” sizes=”100vw”>
media 画像を表示する横幅を指定します。(横幅410pxから)
srcset 画像のURL
sizes 画像を表示する横幅です 100vwはviewport width(ビューポートの幅に対する割合)のことです。

CSS

.demo_post{
    text-align: center;
}

注意

便利なレスポンシブイメージですが、pictureタグとsrcetタグがIE系は未対応なのでIEでは動きません・・・

Can I use srcset

http://caniuse.com/#search=srcset

Can I use picture

http://caniuse.com/#search=picture

そんなときの救世主がpicturefill.js
picturefillはpicture要素を対応できていないブラウザに対しても擬似的に実現してくれてるjsライブラリです。
https://github.com/scottjehl/picturefill

%MINIFYHTML34c0b741f95efd27bf521486b6fa526112%

デモページ

  • コーダーのための計算機