HTML の画像に width 属性と heigth 属性を指定することはまだ意味がありますか? 質問する

HTML の画像に width 属性と heigth 属性を指定することはまだ意味がありますか? 質問する

私は見つけた同様の質問はこちら答えは「画像タグでは常に幅と高さを定義する必要があります」しかし、それは2009年のものです。

その間に、フロントエンドでは多くのことが変化しました。現在、私たちはすべて、多くのデバイスとサイズ(モバイル、タブレット、デスクトップなど)を同時に対象としたレスポンシブ ページ デザインを行っています。

では、幅と高さの属性を指定することがまだ必要なのか、またその理由は何なのか(レスポンシブ、ページ速度、SEO など)が気になります。

ベストアンサー1

要素imgには幅と高さの属性がありますが、どの場合でも必須ではありませんDOCTYPE

幅と高さの属性は、ページ上のスペースを予約し、ページの読み込み時にページが移動しないようにするためにのみ「必須」または関連しています。これは重要です。代わりに CSS を使用してこれを実現できますが、CSS の読み込みが十分速いことが条件です。いずれにしても、CSS は画像よりも先に読み込まれる可能性が高いため、すべて問題ないはずです。

幅または高さのいずれか 1 つの属性のみを指定することも可能です (有効です)。その場合、ブラウザは省略された値を計算して正しいアスペクト比を維持します。

必要に応じて、属性にパーセント値を指定できます。これが必要な場合は、CSS を使用する必要はありません。

また、次の点も追加する必要があります - HTML5 では、幅と高さにはピクセル値、つまり有効な負でない整数しか指定できません。

width 属性と height 属性を使用するかどうかは、デザインによって異なります。サイズが異なる画像が多数ある場合、すべての寸法を CSS にまとめるか、img に含めるかを検討してください。

おすすめ記事