HTMLの画像に幅と高さの属性を指定することはまだ適切ですか？
私は ここで同様の質問 を見つけました。答えは「常にイメージタグで幅と高さを定義する必要があります。 」しかし2009年からです。
その間に、フロントエンドで多くのことが変更されました。現在、多くのデバイスとサイズ（モバイル、タブレット、デスクトップ...）でレスポンシブページのデザインを行っています。
それで、幅と高さの属性を指定する必要があるのか、そしてどのような理由で（レスポンシブ、ページ速度、SEO ...）？
img要素には幅と高さの属性がありますが、DOCTYPEでは必須ではありません。
幅と高さの属性は、ページ上のスペースを予約し、ロード時にページが移動しないようにするために「必須」または適切であるだけであり、これは重要です。これは、CSSを使用する代わりにCSSを使用して実現できます。CSSが十分に速くロードされるため、とにかく画像の前にロードされる可能性が高いので、すべて良好です。
幅または高さの1つの属性のみを指定することも可能であり、有効です。ブラウザは、正しいアスペクト比を維持するために省略された値を計算します。
必要に応じて、属性にパーセント値を指定できます。 CSSを使用する必要がない場合は、CSSを使用する必要があります。
また、追加することも重要です-HTML5では、幅と高さはピクセル値、つまり有効な負でない整数のみを取ることができます。
幅と高さの属性を使用するかどうかは、デザインによって異なります。さまざまなサイズの画像がたくさんある場合、CSSのすべての寸法を一括しますか、それともimgに含めますか？
はい、2016年に画像の幅と高さを宣言します。
- 網膜に対応させるには
画像を網膜対応にする場合は、実際のピクセルよりも低い幅と高さを定義する必要があります。画像が800x600の場合は、<img width="400" height="300" />を指定します。
- ページジャンプを回避するには
幅と高さがなければ、画像はその大きさを認識できません。これにより、ページが読み込まれる（リフローする）ときに、ページに不要なジャンプが発生します。高さと幅を宣言すると、この問題が解決します。
ご了承ください：
- 幅と高さが定義されている画像でも、反応がよくなります。 CSSに
max-widthとmax-heightを追加するだけです。これにより、画像が画面に収まらない場合、画像が縮小されます（拡大されません）（ この甘いRetina対応の応答性の高い子猫を参照 ）。min-widthとmin-heightを定義すると、その逆になります。 - すべての画面サイズに単一の（比較的大きな）画像を使用する場合は、JPGに大量の圧縮（約50％）を追加してファイルサイズを低く保つことをお勧めします。
さて、この質問に対する基本的な答え（ほとんどのコーディングの問題と同様）は次のとおりです：状況によって異なります
画像のheight属性とwidth属性を常に指定する「ベストプラクティス」は、ページのレンダリング速度に大きな違いをもたらし、デザイナーがテーブルとスペーサーGIFを使用してWebサイトをレイアウトした時代を思い出させます。それ以来、私たちは長い道のりを歩んできました。
将来の兆候は、HTMLに作成される新しいpicture要素の導入です。 picture要素は事実上、既存のimg要素のラッパーであり、source要素を介してサイズの異なる複数の画像を指定でき、ユーザーエージェント自体が実際に使用するバージョンを決定します。
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
上記のコード例（HTML5のpicture要素に関する Intel Developer Zoneの記事 から取得）からわかるように、height要素自体にはwidthまたはimg属性はありません。
以下は、画像サイズを宣言する最も適切な方法を決定するのに役立つリソースの選択です。
レスポンシブについて話している場合は、bootstrapを使用できます（そうでない場合は、これを開始してください）。画像を操作する場合は、img-sensitiveクラスを追加する必要があります。必要に応じて画像の高さを自動調整するため、幅が狭くなると高さも低くなります。
常にコンテナの％を維持する画像があり、アスペクト比が失われることはありません。
SEOや画像サイズの宣言とは関係ありません。ページ速度は常に同じであるため、画像が800 x 600ピクセルの場合、たとえ60 x 40ピクセルと宣言しても、画像全体が読み込まれます。
Imgレスポンシブを使用しても、この画像の最大の幅と高さは画像の実際のサイズになると考える必要があります。したがって、800 x 600 pxの画像がある場合、画像は拡大されません（品質が低下するため）。
したがって、2016年には、画像の高さと幅を宣言しないことをお勧めします。代わりに、ブートストラップのimg応答クラス、同じ結果を取得する他の応答フレームワーククラスを使用するか、適切なjqueryとcssを手作りして同じに到達します。
それが役に立てば幸い！
良い基準は常に推奨に値します。少し余分なコードを使用すると、imgタグの静的（px）値とCSSによって提供される一般的な（em、％）値をマージするのが非常に簡単になります。さらにシンプルな方法として、imgタグを完全に削除し、一意のIDを持つdivの背景として画像を設定します。複数の画像がある場合は、スプライトを使用して、各画像を対応するdivに割り当てます。マークアップソースは<div id="image_001"></div>のようになります-これですべてです。すべてを単独でスケーリングします。 JQueryなどのブロートウェアは必要ありません。
はい、HTMLの画像に幅と高さの属性を指定することは引き続き適切です。
画像は多くの場合、ページの残りの部分を構成するHTMLコードよりもロードに時間がかかります。したがって、画像のサイズを指定して、ブラウザがページ上の残りのテキストをレンダリングすると同時に、まだ読み込まれている画像用に適切なスペースを確保できるようにすることをお勧めします。
したがって、画像に幅と高さの属性を指定すると、読み込みの遅延から保護されますウェブページのパフォーマンスが向上します。