背景图还是img这是一个问题吗

前言

对于任何一个C端产品，图片都是占比最大的内容之一，处理好图片不仅有利于网站的seo、性能，更能够提升用户的体验，带来可观的转化率。我们在日常编码遇到最多的一个图片问题就是：应该用img还是background？

Img标签

• src属性：图片路径，必传；当然也可以不写，不写的时候会发生很奇妙的事情呢！打开“https://translate.google.cn/”，然后执行下面的代码

  const img = document.createElement("img");
  document.body.append(img)
  

  本来没有滚动条的页面出现了滚动条；Img标签本身会自带一个空白节点，占据一定的空间，会造成页面高度增加，于是出现滚动；解决的方式很简单：

  方式一：img{ display:bloack; }

  方式二： 设置img父元素font-size为0

• alt：图片文本描述；建议添加；alt有助于爬虫了解图片内容，利于seo解析利于文章收录；在图片内容加载错误时有提示，利于用户体验；对于可访问性而言非常重要，屏幕阅读器可以读取这段文本给需要使用阅读器的读者；

• crossorigin：图片抓取是否支持跨域；在canvas绘制中起到很大的作用，如果一个图片是跨域的，canvas绘制的时候会报错：污染画布

• width、height：设置图片占用空间，确保图片加载之前布局是稳定的；当不设置width和height，图片一开始高度为0，当开始加载图片时标签高度变化为图片高度，这个过程会发生CLS（累计布局偏移，一个前端性能指标，参考：https://web.dev/cls/）

• sizes、srcset：设置响应式图像；可以在不同分辨率和不同设备上显示不同的图片，类似于@media，例如：

  <img srcset="elva-fairy-320w.jpg 320w,
               elva-fairy-480w.jpg 480w,
               elva-fairy-800w.jpg 800w"
       sizes="(max-width: 320px) 280px,
              (max-width: 480px) 440px,
              800px"
       src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
  

  如果我们想把网站图片全部升级为webp，那么必然需要判断浏览器兼容性，而基于这个特性我们可以让浏览器自行去判断：

  <picture>  
    <source srcset="bg.webp" type="image/webp">  
    <source srcset="bg.jpg" type="image/jpeg">  
    <img src="bg.jpg" alt="背景图">
  </picture>
  

当浏览器支持webp则会直接解析webp图片，忽略后面的；

浏览器不支持webp，则解析第二张图片；

当浏览器不支持picture那么会直接fallback到img标签；

注意：顺序不可更换

• onerror事件：什么时候触发 图片的格式不兼容、图片src设置为空字符串或者null、图片损坏
• importance：下载资源时的相对优先级，有三个取值：auto、high、low，一般如果是首屏图片我们可以设置为high
• loading：浏览器如何加载图像，eager、lazy，默认值是eager，不管图片是否在视口内都加载图片，一般应该将非首屏图片设置为lazy，即懒加载
• 大小自适应：object-fit属性，该属性在safari上有兼容性问题请谨慎使用

最后请注意：Img在HTML渲染的时候是算作FCP中的内容，在爬虫眼里它也算作是网站内容

background属性

• background是一个复合属性，利用background我们可以灵活地控制图片展示的范围，图片的位置，以及图片的缩放，还可以绘制背景渐变等炫彩的效果，
• background可以设置多张图片
• background什么时候加载：在解析CSS生成CSSOM的过程中，此过程与DOM Tree生成过程是同步进行的
• background不算作网站内容：在爬虫的眼里，只有HTML字符串，没有CSS样式；对于性能方面而言，即使某个background最先渲染出来它也不会算作FCP的起点

Img和background我们究竟该怎么选

参考文献

MDN

web.dev