YSlowルールの根底にある理由「画像をHTMLで拡大しないでください」

Question

YSlowで画像をHTMLでサイズ変更しないでください。彼らはこの規則の特別な理由について言及していない。任意のアイデア

Answer 1

帯域幅を無駄にするだけでなく、同時に2つのHTTP接続を制限すると、画像がダウンロードされている間にブラウザが他のコンポーネントを読み込むことができなくなるため、JavaScriptなどが多くかかることがあります処理に時間がかかります。

さらに、イメージのサイズを変更するクライアント側の処理時間は、CPUサイクルを使用してページのレンダリングを遅くします。あなたが考えるかもしれない高速デスクトップではそれほど悪くはないが、ページの読み込み時間に対する認識は1/10秒でさえ影響を受ける可能性がある（ポイント5 here - 100ms = Amazonの売り上げが1％減った参照）。モバイルデバイスは、プロセッサがそれほど強力ではないため、このようにサイズを変更する必要があるため、さらに深刻な影響を受けます。

YSlowを使用したすべてのことは、ユーザーのスピード感知の90％がサーバーからの読み込み時間ではなくクライアント側での処理であるということです。そのため、これについては非常に辛抱強くなります。

小さい画像では、画像のサイズが変更されてもCPUが無駄になります。そのため、さらに画像がぼやけて見えます。

Answer 2

高解像度の画像は、ブラウザで縮小すると悪く見えるだけでなく、不要な帯域幅を消費します。

Answer 3

主な理由は、画像を60x40で表示すると、より重い600x400の画像は必要ありません。

Answer 4

タイトルの下の説明を読む：

はあなたがHTMLで 幅と高さを設定することができますという理由だけで必要以上に大きな画像を使用しないでください。
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
イメージ（mycat.jpg）は、縮小された500x500pxイメージではなく 100x100pxである必要があります。

根拠はあなたがダウン画像をを拡大しようとしている場合は、その理由だけで最初の場所で小さな画像を使用しないということですか？

スケーリングについては言及していませんが、とは言いませんが、サイズを小さくするとイメージは小さくなりますが、スケールアップしても非常にうまく見えないため、お勧めしません。あなたが品質の低下に満足しているかのように、ファイルサイズの適切な節約を達成できるかのように、実験する価値があります。一般的に

Answer 5

：

1. あなたが実際にダウンロードしたファイルよりも、実際のサイズよりも小さいサイズを設定した場合はそれができるよりも大きくなります（それが不要なネットワーク負荷です）
2. あなたは本当のサイズよりも大きいサイズを設定した場合画像は、それが
3. する以上の価値になりますよりも、それはブラウザのCPU使用率

のための小さなオーバーヘッドは本当にあなたがそれを考慮しなければならないが、いくつかのケースでは、ブラウザ目で画像のサイズを変更する方が良いでしょうたくさんの画像を持っているか、サーバー側で準備しておいてください。

Answer 6

明らかに彼らは網膜のスクリーンを聞いたことがありません...あなたが網膜の解像度の画像を望むなら、それはピクセルの2倍のサイズである必要があります。したがって、100x100pxで表示される画像がある場合は、網膜スクリーンで鮮明に見るには200x200pxである必要があります。しかし、これ以上大きくするべきではありません。

ユーザーが網膜スクリーンを持っているかどうかを検出し、唯一の彼/彼女はそれを持っている場合、より大きな画像をロードするための多くの技術があります。

だから、私にとっても例外なく「画像は拡大縮小すべきではない」という一般的なルール（複数可）を設定しても意味がありません。..