画像を設置する IMG

ページ内に画像を配置するにはIMGタグを使います。

<img src="画像のパス" width="横幅(ピクセル)" height="縦幅(ピクセル)" alt="画像が表示できないときの代替テキスト" />

<IMG> 画像を表示する
 [参考記事] リンクなどのパスの指定

width属性、height属性による画像サイズ

width属性、height属性による画像サイズの指定を行わなかった場合、画像を読み込んでから画像領域の大きさが確定するため、ページ読み込み中のブラウザ表示が綺麗ではありません。
回線速度の遅いモバイル環境では顕著に影響されます。
特にauのガラケー携帯では、かなりガクガクします。
width属性、height属性は指定するようにしたほうがいいです。

また画像ファイルのサイズとwidth属性、height属性の値が違う場合には拡大縮小がされますが、この拡大縮小は間抜き、間補完によるものが一般的なので綺麗ではありません。
よほどの理由がないとき以外は画像自体のサイズを正しく作成するようにします。

[参考記事] VGA端末の画像表示対応
 [参考記事] 画像表示のときに指定サイズにリサイズする(画像の拡大縮小)

画像の種類

表示させるする画像は、画像形式の特徴を踏まえて利用するようにします。
[参考記事] JPEG画像の特徴
 [参考記事] GIF画像の特徴
 [参考記事] PNG画像の特徴

画像形式	JPEG	GIF	PNG
画質の劣化	不可逆圧縮	可逆圧縮	可逆圧縮
最大色数	約1678万色(24bit)	256色(8bit)	約1678万色(24bit) 約280兆色(48bit)
透過処理	不可	可能(1色)	可能(1色)
アルファチャンネル半透過	不可	不可	可能
アニメーション	不可	可能	不可 (APNG、MNGは可能)