2017年11月23日シェアする:レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良いと思います。多くの開発者が多大な時間を費やして実現しようとしているレスポンシブ・イメージです。この存在が日本でもより多くの人に広まればと思い、いまの状況をまとめてみました。2.xにウェブ標準に影響する大きな問題発覚。consideration)」と公表。実装の可能性もある?SafariとIEでの実装を残すのみということで、AppleとMicrosoftの今後の動きに注目です。flags」とある通り、設定の変更が必要です。2.x」では、最新のpicutre要素の仕様に沿ったものが実装されていて、picture要素、srcset属性、sizes属性を使ってレスポンシブ・イメージを実現できます。1.xのアップデート版です。よい感じで動いてはいるものの、大きな欠陥があるので、プロダクションサイトでの使用には、もう少し検証が必要だと思います。1.2を使うのが良さそうです。2.xのブラウザ・サポートはこちらで確認できます。2.3での注意点などが書いてあるので、使用の際には必ずチェックすることをオススメします。Nightではレスポンシブ・イメージがネイティブで動作します。Canaryは、ダウンロードして起動すると、そのままpicture要素やscrset属性、sizes属性が使えます。今回のデモのために作ったページは、問題なく動いてます。Toolbarを表示させて以下の設定を有効にする必要があります。true設定はアドレスバーからabout:configにアクセスすることで確認できます:レスポンシブ・イメージで解決できる3つの課題さて、デモを紹介する前に、レスポンシブ・イメージでいったいなにを解決したかったのか、おさらいしておきたいと思います。そもそも、なんでレスポンシブ・イメージが必要なのか?ってやつですね。Sizeにあわせるのがベストなんですけどね)。1200pxの画像を300pxで表示すると、レンダリングのためにブラウザのリソースを必要とするだけでなく、ファイルサイズも必要以上に大きくなってしまいます。画像のアートディレクション写真によっては必要ないですが、大き目のスクリーンでは全体が見える写真が良い場合でも、スマホのような小さいスクリーンでは、写真の要点にクローズアップしたものが良い場合もありますよね。Retina対応Retinaスクリーンが登場してしばらく経ちますが、綺麗な画面で画像だけがぼやけていると、かなり印象が悪くなります。Retinaスクリーン向けには、それ用の高解像度の画像を表示したいですよね。Started」では、ファイルタイプによるユースケースが紹介されていますが、個人的にはあまり重要だと思っていません(少なくとも2014年8月現在では。幅に合わせた寸法での表示ブラウザの表示領域(Viewport)に合わせて違うサイズ(寸法)の画像を選択する方法です。selection」と呼んでいます。この使い方の場合、picture要素は必要なくて、img要素にsrcset属性を使って複数のサイズの画像を記述します。2.xのデモ画像">デモはこちらsizes属性sizes属性で条件とそれに応じた画像表示を指定します。条件にはメディアクエリを使いますが、ここでは指定をせず、画像表示のみ「100vw」として指定しています。Width)は表示領域の割合を表す数値で、100vwはViewportの100%になります。sizes属性は、デフォルトが100vwなので指定しなくてもOKです。100vw”とすると、640px以上ではViewportの50%に、また、それ以外の幅ではViewportの100%での表示に最適な画像を選択するよう指定しています。これは、たとえば640pxのブレイクポイントを境に、それぞれ50%幅の2カラムのレイアウトにする場合に使います。2)を指定しています。sizes属性の指定の順番についてsizes属性では、メディアクエリが当てはまる最初の条件が適用されるため、以下の2つでは表示が異なるので注意が必要です。(64-bit))では挙動が異なりました。Picturefillでは同じ挙動でした。画像のURLと幅を「w」で指定したものを1組みとしたものをカンマで分けたリストにして指定します。このリストとsizes属性の指定をベースに、ブラウザが状況に応じて最適な画像を選択してくれる仕組みになっています。ブラウザ側での画像選択の仕様は細かく指定されていなくて、将来的には回線速度やユーザのブラウザ設定などをもとに、ブラウザが自動でやってくれるようになるそうです(ブラウザ・ベンダー次第)。src属性についてsrcsetをサポートしないブラウザ用に、フォールバックとして記述することが推奨されています(参照)。これはデモ2、デモ3でも同様です。2.xではいくつかの理由により、入れないようにしたほうが良いようです。スクリーンサイズと表示される画像sizes属性が固定の100vwのデモだと、表示される画像は以下のようになります。5のような端末だと、それら端末のスクリーンに最適な画像サイズを選択してくれます。画像のアートディレクションブラウザの表示領域(Viewport)にあわせて、内容の異なる画像を選択する方法です。selection」と呼んでいます。以下のデモでは、640px未満のスクリーンではクローズアップした写真のcat-XXXw-close.jpgのいずれか、640px以上では全体が見られる写真のcat-XXXw.jpgのいずれかが表示されるように指定しています。alt="猫の窓際"></picture>デモはこちらsource要素source要素では、640px以上のスクリーンサイズで表示する画像を、srcsetを使って複数指定しています。複数指定した画像の中から、ブラウザが最適な画像を選択してくれる仕組みです。2.xではIE9で問題があるので、以下のようにIEコメントで囲んだ<video>タグを記述するように書かれています。alt="猫の窓際"></picture>img要素ここでは640px未満のスクーンで表示する画像を、srcsetを使って指定しています。実は、デモ1とデモ2でもRetina対応ができているのですが、Retina対応を明示的に記述したい場合は、以下のような指定も可能です。selection」と呼んでいます。alt="猫の窓際">デモはこちらx記述子srcset属性に、1.5xや2.0xといったx記述子(descriptor)を画像URLとペアにして記述することで、それぞれのピクセル比(device-pixel-ratio)で表示したい画像を指定できます。100%にしている場合など)は、x記述子は適切ではないとあります。その場合は、デモ1のようにsrcset属性に複数の画像を指定するとこで、ブラウザが適切な画像サイズを選択してくれます。Nightly)での動作を比較・確認してみました。31.0※IE10以下でのテストをサボっててすみません。テストしたら追記します。テストされた方がいたら、ぜひ、結果をコメントでシェアいただければ幸いです!問題・バグ?仕様で推奨されているようにフォールバックとしてsrc属性を使用して画像を指定すると、ページが読み込まれる際に、フォールバック画像が読み込まれた後にsrcsetの画像が読み込まれます。Supportによると回避策がないらしく、src属性を入れないで記述するしかないようです。src属性を入れないとカラの画像の枠とaltテキストが一瞬表示されてしまいます。JavaScrptがオフの環境では、altテキストが表示されるのみになります。以下のモバイル端末でテストしてみたところ、デスクトップブラウザと同じようにカラの画像の枠とaltテキストが一瞬表示されます。(64-bit)Picturefillであった問題もなく、良い感じでレスポンシブ・イメージを使ったデモページが動作しています。34.0a1以下の問題がありました。ページをリロードしないと画像が切り替わらないデモ2のsrcsetで複数指定した画像が、1つ目のものだけしか選択されない画像のファイルサイズについて今回の検証のために、200pxから1200pxまで、200px毎に画像を作ってみたのですが、ファイルサイズは以下になりました。ImageOptimで最適化をしたあとのファイルサイズです。400pxしか必要ないのに1200pxのファイルを表示していたら、ユーザに83KBも無駄にダウンロードさせることになります。1つだけならいいですが、これが複数の画像になると1MBなんてすぐにいってしまいますね。表示パフォーマンスの観点からも、レスポンシブ・イメージの実装が安定してきたら、ぜひ活用したいですね。KBまとめ残念ながら、picture要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです。2.1.0についていい感じで動いているのですが、画像が読み込まれる前にカラの画像の枠とaltテキストが一瞬表示されるという致命的な欠陥が残っています。フォールバックにsrcを使って画像を指定すると、一度その画像が表示されてからsrcsetに指定した画像が表示される(=無駄に画像が読み込まれる)という欠陥もあります。1.2では、こんなことはなかったと思うのですが。レスポンシブ・イメージの大きな目的の1つは表示パフォーマンスの最適化なので、src属性は記述しないという選択肢しかないですが、一瞬とはいえ壊れた表示(カラの画像の枠とaltテキスト)が出てしまうのは、かなりイケてない体験です。これはジレンマですね〜ブラウザでのネイティブ実装についてブラウザへの実装は、Chromeでは良い感じに仕上がっていますし、38からの搭載が決まっているようなので楽しみです。flags」で設定の変更が必要ですし、まだまだという印象を受けました。2年前に比べればものすごい進歩ですが、レスポンシブ・イメージが普及するまでにはまだ時間がかかりそうです。ブラウザでサポートされても、実際に作るほうの手間も考えものです。複数画像の作成がネックになりそう今回デモ用に画像を作ってみて思ったのですが、結構手間がかかります。この作業を簡単に自動化できる良いツールや手法がないと、レスポンシブ・イメージ利用のキャズム超えはまだ先なのかなぁと思います。ベクター画像だったらSketchで解決できますけど、写真の場合は無理そうだし。Gruntだと設定がちょっと面倒だし。Generatorに実装されるのが理想でしょうか?Photoshopでプラグイン出てませんかね?若干本末転倒な感じは否めないですが、いろいろな手間や将来性を考えたら、CMSやWebサーバで解決しちゃうという選択肢もありだなぁと思う今日このごろでした。お願い記事中の誤った情報のご指摘やレスポンシブ・イメージに関する最新情報やTipsなどがありましたら、このブログのコメント欄でもTwitter(@rriver)でも良いのでシェアいただければ幸いです。Groupレスポンシブ・イメージの開発を進めているコミュニティ。レスポンシブ・イメージの最新事情やリソースへのリンク、ブラウザの実装状況が確認できます。sizes新srcset属性とsizes属性が必要な理由を細かく開設した記事。長いですけど、分かりやすいです。まとめてくれたEricさんに感謝ですね。GithubPicturefillのGithubページ。StartedDev.OperaのBovensさんによるレスポンシブ・イメージの使用方法についてのまとめとコード例集。TECH.insightGruntプラグインを使ったレスポンシブ・イメージ用の画像作成の自動化についての記事。tests端末のピクセル比などの確認につかえるサイト。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。2.xにウェブ標準に影響する大きな問題発覚。4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ?次世代HTMLの新仕様「レスポンシブ・イメージ(仮)」についてまとめてみたレスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定WordPressでレスポンシブ・イメージの自動化を可能に。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。コメントをキャンセルメールアドレスが公開されることはありません。