前端优化-Img与background
来源:互联网 发布:linux注册服务 编辑:程序博客网 时间:2024/05/16 05:18
当img 遇到 background,这个世界就是这么小~~~~~
1 从解析机制看
2 从SEO角度看
第一,图片比较大,或者用户网速比较窝火的时候,加载失败了,至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图,那就多刷几次去加载。另外,alt属性有利于辅助阅读,尤其是对盲人朋友,他们使用阅读器浏览页面,如果没有文本提示,就太不厚道了。
第二,alt属性有利于SEO,搜索引擎实现很好的图像识别还是有一段路要走。
第三,说说缺点,Img加载的图片是通过src拿到的,如果HTML代码不允许修改,那怎么换图,只有同名文件替换,但是有可能遇到304状态,需要服务器端做相应的设置。这时background的优点就出来了,换皮肤就是这个栗子。Img的另一个缺点是,显示区域空间大小的预留,图片必须和预留的空间一致,否则图片要么被拉伸要么被压缩,都不是等比例操作,设计师看到就吐血了,一个像素的差异都能找出来,伤不起的。当然,这种问题就是前端和视觉设计师必须遵守一定的规范。栅格化飘过~~~~~~
做SEO是最方便的还是background,图片是放在背景上的,前景写内容,两不误。如果不想让内容显示出来,就加text-indent, -99999你懂的。(以前有这种玩法,是搜索引擎算法单一的年代,关键字比重高排名就靠前)。
刚才提了一下bootstrap的background方法,bootstrap的做法是用background设置icon,icon的使用太灵活了,所以必须模块化,语义化先靠边站,鱼与熊掌不可兼得。其次icon的重要性真不高,放在最后加载还减少了带宽占用量,提高PV速度。img标签语义很明确不能乱用,所以bootstrap采用无语义的i标签来设置icon也挺好,但要注意无语义标签是否向前兼容,要关注HTML5中的定义。
3 语义化角度
建议:重要的需要优先加载的图片最好采用img。不重要的图片最好采用background。
转自:http://blog.sina.com.cn/s/blog_6722ab160101bnn7.html
- 前端优化-Img与background
- 前端优化-Img与background
- <img /> src 与 background
- 前端HTML<img>标签图像的属性和使用/图像img与背景background的区别
- Img与background的区别
- 浅析img与background-image使用技巧
- img vs background-img
- 改变背景图片background-img
- background-image 和 img
- 前端优化与实用工具
- 认真理解背景图片 background-img
- img和background的区别
- html中img标签显示图片属性写法与background差异
- 前端工程性能与优化
- 前端工程与性能优化
- 前端工程与性能优化
- 前端工程与性能优化
- 前端工程与性能优化
- 【详解】Python建立Map写Excel表
- 不同颜色文字拼接显示
- C# partial 说明
- a标签里面的img出现边框
- 在WPF中区别TextBlock和Label
- 前端优化-Img与background
- Android 最火的快速开发框架AndroidAnnotations使用详解
- 黑马程序员————Java基础之String类与StringBuffer类
- 第二章 设置开发环境
- 子图的概念
- lsof命令详解
- 区分感应带电与漏电的几种方法
- 【剑指offer】之栈的压入弹出序列
- 11gR2 删除磁盘组报ORA-15027 错误解决方法