成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

经验杂笔

分段图

最新文章

经验杂笔
当前位置: 首页 » 大学杂谈 » 经验杂笔 » 关于图片img的width和height的一些心得

关于图片img的width和height的一些心得

编辑:狂族晨曦 来源:经验杂笔 日期:2016-04-03 阅读: 921 次 抢个沙发 百度已收录

成都航院计算机工程系教过先森网页样式代码CSS,但是正如先森对大学的领悟“大学是一个真正让你体会什么叫做‘师傅领进门 修行靠个人’的地方”一样,老师教的毕竟是基础,不可能面面俱到。实践出真理,先森渐渐也摸索出了一些对于网站上图片的宽width和高height的一些心得。

先森的网站上用的是百度UEditor编辑器,先森一直觉得这个编辑器很好用,但是还是有些小毛病,需要我们自行改造插件。其中一个问题,就是UEditor在上传图片的时候,会设置两个图片的宽高属性:

<img width="***" height="***" style=="width=***px;height=***px;" />

这样看着是没有什么问题的,但实际使用起来却产生了在移动端图片无法自适应的问题:高度操持不变,宽度自适应。这就导致了图片拉伸。先森当初也是到处寻求帮助,最终自己检查出来的。

图片被拉伸 -1

图片被拉伸

当然,这最终被先森解决了。关于更多百度UEditor编辑器的内容,先森也为大家分享了:

好了,上面说多了。其实本文中主要说的不是后面的style中的宽高,而是前面的img标签中的宽高。

这个宽高之前先森是没有怎么注意的,认为先森已经在CSS中设置了图片的宽高,这个宽高就没必要设置了。相信很多站长和先森的想法是一样的。但是先森看了露兜的一篇文章之后改变了这个看法。

童鞋们可以先去看看w3school中对img标签的说明:

w3school详细介绍了img标签中width和height两个属性的重要性。先森看中的其实是露兜文章中一个评论的解释。关于这篇文章,大家也可以去看看,露兜大大也对这条评论做了着重推荐:

而先森看中的评论内容则如下,是一个ID为“于江水”的哥们写的:

“这样做从前端的角度来说是不合理的。

img 的 alt 属性是必须的,width 和 height 是推荐的。因为 img 在网页的加载是要比 div 这些结构慢的,所以往往是结构和文字先加载了,再加载的图片。这时候,由于浏览器预先不知道图片的尺寸大小,所以无法渲染图片在网页中的位置和尺寸。等图片加载进来之后,再进行渲染,这时候就产生重绘(就是浏览器重新计算相关元素的位置,具体表现就是图片出现了,图片下面的文字跑到下面了,淘宝的商品介绍页面,这里非常明显。)

而带有 width 和 height 的 img,浏览器会计算出来,留空,然后等待图片加载,避免页面重绘,提高前端性能和用户体验,这里在知乎上多图的答案可以看出来。

那么回到露兜大大在乎的响应式的图片处理。这里应该对 img 设置 max-width: 100%; height: auto; 这两条属性,才可以保证成比例拉伸。”

总结起来也就是设置了width和height两个属性后,浏览器会给没加载出来的图片留出应有的位置。初看这个观点的时候,先森虽然知道了,但也没有重视。所以,也就在网站改版的时候没给图片加width和height两个属性。

先森在改版后,又加入了CDN,在GTmetrix测试网站的时候,结果第一条优化建议就是给图片指定尺寸(点击放大):

GTmetrix测评优化 -2

GTmetrix测评优化

而且先森这一点的得分是0分,是在有点郁闷,看来图片width和height两个属性真的很重要。所以建议大家上该设置的还是设置上。至于设置的方法,可以参考上面给露兜大大留评论的那位仁兄的方法:

max-width: 100%; height: auto;

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共1597个字
转载请注明出处来自http://www.capjsj.cn/gytpimgdwhdyxxd.html
已有 0 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
匿名的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
官方微信
发表评论 返回顶部