srcset 看懂了仍会抓错图？用 Python 拆解 ＜picture＞、sizes 与 w/x 描述符

srcset 看懂了仍会抓错图用 Python 拆解picture、sizes 与 w/x 描述符很多商品页或资讯页不会只放一个img src。同一张图可能在srcset中列出 480w、800w、1200w 三个资源再用sizes描述布局宽度picture还可以按媒体条件或图片格式切换整组资源。爬虫如果只读src得到的可能只是低清回退图甚至不是最终加载的 URL。1.srcset有两种描述符w描述候选图片的固有宽度例如card-800.jpg 800w需要和sizes一起计算。x描述像素密度例如logo-2x.png 2x。使用x时src可作为默认 1x 候选。MDN 明确说w与x不应混用sizes只对w描述符起作用。浏览器会综合布局槽位、设备像素比、带宽等条件选择资源不能简单地取列表最后一项。imgsrccard-400.jpgsrcsetcard-480.jpg 480w, card-800.jpg 800w, card-1200.jpg 1200wsizes(max-width: 600px) 400px, 800pxwidth800height450alt示例卡片当小屏槽位是 400 CSS 像素时浏览器会在候选中选择接近所需宽度的资源桌面槽位 800 时800w 是更匹配的候选。width和height还能让浏览器预留比例减少图片加载时的布局跳动。2.picture先选 source再看 imgpicture里可以放多个source每个有自己的media、type或srcset浏览器跳过不匹配的 source最后使用img作为回退picturesourcesrcsethero.aviftypeimage/avifsourcesrcsethero.webptypeimage/webpimgsrchero.jpgalthero/picture静态爬虫至少要收集source[srcset]和img[src]并记录media、type与原始顺序。它可以把所有候选加入待处理集合但不能把某个候选说成“浏览器实际下载的文件”除非真的在目标浏览器环境里核验了网络请求。3. 离线选择实验下面的实验只实现一个固定的“槽位宽度乘设备像素比再取不小于需求的最小候选没有更大候选就取最大值”的教学规则不冒充完整浏览器选择算法mobile_1xPASS desktop_1xPASS mobile_2xPASS oversize_fallback_largestPASS descriptor_orderedPASS results{mobile_1x: [small.jpg, 480], desktop_1x: [medium.jpg, 800], mobile_2x: [medium.jpg, 800], oversize: [large.jpg, 1200]} checks5 environment{python: 3.13.13, platform: macOS-27.2-arm64-arm-64bit-Mach-O}代码保存为srcset_demo.py使用 Python 3.13.13、标准库运行。真实浏览器还会考虑媒体条件、格式支持、缓存和带宽偏好生产爬虫不应把上述函数当成浏览器仿真器。4. 爬虫的收集和下载边界第一步解析原始 HTML保留src、srcset、sizes、media、type和页面 URL第二步用同样的 base URL 解析相对地址第三步按站点规则、权限和频率决定是否下载。不要因为一个图片 URL 出现在源码里就推断它允许被批量抓取。还要校验描述符同一srcset不能同时把候选写成800w和2x宽度描述符应与资源固有宽度一致重复 descriptor 会导致选择不确定。下载后保存响应状态、Content-Type、尺寸和校验值避免把 HTML 错误页当图片入库。参考MDNimg的 srcset 与 sizes、MDNpicture、WHATWG HTML 图片标准。本文由 AI 辅助整理代码与输出为本机实际运行结果。