哪种是显示图像的最优化方式？答案

【问题标题】：Which is the most optimized way to display an image?哪种是显示图像的最优化方式？
【发布时间】：2021-06-19 16:46:46
【问题描述】：

在页面速度和页面大小方面进行了优化。第一种方法是将图像显示为 div 的背景而不是 img 标签：

<div style="background:url("image-url.jpeg") no-repeat;background-size:cover;max-width:350px;max-height:350px;display:block;width:100%;height:100%;"></div>

其次是正常的img标签方式：

<img src="image-url.jpeg" width=350 height=350 alt="" />

或者任何人都有更好的方法来显示图像。

谢谢。

*无视搜索引擎优化的好处

【问题讨论】：

在标记中动态加载图像比使用一些样式语言要容易得多。此外，图像标签的存在是有原因的

标签： php wordpress optimization frontend pagespeed

【解决方案1】：

这里的答案：https://buildawesomewebsites.com/html-img-vs-css-background-image/

Imo，我会使用 img 标签，但我会改进你的代码：如果你想改进性能，你可以使用带有 img 标签的“srcset”属性：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images 并加载较小的图像适用于较小的设备。

此外，您可以轻松使用带有img标签的延迟加载

【讨论】：