imgタグを使用して表示した画像の下には余分な余白ができてしまいます。
これは画像の下端がテキストのベースラインに合わせられることが原因です。

アルファベット小文字のgやy等で、ベースラインよりも下にはみ出す部分のことをディセンダー（descender）といいます。
このディセンダーは文字だけではなくimg要素にも適用されるので、画像の下に余白ができてしまいます。

ディセンダーはimg要素にvertical-align: text-bottom;
もしくはvertical-align: middle;を指定することで削除できます。

img
{
    vertical-align: text-bottom;
    vertical-align: middle;
}

ちなみに、img要素にmiddleを指定すると、画像の中心を小文字の「x」の中心に揃えることになる。