当我在 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).
什么是缩放图像,我该如何解决这个问题??
最佳答案
缩放图像是经过缩放以匹配其显示尺寸的图像。
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 并提供该图像而不是您当前提供的图像。
关于html - 什么是缩放图像以及如何在网页中提供缩放图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14412099/