まわり雑感 その1 (original) (raw)
この広告は、90日以上更新していないブログに表示しています。
Chrome 38が出て<picture>
が有効になったので、いくつか記事を訳した。
- レスポンシブイメージのネイティブサポート - HTML5 Rocks
- Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ
- Dev.Opera — レスポンシブ・イメージ:ユースケースと入門用のコードサンプル
HTML5 Rocksのは<picture>
の簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんは<picture>
と<img srcset>
, <img sizes>
を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitで<picture>
とかを実装しているYoavなので。
以下いろいろ。
だいたい<img srcset>
で事足りる気がする
要素ということもあって<picture>
に目が向きがちだけれど、“Don’t use (most of the time)”などで言われているとおり何が何でも<picture>
つかえというわけではない。
使うのは<img srcset>
でRetina対応(x
デスクリプタ使うやつ)が多いのではないか。他の属性やら<picture>
はResponsive Web Designでの利用が多そうだけれど、Retina対応はRWD関係なくやりたいことだろうから。
なので基本的にはこんなコードでよさそう。2x
な画像を書いたsrcset
をつけるだけという。
ただiPhoneさまが3xになったので、3xな画像を…といきっちゃうかもしれない。そしたらこうだ。
画像リソースの数は増えるけれど、マークアップが複雑になったとはまだ言わなくてもいいレベルではないか…な。
3xいるのかね
さて、3x。そんなに要らないのではないかと思っている。というのは1x→2xほどのぼけ具合がないから(個人の感想です)。
Androidは昨年秋から3x時代に入ってるのだけれど、アプリのアイコンやアセットで3xなものがあるのはまだ多くない。たとえばLINEとか、スタンプがうっすらぼやけたりしている。 とはいえアプリの対応とかはiPhoneが牽引している感があるので、iPhone 6 Plusが発売されたいま、3xな画像が増えてくるのかなとも思う。
でもね…あまりにもバリエーションが増えすぎてしまうと作成や管理の面でもえらく大変になるだろうし、3xや4xが出たからといって純朴に対応しているとすりきれてしまうのではないか。
軽く調べた感じだと、いまのところAppleもapple.comで3xな画像を出していない。iPhone 6 Plusは3xといっても、幅1242pxな画面を1080pxに縮小して表示とすごいことになってるので、単純に2xのアセットを3xで表示した見た目になるわけではない。なのでぼけ度合いは2xなものを3xでというものよりは多少よいのかもしれない。
<img>
ではコントロールできない
srcset
やsizes
で指定する画像はあくまで「ヒント」なので、「意図とは違った画像が表示されるかも」というのは頭の片隅に置いとくといいかもしれない。
たとえば「重いしRetinaなんかいらねえよ」みたいなオプションが設定についたり、ブラウザがそこら辺賢くなってくれたりすると(Operaとかやりそうな気がする)、2x/3xなディスプレイでも1xな画像を出しちゃうなんてことが起こるだろう。
最近だとBlinkで、リサイズ時にすでに高解像度の画像がある場合は、candidateが変化してもそれをダウンロードしなくなった。軽くバグな気もするけれど……
<picture>
+<source>
でコントロールできなくもない
「コントロールできないのはちょっと…」というケースはあまりあってほしくないけれどあるかもしれない。<picture>
と<source>
を使えば、コントロールさせることも一応できる。<source>
はヒントではなく「命令」になるからだ。
たとえば、2xには2xな画像を、3xには3xなそれを確実に提供したい場合はこうなるだろう。
srcset
に画像をならべるのではなく、<picture>
に<source>
をならべるsrcset
内の3x
の代わりにmedia
にmin-resolution: 3dppx
を使う
1行でだいたい同じものが書けてたのにだいぶ大げさになった。Webでコントロールを求めればめんどくさくなるのだ、というのを暗に伝えたいのかもしれない。
もちろん、art directionのように画像を意図どおりに切り替えたいというケースはある。それはちゃんと<picture>
を使わないとだめだろう。でもそうでない場合はなるべく減らして、ブラウザに任せたほうが賢いかなと。
マークアップとスタイルのseparation of concernsあたりについても書こうと思ったのだけど、考えがまとまってないのでとりあえず。