如何简化Laravel Blade组件中<picture>元素的冗长标记？

我正在编写一个Laravel Blade组件，用于输出包含不同源的<picture>元素。根据布局和图片可用性会有不同配置，但最终生成的标记十分冗长，因此想找更简洁的实现方式。

初始图片标记 #

<img src="img_home_desk.jpg" width="1340" height="777"/>

添加AVIF和WebP格式支持 #

由于存在该图片的avif和webp版本，需要添加包裹的picture元素及两个备选源：

<picture>
  <source srcset="img_home_desk.avif" type="image/avif">
  <source srcset="img_home_desk.webp" type="image/webp">
  <img src="img_home_desk.jpg" width="1340" height="777"/>
</picture>

适配非视网膜显示器 #

为给非视网膜显示器显示更小图片，添加1x版本：

<picture>
  <source
    srcset="img_home_desk.avif 2x, img_home_desk_670.avif"
    type="image/avif"
  >
  <source
    srcset="img_home_desk.webp 2x, img_home_desk_670.webp"
    type="image/webp"
  >
  <img src="img_home_desk.jpg" width="1340" height="777"/>
</picture>

适配移动视口（不同比例） #

若要为移动视口显示不同图片，需新增两个源。小图无视网膜版本，但比例不同，需在源中指定宽高：

<picture>
  <source
    srcset="img_home_desk.avif 2x, img_home_desk_670.avif"
    media="(min-width: 992px)"
    type="image/avif"
  >
  <source
    srcset="img_home_desk.webp 2x, img_home_desk_670.webp"
    media="(min-width: 992px)"
    type="image/webp"
  >
  <source
    srcset="img_home_desk_750.avif"
    media="(max-width: 991px)"
    type="image/avif"
    width="750"
    height="440"
  >
  <source
     srcset="img_home_desk_750.webp"
     media="(max-width: 991px)"
     type="image/webp"
     width="750"
     height="440"
    >
   <img src="img_home_desk.jpg" width="1340" height="777"/>
</picture>

适配更多视口尺寸（解决Lighthouse提示） #

此时Lighthouse仍提示部分视口下图片过大，因此为移动端和桌面端添加两个中间尺寸图片，每个尺寸对应两种格式，新增4个source元素：

<picture>
  <source
    srcset="img_home_desk.avif 2x, img_home_desk_670.avif"
    media="(min-width: 1200px)"
    type="image/avif"
  >
  <source
    srcset="img_home_desk.webp 2x, img_home_desk_670.webp"
    media="(min-width: 1200px)"
    type="image/webp"
  >
  <source
    srcset="img_home_desk_1140.avif 2x, img_home_desk_570.avif"
    media="(min-width: 992px)"
    type="image/avif"
  >
  <source
    srcset="img_home_desk_1140.webp 2x, img_home_desk_570.webp"
    media="(min-width: 992px)"
    type="image/webp"
  >
  <source
    srcset="img_home_desk_750.avif"
    media="(min-width: 413px)"
    type="image/avif"
    width="750"
    height="440"
  >
  <source
    srcset="img_home_desk_750.webp"
    media="(min-width: 413px)"
    type="image/webp"
    width="750"
    height="440"
  >
  <source
    srcset="img_home_desk_600.avif"
    media="(max-width: 412px)"
    type="image/avif"
    width="750"
    height="440"
  >
  <source
    srcset="img_home_desk_600.webp"
    media="(max-width: 412px)"
    type="image/webp"
    width="750"
    height="440"
  >
  <img src="img_home_desk.jpg" width="1340" height="777"/>
</picture>

补充说明 #

图片路径已简化，实际由CMS通过参数生成（如img_home_desk.jpg?fm=webp&w=764），无需手动创建所有变体，浏览器最终仅请求一张图片。

问题 #

是否有更简洁的写法？已知srcset可列多源，但无法与2x密度描述符混用，想请教该场景下的语法优化建议。

内容的提问来源于stack exchange，提问作者Giorgio Tempesta