<picture>まわり雑感 その1

HTML

Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。

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をつけるだけという。

<img srcset="image-2x.png 2x" src="image.png" alt="...">

ただiPhoneさまが3xになったので、3xな画像を…といきっちゃうかもしれない。そしたらこうだ。

<img srcset="image-2x.png 2x, image-3x.png 3x" src="image.png" alt="...">

画像リソースの数は増えるけれど、マークアップが複雑になったとはまだ言わなくてもいいレベルではないか…な。

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なそれを確実に提供したい場合はこうなるだろう。

<picture>
  <source media="(min-resolution: 3dppx)" srcset="image-3x.png">
  <source media="(min-resolution: 2dppx)" srcset="image-2x.png">
  <img src="image.png" alt="...">
</picture>
  • srcsetに画像をならべるのではなく、<picture>に<source>をならべる
  • srcset内の3xの代わりにmediaにmin-resolution: 3dppxを使う

1行でだいたい同じものが書けてたのにだいぶ大げさになった。Webでコントロールを求めればめんどくさくなるのだ、というのを暗に伝えたいのかもしれない。

もちろん、art directionのように画像を意図どおりに切り替えたいというケースはある。それはちゃんと<picture>を使わないとだめだろう。でもそうでない場合はなるべく減らして、ブラウザに任せたほうが賢いかなと。

マークアップとスタイルのseparation of concernsあたりについても書こうと思ったのだけど、考えがまとまってないのでとりあえず。