什么是缩放图像，以及如何在网页上投放一个图像？ [英] What is a scaled image and how do I serve one in a webpage?

问题描述

Whan我在Google PageSpeed中运行了一个测试页面。
我发现了一些警告，例如服务缩放图像..

  http：//man-vimal.net78 .net / introduction /？intro / action = main 
 
结果如下：
以下图像在HTML或CSS中调整大小。提供缩放图像可节省449.3KiB（减少99％）。 
 http://man-vimal.net78.net/.../twitter-logo.png在HTML或CSS中从367x367改为20x20。提供缩放图像可节省140.9KB（减少99％）。 
 http://man-vimal.net78.net/introduction/views/images/fb.png将HTML或CSS的大小从1692x1,692调整为20x20。提供缩放图像可节省115.9KB（减少99％）。 
 http://man-vimal.net78.net/.../linkedin.jpg在HTML或CSS中从1,024x768调整为20x20。提供缩放图像可以节省99.6KB（减少99％）。 
 http://man-vimal.net78.net/.../panorama.jpg在HTML或CSS中从604x453调整为100x100。提供缩放图像可以节省81KiB（减少96％）。 
 http://man-vimal.net78.net/.../googleplus.jpg在HTML或CSS中从450x320改为20x20。提供缩放图像可以节省12KiB（减少99％）。 
  

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

解决方案

缩放图像是一个缩放后的图像，以匹配显示的图像大小。

  http://man-vimal.net78.net/.../twitter-logo.png在HTML或CSS中从367x367改为20x20。提供缩放图像可节省140.9KB（减少99％）。 
  

这是告诉你，你的源图像是367x367，但你显示的是20x20。 p>

效率不高，因为浏览器必须下载较大的图像然后重新调整它。为了解决这个问题，调整图像大小（在Photoshop中，预览等），使其尺寸为20x20，然后发送那一个，而不是你目前正在服务的图像。

Whan I run a test page in google PageSpeed. I found a few warnings like for example serve scaled images..

 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 ??

解决方案

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.

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.

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.

这篇关于什么是缩放图像，以及如何在网页上投放一个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！