web-dev-qa-db-ja.com

ブラウザのパフォーマンスを向上させるために画像の寸法を指定する

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

[ネットワーク使用率]で、[画像のサイズを指定]

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:

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

htmlimagesperformancepage-speed
10
FastElephant

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

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

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

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

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

このため、常に画像サイズを指定する必要があります。 Googleにはこれに関するヒントがあります。

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

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

これがどれだけ最新であるかはわかりませんが、ブラウザがどのように動作するのか、インラインCSSを使用してスタイルシートをオーバーライドしないなどのことをしたい理由についての洞察を提供します。

10
jeffatrackaid

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

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つの異なるバージョンの画像を提供する必要がありますが、これも実用的ではありません。したがって、レスポンシブデザインを使用している場合は、幅と高さの追加を気にせずに安全に進めて、どの画面を表示してもウェブサイトが流動的になるようにします。

5
Simon Hayter

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

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

また、ディメンションをハードコーディングすると、レスポンシブ動作が無効になります。レイアウトがレスポンシブでない場合は問題ありませんが、レスポンシブ性を維持したい場合は、CSSのみを使用して結果を得ることができます。

ほとんどの場合、widthとmax-width:100の両方を使用して作業を行いますが、Smashing Magazineの this post には興味深いテクニックがあります。max-width：100％を使用する代わりにパディングボトムハック：

「この手法では、幅に対する尺度として高さを定義します。パディングとマージンにはこのような固有のプロパティがあり、それらを使用して、コンテンツを持たない要素のアスペクト比を作成できます。 、要素の幅を基準にして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%;
}
2
Celso Bessa

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

  1. .htmlファイルを読む
  2. .htmlファイルヘッダーから、.css、.jsファイルを読み取ります（.jsは.cssの後にする必要があります...）
  3. ページからimgとスクリプトを読む

したがって、画像タグは「最新」に読み取られます。ただし、ページのフォーマットを計算するには、画像のサイズを設定するのが適切です（それ以外の場合、ブラウザーは、1x1、25x25などの「ランダムな」サイズを使用します。

したがって、画像が読み取られるまで壊れているように見えるページを避けるために、幅と高さの属性を設定すると、ブラウザーは適切なページレイアウトをすぐに計算できます。これは、同じサイズであっても、そこに配置することをお勧めする理由です。

1
Alexis Wilke