加载时机
- img 比 background-image 先加载,因为img属于DOM元素,而渲染过程会先解析 DOM 树,再解析CSS文件。
- 因此重要元素,如logo建议使用img, background-image 更适合作为 banner 轮播图、广告图。因为 banner 通常都是广告,可以晚点加载,避免占用带宽过多造成阻塞。
图像渲染
- img 即使不手动设置宽高,也会按照图片的原有宽高渲染出来。
- img的宽高设置可以直接改变图片显示大小。
- background背景图依托于DOM元素,不能撑开元素,若不给div设置宽高,图片就不会渲染。
- background-image 可以配合背景图片相关属性,实现各种效果,比如雪碧图、平铺瓷砖等,这是 img 元素做不到的。
SEO
SEO(Search Engine Optimization),利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
- 搜索引擎更喜欢在网页初始化的时候,img标签与src的链接一起被加载出来。在SEO优化层面,img标签会比background背景图片更有优势。
语义化
合理HTML标记以及其特有的属性去格式化文档内容,使得机器更容易理解数据和信息
- img是HTML标签,语义明确。
图片保存
在浏览器中
- img 元素默认可以鼠标右键保存图片。但 background-image 不行。
- img标签渲染的图片,可以用鼠标轻松拖动到桌面实现下载。
总结
需要区分不同场景选择合适的方式去渲染图像
- 一般来说,重要的图像或者需要优先加载的图片最好用img,优先级次之的图片采用background-image。
- img标签有利于SEO,img标签语义化明确。
- img有利于图像保存。