优化浏览器渲染:指定图片尺寸

2016-02-20 00:30 7 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐优化浏览器渲染:指定图片尺寸,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

概述

为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面,使页面渲染速度更快。

详细信息

当浏览器勾画页面时,它需要能够流动的,如图片这样的可替换的元素。提供了图片尺寸,浏览器知道去环绕附近的不可替换元素,甚至可以在图片下载之前开始渲染页面。如果没有指定的图片尺寸,或者如果指定的尺寸不符合图片的实际尺寸,一旦图片下载,浏览器将需要reflows和重新绘制页面。为了防止reflows,在HTML的img标签中或在CSS中为所有图片指定宽度和高度。

建议

指定与图片本身相一致的尺寸

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素,不要在HTML或CSS里设置尺寸为30×30像素。如果图片需要较小的尺寸,在图像编辑软件中,设置成相一致的尺寸。

一定要指定图片或它的块级父元素的尺寸

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

一定要设置img元素本身,或它的块级父元素的尺寸。如果父元素不是块级元素,尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。

来源:http://www.tulaoshi.com/n/20160220/1631993.html

延伸阅读
标签: 浏览器
QQ浏览器怎么停用高速渲染插件   对于安装后不想使用该组件的用户,可以选择停用或者卸载该组件,停用或卸载时会重新加载已用该组件打开的网页:      注 :更多精彩教程请关注图老师电脑教程栏目,图老师电脑办公群:189034526欢迎你的加入
说到web性能,前端工程师很自然地反应是yahoo的30+条优化规则。这些规则可以将网页加载从原来的几秒甚至十几秒较少到3s甚至1s以内。当一个完整界面展现在用户眼前时,内容就通过不同的字体、图片以及多媒体传达给用户。使用户在1s内看到网页和使用户留在网页上几分钟甚至几十分钟同样重要。字体作为内容承载信息的重要部分,若使用不适当的字体...
标签: Web开发
原文:http://www.zishu.cn/blogview.asp?logID=773 最近很少写CSS了,以后也可能写的会很少了,所以还是想把自已的一些经验能和大家分享一下,希望能给大家一些帮助! 这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条。 1、*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的...
微信公众平台图片尺寸是多少?   微信公众平台的头像图片官方尺寸是360*200,小编建议最好的尺寸是200*200,毕竟手机可以随着图片的大小,200*200是最清晰的微信头像.方法如下所示: 1、登录您的微信公众平台,点击素材管理,选择多图文消息 2、一般官方建议的是360*200,但在手机微信上显示的图片会被标题挡住一部分,所以...
标签: word 压缩图片
Word 2007技巧:自动压缩图片尺寸 尽管用户可以在Word 2007文档中压缩所有图片或选中图片的尺寸,以减小Word文件的大小,但每次都执行压缩操作未免太繁琐。用户可以设置Word 2007图片压缩选项,实现在保存Word 2007文档时自动压缩图片尺寸的目的,操作步骤如下所述: 第1步,打开Word 2007文档窗口,选中任意图片。在打开的Word 2007...

经验教程

596

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部