①HTML picture 元素还是挺实用的，往往和 source 元素（可以多个）、img 元素（最多一个）一同使用；渲染的时候，浏览器优先使用 source 元素，img 元素兜底；当我们需要在不同场景显示不同图片的时候，picture 元素就特别的实用；
②替代方案：
一、不同宽度显示不同图片：如果是背景图，都是 CSS @media 查询；如果是 img 图片，直接 CSS 限定尺寸，然后 object-fit 属性控制显示；
二、不同设备密度显示不同图片：同样的，CSS Medias Query 查询一样支持，如果非要使用 img 元素设置，直接一个 img 元素就好了，根本无需 picture 元素进行嵌套，img 元素也支持 srcset 属性，还支持 sizes 属性，w、x 标识符；
三、不同浏览器显示不同格式的图片：真实的项目中，这个都是交给云服务厂商处理的，通常 COS 服务支持通过配置让 Chrome 等浏览器显示 webp，IE、Safari 等浏览器显示 jpg 的；
③综合来看，picture 元素并不太适合那种长期迭代维护，以功能开发为主，项目复杂度比较高的项目，更适合类似集团官网、运营活动这种独立的简单的几个页面的场景，可以专门对这些页面使用 picture 元素进行优化，容易出结果，容易获得好的数据，也能体现前端专业性，而且这些项目本身不复杂，就几个页面，正好不需要那种工程化，自动化的东西，此时，手工对 HTML、图像资源进行处理反而合适，投入产出比高；
（参考：www.zhangxinxu.com/wordpress/2…
