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

典型的情况是，假设你有一个宽度为 400 像素的图像，但它不适合你的布局，所以你去你的样式表并写：

img { width: 300px; }

在这里，您已经使用 CSS 调整了图像的大小。但是您仍然以 400 像素的大小提供图像并缩小图像。

这里的含义是，您应该使用所需大小的图像，而不是使用 400px 的图像，因为文件大小会更小，因此页面加载速度会更快。

于 2013-01-19T07:25:57.293 回答
2

例如，如果网站的用户上传大小为 400 像素 x 400 像素的图像，并且您将此图像用作缩略图，例如使用 html/css 的 40 像素 x 40 像素。

Web 浏览器必须下载较大的图像并将其计算为较小的尺寸。解决此问题的最佳方法是制作图像的不同副本，例如“当用户上传图像时”，然后直接使用它。

因此，网络浏览器不必低效地缩小图像。

我希望这有帮助。

于 2013-03-03T21:01:42.167 回答
1

缩放图像是尺寸与 CSS 或 HTML 中定义的尺寸完全匹配的图像。

如果您名为 twitter-logo.png 的原始图像的尺寸为 300 x 250，但 HTML 语句中定义的尺寸为：

<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">

然后浏览器将首先下载原始图像（尺寸为 300 x 250），然后调整其大小以匹配 HTML 语句中定义的尺寸。即 600 x 500

在 HTML 或 CSS 中调整图像大小会大大减慢整个页面的渲染速度，应该避免。

要调整图像大小（并无损优化它们），您可以使用名为RIOT的免费软件（仅适用于 Windows）。

于 2014-06-25T11:36:00.513 回答