背景图片或img这是个问题

前言对于任何C端产品，图片都是最大的内容之一。处理好图片不仅有利于网站的SEO和性能，还能提升用户体验，带来可观的转化率。我们在日常编码中遇到最多的图片问题之一就是：到底应该用img还是background？img标签src属性：图片路径，必传；当然，你也可以不写，不写也会有奇妙的事情发生！打开“https://translate.google.cn/”，然后执行以下代码constimg=document.createElement("img");document.body.append(img)在没有滚动条的页面出现滚动条；Img标签本身会有一个空白节点，占用一定的空间，会增加页面的高度，会出现滚动；解决方法很简单：方法一：img{display:bloack;}方法二：设置img父元素font-size为0alt：图片文字说明；建议添加；alt帮助爬虫理解图片内容，有利于SEO分析和文章采集；图片内容加载错误时有提示，有利于用户体验；对于可访问性非常重要，屏幕阅读器可以将此文本阅读给需要使用阅读器的读者；crossorigin：图像采集是否支持跨域；它在画布绘图中起着重要作用。如果图片跨域，会绘制画布Error:Pollutedcanvaswidth,height:设置图片占用的空间，保证图片加载前布局稳定；不设置宽高时，图片的初始高度为0，图片开始加载时标签的高度变为图片的高度。这个过程会发生CLS（cumulativelayoutshift，一种前端性能指标，参考：https://web.dev/cls/）。sizes,srcset：设置响应式图片；可以在不同的分辨率和不同的设备上显示不同的图片，类似于@media，例如：如果我们要将所有网站图片升级为webp，我们必须判断浏览器的兼容性，基于这个特性我们可以让浏览器自己判断：当浏览器支持webp时，直接解析webp图片，忽略后面的；如果浏览器不支持webp，则解析第二张图片；如果浏览器支持不支持图片，会Directrback到IMG标签；注意：顺序不能被onerror事件代替：当图片格式不兼容时，图片SRC设置为空字符串或NULL，图片损坏。auto，high，low，一般如果是首屏图片，我们可以设置为highloading：浏览器加载图片的方式，eager，lazy，默认值是eager，不管图片是否在viewport中，图片要加载，非首屏图片一般要设置为lazy，即懒加载大小适配：object-fit属性，该属性与safari有兼容性问题，请谨慎使用最后，请注意：img在渲染HTML时算作FCP中的内容，在爬虫眼中也算作网站内容的背景属性。背景是一个复合属性。使用background，我们可以灵活的控制图片显示的范围，图片的位置，图片的缩放比例，我们也可以绘制背景场景渐变、背景等炫彩效果可设置多张图片。何时加载后台：在解析CSS生成CSSOM的过程中，这个过程与生成DOMTree的过程是同步的。背景不算网站内容：在爬虫眼里，这里只有HTML字符串，没有CSS样式；在性能方面，即使先渲染了某个背景，也不会算作FCPImg和背景的起点参考MDNweb.dev应该如何选择