IMG要素のサイズ変更の落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　IMG要素には表示する画像ファイルの幅を指定するwidth、高さを指定するheightという属性がある。この属性で画像の拡大、縮小表示をすることができるが、ここで注意をしなければならないことがある。

　たとえばwidth属性で300×300ピクセルの画像を100×100ピクセルに指定したとする【1】。この場合表示サイズは小さくなったが、元の画像の容量が変わったわけではないので、表示速度は元の大きさのときと変わらない。しかもユーザー側に「小さい画像なのに表示速度が遅い」という印象を与えてしまうだろう。また、無理やりサイズを変更しているので、画像の見た目もきれいではなくなってしまう。

　画面に表示する画像データのサイズを変更する場合は、width、height属性でサイズ指定をするのではなく、グラフィックソフトできちんとしたデータをつくり直そう【2】。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）