ブラウザによる画像の縮小の差異?
元ネタはこっちなんだけど, ブラウザによって画像の表示が変わってしまうというお話. どうも IE/MacとFirefox1.5/Mac でおこる現象みたい. Safariではおこらない, とのことだ. 該当ブラウザを持ってないので(そもそも手元にMacがない) 検証できないんだけど, 少し興味深いので簡単に原因を考えてみた. 実はこの画像というのが 365x500 というでかい画像になっている. でもって, HTMLの中で width="214" height="285" というのが記述されている. つまり 元の画像を縮小して表示していることになる. この『縮小して表示』というのは当然ブラウザの仕事だ. ここで処理の方法に細かい差が出てきているのではないかな?と 推測してみた. 元の大きな画像を該当ブラウザでwidth/heightをいじらないで見たときになめらかな感じになってるか? なってたら縮小するまでもなく画像表示のエンジンの差になっちゃうけどね. 『画像を縮小して表示』するにはいくつか方法がある. 簡単なのは画素を間引くことだ. 赤緑青赤と4つの画素があった場合に半分にしたいなら 2番目と4番目の緑赤を抜いてしまえば赤青と二つだけになる(別に 1番目と3番目を間引いてもいいんだけど). こういうのを縦横に行えば 小さな画像になることはわかるだろう. 他にもまわりの画素の平均をとってみたりという処理も出来る. 1番目(赤)と2番目(緑)の間なのでこんな色になって同じように3番目(青), 4番目(赤)の間で こんな色になるのかな? もちろん平均取ったりってのはもっと賢い方法が沢山あるし, 他にも縮小する方法はある. でも 縮小するときの方法でもいくつかあるのがわかると思う. んでもって この方法が各ブラウザで異なる, と推測してみたわけだ. どうだろ? あたってるかな?まぁ 実際にこの現象がこんな理由で起ってるとしたら, 画像を適切なサイズにするっつーのは速度などの問題だけでなく見え方にも影響してくるってことになるよね. 重いでしょ?といってもピンと来ない人への説明にいいかな~って.でもなー, FirefoxでOSが違うと変わるってことあるのかな? いや, あるかもしれないけど, 画像まわりのエンジンがOS依存(OSのlibraryとか見てたりする?)ってこと? バージョンの違いかもしれないけど. source見ればいいのかもしれないけど, なんかあれなので誰か気が向いたら検証してくれるとうれしいなっと(笑)てか該当ブラウザを持ってればすぐにでも検証できるんだけどね:-p