能否通过CSS为picture元素source标签设置media属性以降低HTML负载？

方案可行性结论 #

你设想的通过CSS配置source标签media属性的方案不可行。
media是HTML原生属性，对应的响应式资源匹配逻辑是浏览器在HTML解析、资源预加载阶段就会执行的内置逻辑，CSS仅能控制元素的展示样式，既无法修改HTML属性的实际值，也不能干预浏览器对<picture>元素的资源选择逻辑，所以这种写法不会生效。

降低HTML负载的可行方案 #

• 用srcset+sizes替代<picture>多source结构 #

如果你只是为了做同一张图片不同尺寸的响应式适配，不需要多source的<picture>结构，直接在<img>标签上配置srcset和sizes即可，代码量大幅降低：

<img 
  src="/images/original.png"
  srcset="/images/thumb.png 300w, /images/largethumb.png 500w"
  sizes="(max-width: 300px) 300px, (max-width: 500px) 500px, 500px"
  loading="lazy"
  alt="图片描述"
>

浏览器会自动根据当前视口尺寸匹配最优的图片资源加载，效果和多source的<picture>结构完全一致。

• 批量注入media属性 #

如果必须保留<picture>标签结构，可以在<source>标签上用短自定义属性存储断点，再通过一段公共JS批量赋值给media属性：
HTML示例：

<picture>
    <source data-m="300" srcset="/images/thumb.png">
    <source data-m="500" srcset="/images/largethumb.png">
    <img src="/images/original.png">
</picture>

公共JS逻辑：

document.querySelectorAll('picture source[data-m]').forEach(source => {
  source.media = `(max-width: ${source.dataset.m}px)`
})

大量重复的media="(max-width: xxxpx)"代码可以被简化为data-m="xxx"，大幅减少HTML体积。

• 模板封装+HTML压缩 #

  1. 服务端渲染或前端框架场景下，可以把响应式图片封装成公共组件，仅传图片路径、断点参数即可生成完整结构，避免业务代码里重复写大量冗余标签
  2. 部署阶段开启HTML压缩，去掉空格、换行、冗余引号等无效字符，重复的标签结构压缩后体积会大幅下降

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