画像の幅と高さ

必須の属性ではありませんがimg要素には画像の幅と高さを指定するwidth属性とheight属性が用意されています。

<img src="画像URI" alt="代替テキスト" width="幅" height="高さ" />

幅及び高さはピクセル単位、又はパーセントでサイズを指定します。ピクセルで指定する場合は単位は不用です。例えば120ピクセル×80ピクセルの画像の場合は次のように記述します。

<img src="file" alt="text" width="120" height="80" />

width及びheightは必須の属性ではないため省略された場合は画像が読み込まれた時点で幅及び高さを取得しそのサイズで表示が行われます。

幅及び高さで指定する値

画像本来の大きさで表示させるには画像の実際の幅及び高さを指定しますが、任意の幅や高さを指定すると指定したサイズに合わせて画像の大きさが変更されて表示されます。

200ピクセル×150ピクセルの画像に対して指定方法をいくつか試してみます。

幅及び高さを本来の数値で指定

この場合は画像が持つサイズそのままで表示されます。

<img src="./img/penguin.png" alt="画像テスト" width="200" height="150" />

幅か高さのいずれかを任意の値で指定

幅か高さのどちらかだけを任意の値で指定した場合、指定された幅又は高さは指定した値となり、指定されなかった幅又は高さは幅と高さの比率が変わらないように自動的に調整されます。

<img src="./img/penguin.png" alt="画像テスト" width="100" />

幅及び高さをどちらも任意の値を指定

幅と高さを任意の値で指定した場合、本来の幅と高さの比率に関係無く画像の幅と高さは指定した値に変更されます。

<img src="./img/penguin.png" alt="画像テスト" width="100" height="120" />

いずれの場合であっても使用される画像ファイルは同じです。その為、縮小して表示する場合であればあらかじめ縮小した画像を用意した方が画像ファイルが小さくなり描画も早くなります。

width属性とheight属性を指定すべきか

画像を本来の大きさで表示させる場合には幅や高さをあえて指定する必要はありませんがimg要素に関してはwidth属性とheight属性を指定するのが慣習となっています。

理由の一つはWebページの描画速度に与える影響です。幅や画像を指定していない場合は画像の読み込みが完了しない限り画像のサイズが確定せずWebページのレイアウトなどが決まりません。その為Webページの表示に時間がかかると言われています。また別の理由として幅や高さが指定の有無によって画像読み込みに失敗した場合のレイアウトに違いが出るブラウザもあるようです。

逆にwidth属性やheight属性を指定しない場合には、画像を変更した時にもwidth属性などの修正は不要となりますし、現在のインターネット環境であれば画像読み込みに時間がかかることもないため気にする必要はないのではないかという意見もあるようです。

指定しないことによるメリットもありますがそれほど大きなものでもありません。現時点では色々な環境でWebページが閲覧される可能性のことを考えて幅と高さを指定しておくのがお薦めです。