14

Google PageSpeedでテストページを実行すると. たとえば、スケーリングされた画像を提供するなどのいくつかの警告が見つかりました..

 http://man-vimal.net78.net/introduction/?intro/action=main

THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).

拡大縮小された画像とは何ですか?どうすれば修正できますか??

4

5 に答える 5

21

スケーリングされた画像は、表示されるサイズに合わせてスケーリングされた画像です。

http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).

これは、ソース画像が 367x367 であるにもかかわらず、20x20 で表示していることを示しています。

ブラウザーは大きな画像をダウンロードしてから再スケーリングする必要があるため、非効率的です。367x367 の画像は、20x20 の画像よりも 140kb 大きくなります。

これを修正するには、(Photoshop、プレビューなどで) 画像のサイズを変更して 20x20 にし、現在提供している画像の代わりにその画像を提供します。

于 2013-01-19T07:25:52.473 に答える
3

画像が大きすぎます。サイズを変更するだけです。ペイントを使用してそれを行うこともできます。スケーリングされた画像は、基本的にサイズ変更された画像です。

于 2013-01-19T07:23:47.767 に答える
2

典型的な状況は、幅が 400px の画像があるとしますが、それがレイアウトに収まらないため、スタイル シートに移動して次のように記述します。

img { width: 300px; }

ここでは、CSS を使用して画像のサイズを変更しました。しかし、まだ 400 ピクセルのサイズで画像を提供し、画像を縮小しています。

ここでの意味は、400 ピクセルの画像を使用するのではなく、必要なサイズの画像を使用する必要があるということです。これは、ファイル サイズが小さくなり、ページの読み込みが速くなるためです。

于 2013-01-19T07:25:57.293 に答える
2

たとえば、Web サイトのユーザーがサイズ 400px x 400px の画像をアップロードし、この画像をサムネイルとして使用する場合、html/css を使用して 40px x 40px とします。

Web ブラウザーは、大きい方の画像をダウンロードして、小さい方のサイズに計算する必要があります。この問題を解決する最善の方法は、「ユーザーが画像をアップロードしたとき」など、画像の個別のコピーを作成し、それを直接使用することです。

そのため、Web ブラウザーは非効率的に画像を縮小する必要はありません。

これが役立つことを願っています。

于 2013-03-03T21:01:42.167 に答える