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

我在谷歌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，并提供该图像，而不是当前提供的图像。

典型情况是，假设您有一个宽度为400px的图像，但它不适合您的布局，因此请转到样式表并编写：

img{
宽度：300px；
}

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

---

这里的含义是，与使用400px图像不同，您应该按照需要的方式使用图像大小，因为文件大小会更小，因此页面加载速度会更快。

例如，如果网站用户上载大小为400px x 400px的图像，而您使用此图像作为缩略图，例如使用html/css的40px x 40px

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

因此，web浏览器不必低效地缩小图像

---

我希望这能有所帮助。

缩放图像的大小与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语句中定义的尺寸。i、 e.600 x 500

在HTML或CSS中调整图像的大小会大大降低整个页面的呈现速度，应该避免

---

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

回答很好，但不实用，尤其是考虑到响应性网页设计。以引导为例，其所有列的大小都会根据视口宽度而改变。您的图像的最大宽度将设置为100%。我在现代网页设计中的观点是，你的图片总是会被调整大小和比例。没错，但请记住这只是一条警告信息。这条信息的精神是防止下载过大的图像。媒体CSS可能不完全符合您提到的场景，但符合为适当缩放的图像提供服务的精神。我有同样的问题，但我在网站中使用了两次图像，如果调整图像大小，在其他地方它的质量非常低。如何在不调整图像大小的情况下修复此问题忽略警告。浏览器将获得一次图像并重用它。重用非缩放图像比下载第二个缩放图像更有效。