YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Do not scale images in HTML

前端性能优化:Do not scale images in HTML

今天要介绍的YSlow前端性能优化规则是:Don’t Scale Images in HTML(在HTML代码中不要缩放图片)。

Don’t Scale Images in HTML

YSlow 文档对这个规则的介绍非常的简短:

Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.

虽然说明的文档不多,但是我这里还是要稍微深入的说明一下 Don’t Scale Images in HTML 的理由。YSlow 的文档的意思是你希望展现多大的图片,原始的图片大小就应该是多大,图片不要比期望的尺寸小,也不要比需要的尺寸大。

虽然我们可是使用CSS或者指定width和height来缩放图片的大小,让图片在展现的时候变成我们期望的大小,但这样做是会有性能损失的。例如,我们希望展示一个100X100大小的图片,而我们的原始图片只有80X80,虽然图片大小减少了,但是浏览器却需要时间等待图片完全下载完毕之后才知道图片的实际尺寸,然后才会判断图片是否满足设定的尺寸大小,如果大了就要缩小,如果小了就要放大,图片下载完毕之前,浏览器无法正确解析,而缩放图片也需要消耗资源,并且小图片放大,图片的清晰度就得不到保障了。

而如果原始的图片大于期望的尺寸,很明显就会额外花更多时间下载图片,浪费带宽,影响性能。只有在图片原始大小跟设定的大小相等的时候,浏览器在下载完图片后就可以马上渲染出图片,无需任何其它额外的计算,前端性能才是最好的。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Do not scale images in HTML

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)