リキッドレイアウトから画像は無縁でいられるのか?

まあ、必須じゃないとしても、レンダリングのスピードが上がるからimgにはwidthとheight、それに画像が表示出来ないところではaltを指定しろ、ていうかaltはツールチップに使うな。titleならいいかもね、くらいの話はたぶんhtml書いている人は最初に聞く話だと思うので、それに関して理解のある人向けの話。

imgにwidthとheightを指定しない理由では指定しないメリットを「altテキストがうまく表示出来ないから」ということで説明している。
これ微妙にはてブではdisられているけれど、まあ実際理由がこれだとdisられてもしょうがないような気がするんだ。まあそのメリットをメリットだと思うかどうかは人それぞれ。元サイトにはデメリットも書かれているので、そこは天秤で考えればいい。

で、ここから先は今のブラウザを前提にした場合にはどうでもいい話だけど、自分がもしかしたらwidthとheightは指定しない方が先々良いこともあるんじゃないか、と思った話。

ここ最近、WebサイトにCSSを付け加えてデザインする機会が多かった。具体的にいうと、適当にマークアップだけしてメモ代わりに作っていたプレーンなHTMLファイルに、外部CSSで適当にスタイルを加えてちょっと見やすくするくらい、というやつ。だんだん凝ってきて段組とか作っちゃおうかな、みたいな感じまで行ってしまったけど、こういうサイト作りは別の意味でいろいろと楽しいものがある。

で、もとがブラウザデフォルトでわがままいっぱいに広がりすぎなところから、max-widthとかline-heightとかmarginとかいろいろ設定をしていくうちに、だんだんリキッドレイアウトとソリッドレイアウトの差について意識せざるを得ないところになってしまったんだよね。あと単位関連。

小さめのロゴとかアイコンとか、どうしても実寸で表示したい写真とか、そういうものはwidthとheight指定してもいいと思うんだ。でもさあ段組とか文中の挿絵とか、きちんとリサイズ(リサンプル)してキレイに表示出来るなら、ある程度拡大縮小したって良いんじゃない?

今のブラウザだと、写真単体だと普通に縮小表示するけど、レイアウトではけっこう扱いが微妙で、うまくいったりいかなかったりする。ていうか縮小のアルゴリズムもスピード優先であんまりキレイに縮小しないものが多くて、それに頼れない、って感じがまだある。画面の解像度の問題だけじゃなく、ケータイとかの小さい端末向けだったらバッファサイズの問題も出てくるだろう。縮小じゃなくて切り取りの方がいい場合もあるけど、それを明示的に選択する*1のって今のところ難しい。だからこの話が効いてくるのは数年後の話かなあ、ということだけど。

もしかしたらそのときには文章のレイアウトだけでなく画像のレイアウトもリキッドレイアウトでいじれたりなるんじゃないかな?と思う。で、そういう時代になったら、widthとheightは機械的に入れるとむしろ余計な情報になるかもな、というか、どうせ元画像のデータはブラウザが調べるんだから、そこでそんな情報入れているのには何か意図があるんじゃないの?ということになっていくんじゃないかな?と。というかemと%とpxを混在させてcss書くのあとあと厳しそうなんで何か対策ないかしら。

*1:imgタグで表示する場合は基本的に拡大縮小だけど、background-imageの場合は大抵切り取りになるよね?これ逆の選択って出来たっけ?