成都航院计算机工程系教过先森网页样式代码CSS,但是正如先森对大学的领悟“大学是一个真正让你体会什么叫做‘师傅领进门 修行靠个人’的地方”一样,老师教的毕竟是基础,不可能面面俱到。实践出真理,先森渐渐也摸索出了一些对于网站上图片的宽width和高height的一些心得。
先森的网站上用的是百度UEditor编辑器,先森一直觉得这个编辑器很好用,但是还是有些小毛病,需要我们自行改造插件。其中一个问题,就是UEditor在上传图片的时候,会设置两个图片的宽高属性:
<img width="***" height="***" style=="width=***px;height=***px;" />
这样看着是没有什么问题的,但实际使用起来却产生了在移动端图片无法自适应的问题:高度操持不变,宽度自适应。这就导致了图片拉伸。先森当初也是到处寻求帮助,最终自己检查出来的。
图片被拉伸
当然,这最终被先森解决了。关于更多百度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测评优化
而且先森这一点的得分是0分,是在有点郁闷,看来图片width和height两个属性真的很重要。所以建议大家上该设置的还是设置上。至于设置的方法,可以参考上面给露兜大大留评论的那位仁兄的方法:
max-width: 100%; height: auto;
转载请注明出处来自https://www.capjsj.cn/gytpimgdwhdyxxd.html