今年の注目技術!レスポンシブイメージについて勉強できるサイトのまとめ

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

レスポンシブイメージとは?

レスポンシブイメージは、CSSやJavascriptを使用せずに、htmlタグだけで画像をレスポンシブ表示に最適化する手法です。

レスポンシブイメージでは、ブラウザのビューポート幅、ピクセル密度に応じて、最適な解像度の画像を表示することができます。

↓PCでは大きい画像を、スマホでは小さい画像を読み込むことで、画像のダウンロードサイズを最適化する!Retinaにも対応!

cap01

さらに、単純に小さい画像を表示するだけではなく、クロッピングして(画像の上下左右を切り抜いて)表示することもできます。

↓PCの画像をそのままスマホで表示すると、写真が小さすぎるので、スマホでは余分な部分をクロッピングして表示する!

cap02

このようなことが、CSSを使わずにHTMLだけでできます。

目次

  1. なぜ、今レスポンシブイメージなのか?メディアクエリでは課題がある?
  2. 「srcset」のブラウザ対応状況
  3. レスポンシブイメージの使い方
  4. レスポンシブイメージの分かりやすいデモ
  5. WordPressとレスポンシブイメージについて
  6. レスポンシブイメージについてもっと知りたい方へ

1. なぜ、今レスポンシブイメージなのか?メディアクエリでは課題がある?

レスポンシブデザインが普及するに従い、「画像」をスマホやタブレット、Retinaディスプレイでどのように最適表示するか、が大きな課題になっていました。

最初は、「大きな画像」が不要なタブレットやスマホに向けて、画面の横幅に応じて「中くらいの画像」や「小さい画像」を用意することから始まりました。これで、フロントエンドエンジニアの仕事が、1.2倍くらいに増えました。

次に、Retinaなど高ピクセル密度のディスプレイが登場しました。画面の横幅が同じでも、ディスプレイのピクセル密度に応じて、高解像度の画像を用意する必要性が高まりました。これで、フロントエンドエンジニアの仕事が、1.5倍くらいに増えました。

そして、今ではあらゆる画面サイズの端末が登場し、ピクセル密度も1x、2xに加えて、iPhone 6 PLUS用に3xが必要などパターンが増えています。この勢いですと、すぐにでも4xが出てきそうです。フロントエンドエンジニアはもう限界です。

多くのプロジェクトで、メディアクエリを駆使して対応していますが、パターンの増加に伴い最適な画像サイズの計算だけでも複雑化する一方です。そもそも、メディアクエリであらゆる環境に最適な画像を提供するには、技術的な限界があります。

サーバーサイドでは、PHPの「Adaptive Images」などを使ってある程度対応できますが、サーバーサイドの技術が必要なため、一般的にはハードルが高いです。

スマートフォン、タブレット、Retinaディスプレイなど、様々な画面サイズ、解像度の端末が増えるのに従い、もっと簡単に、最適な形でレスポンシブに対応した画像を表示する仕組みが求められていました。

そして、登場したのが「レスポンシブイメージ」です。

錯綜していた仕様も、ようやく落ち着いてきて、ブラウザ側もChrome、Firefox、Safari(Safariは一部仕様除く)はすでに対応が完了しています。IEは未対応、Edgeは対応しています。

WordPress4.4では標準機能として実装されるなど、導入も徐々に始まっています。

↓WordPressでレスポンシブイメージが標準機能になった!

cap04

まだプロジェクトでの実用例が少ないので、実際の開発で利用するのは数ヶ月先になりそうですが、2016年の内に主流になるのは間違いないと思います。
今から少しずつ勉強して、動向に注目しておきましょう。

2. 「srcset」のブラウザ対応状況

Can I use…」で調べることができます。
「srcset」はChrome、Firefox、Safari(Safariは一部仕様除く)、Edgeは実装済みです。IEは対応していません。
対応状況: http://caniuse.com/#search=srcset

3. レスポンシブイメージの使い方

レスポンシブイメージの基本的な使い方についての説明です。まだ実用例が少ないので、実際にどのように実装するのが最適かはこれからです。ここでは、レスポンシブイメージの基本的な仕様を理解しましょう。

レスポンシブイメージ入門:srcsetとwとは – lynda.com 日本版
まずはこちらの動画で、レスポンシブイメージで利用する「srcset」がどのようなものか、把握できます。

レスポンシブ・イメージがもうすぐネイティブ実装!いまから使える?ポリフィル「Picturefill 2.x」を検証 – Rriver
レスポンシブ・イメージについて、基本が一通りまとめられています。デモがあるので、分かりやすいです。

レスポンシブイメージについて – IT工房
レスポンシブイメージの基本について、シンプルにまとまっています。

レスポンシブイメージのネイティブサポート – HTML5 Rocks
この記事も基本がまとまっています。

4. レスポンシブイメージの分かりやすいデモ

デモを見ると、イメージが把握しやすいです。

ページを表示した時の画面サイズに応じて、読み込まれる画像サイズが変わります。画面の横幅を縮めても画像が変わらない場合は、変更後の画像サイズでページを再表示してください。キャッシュが残っていると表示が変わらないケースもあります。Retinaディスプレイの場合も注意が必要です。

<picture> Element Sample
<picture>を使ったデモです。ブラウザの横幅を縮めると猫の画像が切り替わります。

Picturefill 2.xを使ったレスポンシブ・イメージのデモ
sizes属性を使ったデモです。ページを表示した時の画面サイズに応じて、読み込まれる画像サイズが変わります。

Picturefill 2.xを使ったレスポンシブ・イメージのデモ
画像を画面サイズに応じてクロッピングするデモです。画面サイズが小さいと、上下左右を切り抜いて表示します。

ResponsiveImages.org
数種類のサンプルが掲載されています。レスポンシブイメージのコミュニティのサイトです。

5. WordPressとレスポンシブイメージについて

WordPress4.4からはレスポンシブイメージが標準で実装されました。
さすがWordPressですね!

WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ? – Rriver
WordPressで標準実装されたレスポンシブイメージについて、解説されています。

WordPress 4.4以降でのレスポンシブ・イメージ・プラグインはどうなるの? – Rriver
WordPressには、「RICG Responsive Images」というレスポンシブイメージ対応のためのプラグインがありました。レスポンシブイメージがWordPressの標準機能になったことで、プラグインは不要になりましたが、以前からプラグインを利用していた場合は注意が必要です。

WordPress4.4 レスポンシブイメージ srcset の実験 – セルティスラボ
WrodPress4.4でのレスポンシブイメージの評価が記載されています。

6. レスポンシブイメージについてもっと知りたい方へ

日本語での情報がまだまだ少ないですが、もっと詳しい情報が知りたい方は、以下の記事が参考になります。

srcset と sizes
そもそも、画像をレスポンシブ対応する際に、「メディア・クエリのどこがまずいのか?」ということが分かりやすくまとまっています。

なんでもかんでも<picture>要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点 – Rriver
<picture>と<img srcset=””>の使い分けについて解説しています。

レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定 – Rriver
テストの際の注意点や、開発ツールの使い方についてまとまっています。

マークアップ内の画像 | Web Fundamentals – Google Developers
Google Developersの記事です。

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 2,124