Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。
|
IMG要素のサイズ変更の落とし穴 |
IMG要素には表示する画像ファイルの幅を指定するwidth、高さを指定するheightという属性がある。この属性で画像の拡大、縮小表示をすることができるが、ここで注意をしなければならないことがある。
たとえばwidth属性で300×300ピクセルの画像を100×100ピクセルに指定したとする【1】。この場合表示サイズは小さくなったが、元の画像の容量が変わったわけではないので、表示速度は元の大きさのときと変わらない。しかもユーザー側に「小さい画像なのに表示速度が遅い」という印象を与えてしまうだろう。また、無理やりサイズを変更しているので、画像の見た目もきれいではなくなってしまう。
画面に表示する画像データのサイズを変更する場合は、width、height属性でサイズ指定をするのではなく、グラフィックソフトできちんとしたデータをつくり直そう【2】。
【1】width、height属性でサイズ指定したもの。画像があらく見える
【2】グラフィックソフトでデータをつくり直したもの。【1】と見比べてみよう
解説:横山 剛
(※本文中、及びキャプション内で使用している「<」、「>」は、全角になります。ご注意ください。)