Html 什么是缩放图像以及如何在网页中提供图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14412099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is a scaled image and how do I serve one in a webpage?
提问by Vimal Basdeo
Whan I run a test page in google PageSpeed. I found a few warnings like for example serve scaled images..
当我在 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).
What is a scaled image and how can I fix this up ??
什么是缩放图像，我该如何解决？
回答by PassKit
A scaled image is an image that has been scaled to match the size that it is displayed.
缩放图像是已缩放以匹配其显示大小的图像。
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).
This is telling you that the your source image is 367x367 but you are displaying it at 20x20.
这告诉您源图像是 367x367，但您以 20x20 显示它。
It is inefficient because the browser has to download the larger image and then rescale it. The 367x367 image is 140kb larger than a 20x20 image would be.
这是低效的，因为浏览器必须下载更大的图像，然后重新缩放它。367x367 图像比 20x20 图像大 140kb。
To fix this, resize the image (in photoshop, preview, etc. ) so that is 20x20 and serve that one instead of the image you are currently serving.
要解决此问题，请调整图像大小（在 photoshop、预览等中），使其为 20x20 并提供该图像而不是您当前提供的图像。
回答by Rachel Gallen
your images are too big. just resize them. you can even use paint to do that. a scaled image is basically a resized image.
你的图片太大了。只需调整它们的大小。你甚至可以用油漆来做到这一点。缩放图像基本上是调整大小的图像。
回答by nickcoxdotme
The typical situation is that, say you have an image with a width of 400px, but it doesn't fit in your layout, so you go to your style sheet and write:
典型的情况是，假设您有一个宽度为 400px 的图像，但它不适合您的布局，因此您转到样式表并编写：
img {
width: 300px;
}
img {
width: 300px;
}
Here, you've resized the image with CSS. But you're still serving the image at a 400px size and scaling the image down.
在这里，您已经使用 CSS 调整了图像的大小。但是您仍然以 400 像素大小提供图像并缩小图像。
The implication here is that, rather than using the 400px image, you should use the image sized the way you need it because the file size will be smaller, and thus the page will load faster.
这里的含义是，与其使用 400px 图像，不如使用您需要的图像大小，因为文件大小会更小，因此页面加载速度会更快。
回答by cwiggo
For example, if a user of a website uploads an image of size 400px x 400px and you use this image as a thumbnail say 40px x 40px using html/css.
例如，如果某个网站的用户上传了一张大小为 400px x 400px 的图像，而您将此图像用作缩略图，则使用 html/css 说 40px x 40px。
The web browser has to download the larger image and compute it to the smaller size. The best way to solve this problem is to make a distinct copy of the image, say 'when the user uploads the image' and then use it directly.
Web 浏览器必须下载较大的图像并将其计算为较小的尺寸。解决此问题的最佳方法是制作图像的不同副本，例如“用户上传图像时”，然后直接使用它。
So the web browser does not have to inefficiently scale down the image.
因此，Web 浏览器不必低效地缩小图像。
I hope this helps.
我希望这有帮助。
回答by Nadeem Khan
A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.
缩放图像是大小与 CSS 或 HTML 中定义的大小完全匹配的图像。
If your original image called twitter-logo.png is of lets say 300 x 250 dimension but the dimension defined in the HTML statement is:
如果您的原始图像名为 twitter-logo.png 的尺寸为 300 x 250，但 HTML 语句中定义的尺寸为：
<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">
then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500
然后浏览器将首先下载原始图像（尺寸为 300 x 250），然后调整其大小以匹配 HTML 语句中定义的尺寸。即 600 x 500
This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.
在 HTML 或 CSS 中调整图像大小会大大减慢整个页面的渲染速度，应该避免。
To resize images (and to optimize them losslessly) you can use a free software called RIOT(available only for Windows).
要调整图像大小（并无损地优化它们），您可以使用名为RIOT（仅适用于 Windows）的免费软件。
