什么是缩放图像？如何在网页中提供图像？

Question

我在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).

什么是缩放图像,我该如何解决这个问题？

Answer 1

缩放图像是已缩放以匹配其显示大小的图像.

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并提供一个而不是您当前正在服务的图像.