[HTML & CSS General] レスポンシブデザインと画像
memo.
Contents
レスポンシブデザインの中で画像はどのように扱われるべきなのか
以下引用サイトより抜粋。
レスポンシブ画像をめぐる要求の変化
- Art Direction … 例えばモバイル用には単なる縮小画像ではなく、ユーザーに訴求したいエリアを切り出し拡大して見せることを要求。
- 当初言われていた「ワンソースでマルチデバイスに対応」というレスポンシブデザインの謳い文句は、もはや画像に関しては「死語」に近く、要求が複雑化していくと共に、今後はマルチソースの方向になる。
Retina 用の画像は低画質で良い！ – Retina 革命
- 相当数の「レスポンシブな画像を実現する手段」が提案されてきたが、どの手法を使えば良いのか、未だ決定打がない状態が続いている。
- Daan Jobsis さんの2012年7月27日の記事 Retina revolution が大きな反響。Retina 用の高解像度画像なら、画質をかなり落としても十分綺麗に見えるということを明らかにした。
- このような画像のレンダリングは電力を余計に消費するため、通信時間の短縮とを天秤にかける必要があるかも知れないが、それでも、読み込みとレンダリングを最悪2回実行してしまう Retina.js を使うよりは、はるかにマシ。
ブラウザの漸進的な進化
- ブラウザのネイティブな機能として
要素 、要素の srcset 属性 が提案されているが。。。
- 過渡期の今、どのように決着するか分からない。
ブラウザのネイティブ実装
以下引用サイトより抜粋。
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証 – Rriver
- 結論から言うと、ブラウザのネイティブ実装はまだこれから。ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良い。
レスポンシブ・イメージで解決したい重要課題
- 幅に合わせた寸法での表示
- 画像のアートディレクション
- Retina対応