html - 什么是缩放图像以及如何在网页中提供缩放图像?

标签 html css

当我在 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/

相关文章:

php - 如何使用javascript获取密码字段值?请帮帮我,我从早上就被困在这个问题上

javascript - 获取光标附近文本的父元素-插入符

c# - 如何在不指定节点名称的情况下遍历所有节点

css - 如何在 asp.net core 中使用 .less 文件?

javascript - 单击滚动 spy 链接时折叠 Bootstrap 汉堡菜单

php - 自定义 wordpress 主题以包含新的小部件层

HTML 表格列重叠

html - 获取表单中的 polymer 纸列表选定项值

javascript - html/javascript 中的图像生成器问题

html - 流体柱和固定缓冲柱 - 如何使用 css 使它们的高度等于流体柱?