piayo's blog

はっさみYO! 沖縄でまったりWeb制作

新しい画像がほしい

pictureタグとimg.srcsetの話。
http://24ways.org/2012/responsive-images-what-we-thought-we-needed/

 

まだ標準化されてないけど、サイト作ってて思うこととか。

 

キャンペーン系とかならタグはどうせ手打ちでコーディング。
なので、別にどっちでもいい。CSS側でレスポンシブsrc変更でもいい。

 

しかし、CMS系サイトとかなるとWYSIWYG editor。
編集者はある程度HTML知識必要だけど、エディタで画像upload&挿入は当たり前。
その時、エディタがどうタグを挿入してくれるかだと思う。
でも、編集者がレスポンシブ配慮して、

  • 何個も画像をリサイズ&作成保存、
  • 何個も画像をupload、
  • 何個も画像を選択挿入、

なんて現実的でない・・・。

 

今まで作ったサイトの中で対応したのは、画像をGD化。
URLはmodパスにして、src="/GD/240x320/src/path/~.jpg"とか
JS側で/240x320/を書き換えるとか、~.jpg → ~_m.jpgとか。

 

やっぱ1行でsrc内は1ファイルにしたいよ...。(楽したい

 

(以下妄想)

 

理想的な画像とゆか、希望は、新しい画像フォーマット。

 

ファイルバイナリ内に画像が何サイズも入ってる1個の画像ファイル。
となると、1ファイルのファイルサイズが数MBになりそう。
だけど、ここはブラウザ側が空気を読んでくれて、デバイスの画面サイズとかみて、
ファイルの読み込み開始位置を変更してload&描画。

 

 ブラウザの縦横サイズを変えたり、スマホを横にしたりしたら、
野郎写真が美人のビキニ写真へ!!!

 

・・・あったらいいなぁ。ドラえもん

 以上、妄想でした。
 
[追記: 2014.03.03] めも。
似た感じの動き。
http://hail2u.net/blog/webdesign/combine-multiple-images-with-svg.html