4

HTML レンダリングのパフォーマンスを向上させるために、画像のサイズ (高さ/幅) を常に定義するというYSlow の推奨事項を読み終えました。

ただし、リンクしている画像の寸法もわかりません。

私が知っていることは、heightが 200px を超えることはなく、widthが 300px を超えることも決してないということです。

（CSS）を定義した場合、私は利益になりますか：

img {max-height: 200px; max-width: 300px}

HTML パフォーマンス レンダリングの場合は?

4

5 に答える 5

9

いいえ、max-widthとmax-heightを設定してもパフォーマンスは向上しません。

画像の幅と高さを指定する理由は、ブラウザが画像が占めるスペースを正確に認識できるためです。画像サイズを指定しないままにすると、画像の読み込み時にブラウザがレイアウトをリフローする必要があります。

一部のページでは、この厄介な影響が見られます。最初にページが画像のプレースホルダーなしで読み込まれ、次にコンテンツがジャンプして画像の場所が読み込まれます。

一部の画像のサイズを指定できない場合でも、あまり気にする必要はありません。画像が読み込まれたときにレイアウトが適切に動作することを確認し、ジャンプしすぎないようにしてください。

于 2009-12-15T17:51:51.750 に答える
0

この場合、画像がどうなるかわからないため、画像の高さと幅を設定しません。サイズがどうなるかわかっている場合は、ページをレンダリングするときにブラウザーが行う必要がある再描画とリフローの量が削減されるため、設定は適切です。

実行する必要が少ないほど、クライアント側のパフォーマンスが向上します。これは、ブラウザーを過度に動作させないためです。

Stoyan Stefanov は、最近のブログ投稿で非常によく説明しています。

于 2009-12-18T14:24:31.840 に答える
0

max-height と max-width が設定さ<img>れた<span>or要素にそれをラップしたいと思います。<div>また、それ ( span または div ) には、画像が div の範囲外に出ないように、overflow:hidden を設定する必要があります。

これらの設定を画像に直接設定することは絶対にお勧めできません。ブラウザによってレンダリングが異なり、レンダリングが遅くなるからです。

于 2009-12-18T14:29:30.740 に答える
0

縦横比が異なる画像は、拡大縮小されるため見栄えがよくありません。これはお勧めしません。

于 2009-12-15T16:56:53.577 に答える
0

css で画像の最大の高さと幅を設定すると、制限に基づいて img タグが img のサイズを変更しますが、asp.net や php などのバックエンド スクリプト言語を使用している場合は、img ライブラリを使用して画像をスケーリングします。サーバー側は、ハードドライブに保存して後で使用するか、その場でサイズを変更します。

チェックアウトできますhttp://shiftingpixel.com/2008/03/03/smart-image-resizer/スターターとしての php 用

または、.NET を使用している場合は、このリンクを確認できます。http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx

于 2009-12-15T17:01:53.180 に答える