web-dev-qa-db-ja.com

幅および/または高さ属性の欠落について混乱

そこで、私は https://gtmetrix.com で自分のサイトをテストしました。

The following image(s) are missing width and/or height attributes.

画像自体がすでに正しい幅と高さを持っているので、私はこれに混乱しています。では、なぜこれらの属性を追加したいのですか？

imagesperformanceoptimizationtestingload-time
1
William Edwards

IMG SRC HTMLタグに高さと幅の属性を追加すると、ブラウザーは画像用に残すスペースを知ることができます。これらの値がないと、ブラウザは画像が読み込まれるまで画像にスペースを与えません。つまり、画像が読み込まれた後、画像を囲むものはすべて調整されます。 http://www.computerhope.com/issues/ch001158.htm

5
user29671

ブラウザはこれを要求しますパフォーマンス用。テキストの段落の左上隅に100x100ピクセルの画像があるとします。

  • ブラウザbuildsページ、画像はまだないので、テキストだけでビルドします
  • 画像が読み込まれ、突然必要なスペースがあります
  • ブラウザrebuilds画像用の適切なスペースがあるページ

画像に幅と高さを指定すると、次のようになります。

  • ブラウザbuildsページ、まだ画像はないがサイズがあるので、適切なクリアランスでそれを構築します。
  • 画像が読み込まれ、予約済みのホルダーに配置されます

再構築を保存します。再構築には少し時間がかかり、モバイルデバイスではに気付くことができます。また、モバイルデバイスで制限されているパフォーマンス、メモリ、およびCPUのコストもわずかです。上記の例では、画像は1つだけですが、20枚の画像がある場合、これに気付くでしょう。

トリッキーな部分は、応答性も必要な場合で、サイズを追加するのがあまり快適ではない場合があります。私は自分自身を制限せずにできるだけ多くを追加する傾向があります（例えば、高さ/幅のみ、時にはなし）.

4
Martijn

メッセージ...

The following image(s) are missing width and/or height attributes.

...は、イメージタグに幅と高さに割り当てられた値があり、イメージがロードされるまでプレースホルダーを構築するために使用されることを意味します。

画像のHTMLコードはおそらく次のようになります。

このHTMLを賢明に解決するには、画像に次のHTMLコードを使用します。

<img src="whatever.jpg" alt="picture of something" width="xxx" height="yyy">

Xxxとyyyを、画像の実際の幅と高さ（ピクセル単位）に置き換えます。間違った値を使用した場合、または値を省略した場合、ブラウザでさらに再描画が行われます。これは、素人の言葉では、ページが完全にロードされるまでの待ち時間が少し長くなることを意味します。

レスポンシブデザインのために画像を調整しようとしていて、JavaScriptを使用しても問題ない場合は、それを使用して画像タグを作成し、それに応じて画像のプロパティを設定してサイズを含め、画面上の別の要素に画像を添付します。開始に役立つコードを次に示します。

<div ID="box"></div>
<script type="text/javascript">
mywidth=100; 
myheight=100;
mypicture="some_image.jpg";
mainbox=document.getElementById('box');
i=document.createElement('IMG');
i.style.width=mywidth+"px";
i.style.height=myheight+"px";
i.src=mypicture;
i.alt="picture";
mainbox.appendChild(i);
</script>

Mypicture、mywidth、myheightの値を実際の画像自体のURL、および画像の正しい幅と高さに置き換えるだけです。

0
Mike