WEBの散歩道

画像のサイズ指定、変更

ホームページ作成にあたって画像のサイズ指定（変更）はよくあることです。この場合、スタイルシートによる指定もありますが、簡単に画像サイズを指定（変更）する方法も便利です。この場合に調節するのが「width」と「height」です。

imgタグに「width=”"」「height=”"」を追加指定することで、画像サイズを指定（変更）することができます。

画像が、 <ｉｍｇ　ｓｒｃ=”ｓａｍｐｒｅ．ｇｉｆ” width=”300px” height=”300ｐｘ”>

であった場合、この画像サイズをそれぞれ半分の「150px」に変更（指定）する場合、次のように簡単に行うことができます。

<ｉｍｇ　ｓｒｃ=”ｓａｍｐｒｅ．ｇｉｆ” width=”150ｐｘ” height=”150ｐｘ”>

この方法で画像サイズを指定した場合、画像そのもののデータ量が変わるのではなく、データ量はそのままで「縮小する」ということになるので、画質が悪くなるケースがあります。

ただ、ホームページ編集の際に、商品画像など頻繁に取り替える要素がある場合や、それほど極端なサイズ変更でない場合などは、やり方が簡単なだけに多用する機会が多い方法です。

この場合の指定方法を整理しておくと、次のようになります。