こんにちは！Ateam LifeDesign Advent Calendar 2025 12日目を担当します、加能です。
これは何？
加能は上記の記事を書いてから、width, height 属性に小数点はNGだぜ！と常々頭にあったのですが……
その後「小数点がダメなのはわかった！ けど、結局、元々の画像のサイズ？実際にレンダリングされた後の画像サイズ？どの値を書いたらいいの〜？」 となってしまったので、自分なりに調べました。
結論
アスペクト比が正しければ、どの値でも正解です。
つまり、例えば 1200px * 600px の画像があった場合、
- 元の画像サイズ：
<img width="1200" height="600" ...> - 実際に描画されるサイズ：
<img width="400" height="200" ...> - アスペクト比：
<img width="2" height="1" ...>
上記、どれを書いても元の画像は劣化せずに、正しく描画されます。
実際に試してみた
See the Pen Untitled by 加能 (@YukoKano) on CodePen.
上記を見る限り、画像が劣化しているなどは起きていないかと思います。
ただしアスペクト比は正しいものであるべき
imgタグの width , height 属性は、レイアウトシフトを起こさないようにするために使用されています。
画像を読み込む前にブラウザーが画像のアスペクト比を計算することができるようになります。
このアスペクト比は、画像を表示するために必要な空間を確保するために使用され、画像をダウンロードして画面に表示したときのレイアウトのずれを縮小したり、防止したりすることができます。
そのため間違ったアスペクト比を使用すると、レイアウトシフトが起こる原因になります。
まとめ
アスペクト比が正しければ、どの値でも大丈夫です。
しかし、
- 表示するサイズを使用する：小数点以下が発生することもある
-
width,height属性が小数点NGであるから、繰り上げる？切り捨て？と考える必要がある
-
- アスペクト比を入れる：毎回計算するのは手間
という懸念を踏まえると、
「元の画像サイズを小数点にならないように書き出し、元の画像サイズを width, height 属性に入れる」 というのが、ミスが一番起きづらいのかな〜と思っています。
めっちゃ初歩的な話ではありましたが、自分で試して理解できてよかったです。
参考