フロントのエンド

Web開発をがんばりたいブログ

未分類

htmlだけで実現するレスポンシブイメージ

by:
17/01/24

WordPressにもver 4.4から実装された(ということは知っていた)レスポンシブイメージですが、正直詳しくはどういうことが出来て、どういう仕組みなのかよくわからないのです。

なので、勉強。

やりたいこと

  • 案件にレスポンシブイメージを使いたい
  • デバイスごとに(主にPCとモバイルの振り分け)ちょうどいい感じにデザインされた画像を出したい
スポンサーリンク

参照サイト

画像  |  Web  |  Google Developers

画像のレスポンシブ化にアートディレクションはあるか?

アートディレクションありの場合

デバイスごとに読み込まれるサイズや解像度が変更するだけでなく、デザイン自体が違う最適化された画像を出力したいかどうか。

したい。

サンプルコード

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

上の例では、ブラウザの幅が 800px 以上の場合に、デバイスの解像度に応じて head.jpg か head-2x.jpg のいずれかが使用されます。ブラウザの幅が 450px~800px の場合は、デバイスの解像度に応じて head-small.jpg か head-small-2x.jpg のいずれかが使用されます。画面の幅が 450px より狭い場合や、picture 要素がサポートされていない場合の後方互換性では、ブラウザは代わりに img 要素をレンダリングします。このため、img 要素は必ず含める必要があります。

画像  |  Web  |  Google Developers

最終的に書いたコードはというと

<picture>
    <source
    media="(max-width: 768px)"
    srcset="<?php echo get_stylesheet_directory_uri(); ?>/img/mobile.png, <?php echo get_stylesheet_directory_uri(); ?>/img/mobile@2x.png 2x"
    >
    <img
    src="<?php echo get_stylesheet_directory_uri(); ?>/img/pc.png"
    srcset="<?php echo get_stylesheet_directory_uri(); ?>/img/pc@2x.png 2x"
    alt="ALTのテキストは大事"
    >
</picture>

って感じで、mobileとPcで振り分ける感じでレティナにも対応。

まとめ

レスポンシブイメージにアートディレクションがあるのかないのか、で使うコードを分ける考え方でよさそう。

  1. サイズ変更のみの場合はimgsrcset属性を使う
  2. アートディレクションを入れる場合のみpictureを使う

なんでもかんでも<picture>要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点 – Rriver

mobileとPCで表示するbannerを分けたいって考えでレスポンシブイメージかするには、結局解像度とかを視野に入れると最低4パターンの画像作成が必要、だけどもこの辺はillustratorとかPhotoshopのアセット書きだし便利よね、という感じで。

はい。

コメントを残す