イメージのサイズはhtmlで指定する必要がありますか？

私はWordpress Stack ExchangeやWebmaster Stackの同様の質問に答えました。私はここにそれを掲示して、より多くの人々を明確にし、助けることを意図しています。 （管理者/モデレーター：許可されていない場合は、適切な方法を教えてください）。

実際には、htmlに幅と高さを指定する必要はありません。それが意味することは、あなたが適切なスペースを確保しなければならないことと、画像がロードされると、ブラウザはページをリフローして再ペイントする必要がないということです。

     

また、ディメンションをハードコーディングすると、応答するビヘイビアを破ることができます。あなたのレイアウトが応答していない場合、それは問題ありませんが、応答性を維持したい場合は、CSSだけを使用して結果を得ることができます。

     

ほとんどの場合、widthと max-width：100 の両方を使用して作業しますが、      

次のステップは、コンテナ内に画像を配置し、コンテナをいっぱいにすることです。これを行うには、イメージをコンテナ内に絶対配置する必要があります。例： "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

はい、まだ好ましいです。

人々の多くは高速接続ではなく、モバイルがより一般的になりつつあります。

常にそのCSSを使うのがベストです

このように画像の高さと幅をハードコードすることができます

.myimg img {
width: 10px;
height: 10px;
}

あなたの画像ファイル自体は、あなたが特に遅いローディングについて心配している場合には、ほとんどの場合、あなたが表示したいサイズでなければなりません！あなたが500X800のpx画像を持っていれば、100X200として表示したいだけです。ファイルサイズがはるかに小さくなり、読み込み速度が速くなります:)

それはインラインである必要はありません - あなたは外部CSSでそれを行うことができます。古いブラウザの中には、サイズを指定しないと、それを0pxとして扱うものもあります。

画像が読み込まれなかった場合や文書の読み込み中に空白が含まれていることを確認したい場合は、「はい」と答えます。しかし、ブラウザでの不必要な負荷や画像の歪みなど、これらの属性を使用して画像を拡大縮小/サイズ変更する場合は不要です。

クロスブラウザとの互換性を考慮して設計している場合は、イメージ自体のCSSの高さと幅を少なくとも指定する必要があります。 FireFox、IE、Operaなどのサイズが画像専用に指定されていないと、不一致が見つかりました。異なるバージョンについて言及することなく、各ブラウザがHTML標準への順守を異なるように扱うという事実のために、私は、一部のブラウザではHTMLデザイナーの意図を推定するのに最善を尽くしますが、他の人は最初のエラーでうんざりすることがわかりました。タブレットなどのモバイルデバイスからウェブサイトを表示する場合は、ピクセルまたは％のサイズではなくemサイズをお勧めします。しかし私は、HTML5で遊んで始めたので、画像に関してHTML5の違いはありません。