Retina 対応のために img 要素の width, height 属性を再び付けるようにした

投稿

みなさんは img 要素に width, height 属性を付けていますか?

私は、ダイヤルアップ接続で画像を1枚1枚ゆっくり表示していた悠遠の時代は書いていましたが、ここしばらくはよほど重い画像をたくさん表示するページでもない限り、付けることはしていませんでした。

ところで、昨今は高解像度ディスプレイの普及に伴い、ウェブページに埋め込む画像も srcset 属性で高解像度版を用意したり、アイコン類は SVG にするなどの対応が求められるようになってきています。

その際、 Firefox において srcset 属性が設定された高解像度画像を横並びにすると、画像の右側におかしな空白が生じてしまいます。具体的にはこんなコード。

<style>
ul {
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  display: block;
}
</style>
<ul>
<li><img src="160x120.png" srcset="320x240.png 2x" alt=""/></li>
<li><img src="160x120.png" srcset="320x240.png 2x" alt=""/></li>
</ul>
サムネイル画像
Firefox 48 で srcset 属性が設定された画像を横並びにした例オリジナル画像

これは Flexbox で横並びにした例ですが、 display: inline-block や display: table-cell でも同様です。 Chrome や Edge では発生しないので Firefox のバグでしょう。

解決方法は簡単で、 img 要素に width, height 属性でサイズを指定すれば直ります。特定のブラウザのバグのために HTML に手を加えるという対応はあまり好きではありませんが、現状は仕方ありません。