ブラウザのパフォーマンスを向上させるための画像サイズの指定

最近、Google Developer Toolsを使用して自分のWebサイトで監査を実行しました。私の画像はすべて同じサイズ（水平500 x垂直300ピクセル）なので、すでに正しいサイズの場合は画像サイズを計算する必要がないため、画像サイズ属性を省略したほうがよいと思いました。

[Networking Utilization]で、[Image Dimensions]を指定します。

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

今、私は混乱しています。すでに適切なサイズであるにもかかわらず、実際に画像に幅と高さの属性を追加する必要がありますか？冗長なようです。

ブラウザーは並行してデータをダウンロードし、できるだけ早くページのレンダリングを開始しようとします。

サイズを指定しない場合、イメージのダウンロードが完全に完了するまで、ブラウザはイメージの大きさを認識しません。

この遅延により、ブラウザは強制的にレイアウトを再描画またはリフローし、ページの読み込み時間を遅らせます。

この問題のある画像が多いほど、ページの読み込みが遅くなります。

HTMLまたはCSSで画像サイズを指定すると、ブラウザはコンテンツの再描画とリフローを回避できます。

このため、常に画像サイズを指定する必要があります。Googleはこれに関していくつかのヒントを持っています。

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

ブラウザのレンダリングプロセスの詳細については、http：//taligarsiel.com/Projects/howbrowserswork1.htmを参照してください。

これがどれだけ最新かはわかりませんが、ブラウザの仕組みや、インラインCSSを使用してスタイルシートをオーバーライドしないなどの理由を理解するのに役立ちます。

レスポンシブデザインは通常、幅や高さの属性を使用しません

Google開発ツールはガイドであり、サイトで読んだすべてを強制する必要はありません。実際、一部のものは古くなっています。レスポンシブウェブサイトの大部分は使用しないwidthかheight、画像を画面サイズに合わせる必要があり、<img>ユーザーエクスペリエンスを低下させる固定幅と高さを使用するため、Googleはこれを最も重要な要素の1つと宣言しています。

CSSの回避策

幅と高さのあるブロックレベルの要素を使用することもできますが、個人的には使用しませんが、Googleがブロックレベルについて述べていることは次のとおりです。

必ず画像要素またはブロックレベルの親に寸法を指定してください要素自体またはブロックレベルの親に寸法を設定してください。親がブロックレベルでない場合、寸法は無視されます。直接の親ではない祖先に次元を設定しないでください。

これは次のようになると思います：

静的設計 .ic {width:500px;height:500px;}

レスポンシブデザイン：

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

次に、JavaScriptまたは別のソリューションを使用して視点を検出し、4つの異なるバージョンの画像を提供する必要がありますが、これも実用的ではありません。したがって、レスポンシブデザインを使用している場合は、安全に先に進み、幅と高さを追加しないで、どの画面で表示してもWebサイトが滑らかになるようにします。

Wordpress Stack Exchangeで同様の質問に答えました。ここに再投稿します（管理者/モデレーター：これが許可されていない場合は、適切な支援方法を教えてください）。

HTMLで幅と高さを指定する必要があるという意味ではありません。つまり、適切なスペースを予約する必要があり、画像が読み込まれたときに、ブラウザがページをリフローして再描画する必要がないということです。

さらに、ディメンションをハードコーディングすると、応答性の動作に悪影響を及ぼします。レイアウトがレスポンシブでなくても問題ありませんが、ある程度のレスポンシブ性を維持したい場合は、CSSのみを使用して結果を得ることができます。

ほとんどの場合、両方の幅を使用max-width:100して機能しますが、Smashing Magazineのこの投稿には興味深いテクニックがあります。max-width：100％を使用する代わりに、Padding-Bottom Hackを使用できます。

「この手法では、高さを幅に対する尺度として定義します。パディングとマージンにはこのような固有のプロパティがあり、それらを使用して、コンテンツが含まれていない要素のアスペクト比を作成できます。パディングにはこの機能があるため、padding-bottomを要素の幅に相対的に設定できます。高さも0に設定すると、希望どおりの結果が得られます。[...]

次のステップは、コンテナー内に画像を配置し、コンテナーが画像でいっぱいになることを確認することです。これを行うには、次のように、画像をコンテナ内に完全に配置する必要があります。」

.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%;
}

プロセスは次のようになります。

1. .htmlファイルを読み取る
2. .htmlファイルヘッダーから、.css、.jsファイルを読み取ります（.jsは.cssの後でなければなりません...）
3. ページから画像とスクリプトを読み取る

したがって、イメージタグは「遅い」と読み取られます。ただし、ページのフォーマットを計算するには、画像のサイズを設定することをお勧めします（それ以外の場合、ブラウザは、プログラムされている1x1、25x25などの「ランダムな」サイズを使用します）。

したがって、画像が読み込まれるまでページが壊れてしまうのを防ぐために、width属性とheight属性を設定すると、ブラウザーは適切なページレイアウトをすぐに計算できます。これが同じサイズであっても、そこに置くことをお勧めする理由です。