Front-End-Checklist 图片规则实战：为 `＜picture＞` 添加必需的 `＜img＞` 回退，实现格式协商与艺术指导

Front-End-Checklist 图片规则实战为picture添加必需的img回退实现格式协商与艺术指导【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist导读picture元素是现代 Web 前端图片交付的核心手段它既能按浏览器能力协商更小的图片格式AVIF/WebP也能按视口尺寸提供不同的裁剪方案艺术指导。但二者都依赖一个铁律——picture的最后一个子元素必须是img。本文基于 Front-End-Checklist 仓库中 high 优先级、beginner 难度、约 10 分钟即可掌握的 picture-element 规则仓库内同时维护了 内容版规则 与 Agent 技能版 SKILL.md完整讲解img回退的语法、三大实战场景、source排序规则、属性归属以及验证方法并辅以仓库源码证据帮助你写出在所有浏览器下都能正确显示、且对 LCP 与带宽友好的图片标记。为什么img回退是不可或缺的picture提供两大能力格式选择format selection通过source typeimage/avif、typeimage/webp等为不同浏览器提供不同图片格式艺术指导art direction通过source media...在不同视口宽度下提供不同的裁剪或宽高比。无论哪种场景img子元素都是必需的。正如规则文档所述缺少img回退的picture在不支持picture的浏览器如 IE11或浏览器不支持任何source格式时将什么都不渲染。此外alt、width、height、loading、fetchpriority这些属性都只能放在img上且无论浏览器最终选择哪个 source这些属性都会生效。这一点也被仓库的 MCP 审计代码固化为检查逻辑在 review-code.ts 中picture-element启发式会扫描代码——当存在未使用loadinglazy且宽度在 500px 以上的大图、却没有任何picture元素时就会标记出Large images served without picture element问题提示应使用picture配合多个source进行格式协商与艺术指导。这说明该规则不仅是理论最佳实践更是仓库自动化审计链路上可被机器验证的硬性检查点。反例与正例!-- ❌ Bad: No img fallback — renders nothing if no source matches -- picture source typeimage/avif srcsetphoto.avif source typeimage/webp srcsetphoto.webp /picture !-- ✅ Good: img is last child and carries alt, width, height -- picture source typeimage/avif srcsetphoto.avif source typeimage/webp srcsetphoto.webp img srcphoto.jpg altMountain landscape at dawn width800 height600 loadinglazy /picture场景一格式选择Format Selection——按浏览器能力提供最小体积格式格式选择的核心是source的type属性。浏览器会自上而下逐个检查source选中第一个其type支持的条目全部不匹配时落到img。!-- Browser picks the first source whose type it supports -- picture !-- AVIF: best compression (~40-50% smaller than JPEG) -- source typeimage/avif srcsetphoto.avif !-- WebP: broad support (~25-35% smaller than JPEG) -- source typeimage/webp srcsetphoto.webp !-- JPEG: universal fallback -- img srcphoto.jpg altMountain landscape at dawn width800 height600 /picture格式收益数据与仓库中的 modern-format 规则 保持一致WebP 无损图比 PNG 小约 26%有损图在同质量下比 JPEG 小 25–35%AVIF 相对 JPEG 约小 40–50%。正因图片通常占页面体重的 50% 以上这一条链路AVIF → WebP → JPEG能直接改善 Largest Contentful PaintLCP并节省移动端流量。场景二艺术指导Art Direction——按视口提供不同裁剪当同一张图片在不同断点需要不同的构图如移动端 1:1 方图、桌面端 16:9 横幅时使用media属性。注意此时sizes的职责不同——media决定用哪张图sizes决定渲染多宽。!-- Different image crops for different breakpoints -- picture !-- Mobile: portrait crop (1:1) -- source media(max-width: 480px) srcsethero-square-480.webp typeimage/webp !-- Tablet: 4:3 crop -- source media(max-width: 1024px) srcsethero-4x3-1024.webp typeimage/webp !-- Desktop: wide banner (16:9) -- img srchero-wide-1600.jpg altCompany team photo width1600 height900 fetchpriorityhigh /picture这里把首屏横幅的fetchpriorityhigh放在img上因为该属性只对img生效详见下文“属性归属”一节用于提示浏览器优先加载。场景三格式 响应式组合最完整的实现把type与srcset宽度描述符400w/800w/1200wsizes组合就是最完整的picture实现同时完成格式协商与按视口选尺寸。sizes告诉浏览器图片在 CSS 布局中的实际宽度如(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px没有sizes时浏览器默认按100vw计算会下载最大候选图。picture source typeimage/avif srcset photo-400.avif 400w, photo-800.avif 800w, photo-1200.avif 1200w sizes(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px source typeimage/webp srcset photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w sizes(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px img srcphoto-800.jpg srcset photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w sizes(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px altPhoto description width1200 height800 loadinglazy /picture浏览器选择候选图的简化算法与仓库 srcset 规则 中给出的模拟代码一致是先用sizes计算有效显示宽度 → 乘以设备像素比如 2x Retina得到目标像素宽度 → 从srcset候选中选出最接近且不小于目标的那个进行下载。source排序第一个匹配者胜出浏览器按文档顺序自上而下评估source命中第一个即停止。因此最优格式必须放最前面——体积最小的放最前这样能支持新格式的浏览器就永远拿到最优文件picture !-- ✅ Correct order: AVIF first (smallest), then WebP, then img (JPEG) -- source typeimage/avif srcsetphoto.avif source typeimage/webp srcsetphoto.webp img srcphoto.jpg alt... !-- ❌ Wrong order: WebP before AVIF means AVIF-supporting browsers get WebP -- !-- source typeimage/webp srcsetphoto.webp -- !-- source typeimage/avif srcsetphoto.avif -- !-- img srcphoto.jpg alt... -- /picture这个“自上而下、首个匹配生效”的语义同样体现在 SKILL.md 的 Explain 部分浏览器按文档顺序评估source使用第一个条件type、media、srcset匹配的条目没有img子元素的picture是非法 HTML不会产生任何输出。属性归属alt/loading/fetchpriority等必须写在img上alt、loading、fetchpriority、decoding、width、height必须位于img元素上——它们无论最终选中哪个 source 都生效写在source上的这些属性会被直接忽略!-- ❌ Bad: Attributes on source are ignored -- picture source typeimage/webp srcsetphoto.webp altPhoto loadinglazy img srcphoto.jpg /picture !-- ✅ Good: Attributes on img apply regardless of which source is used -- picture source typeimage/webp srcsetphoto.webp img srcphoto.jpg altPhoto description width800 height600 loadinglazy decodingasync /picture这解释了为什么img回退同时承担“无障碍alt”“防 CLSwidth/height 占位”“加载策略loading/fetchpriority/decoding”三重职责——它与仓库中 alt-textimg回退为所有浏览器承载 alt 文本、srcset、dimensions防 CLS等关联规则形成闭环是仓库内images/formats子类目中被一同评审的一组规则。兼容性注意事项Support Notes图片格式与交付行为会因浏览器、CDN 和设备特性而不同必须在目标浏览器矩阵上验证最终字节数与渲染输出当现代格式或懒加载行为在某个必需目标浏览器上不可用时务必保留回退方案JPEG/PNG 兜底 合理的加载策略。验证方法Verification自动化检查W3C Validatorpicture缺少img子元素会直接报错这是最快速的结构性校验Chrome DevTools → Network → 按 Img 过滤确认浏览器实际选中了 AVIF 或 WebP对应 modern-format 规则 中“检查 Content-Type 为 image/webp 或 image/avif 而非 jpeg”的做法Safari 格式回退测试Safari 在 16.4 版本才加入 AVIF 支持旧版本应收到 WebP 或 JPEG——正好验证img兜底链路是否工作。手动检查禁用 JavaScript 后刷新页面——picture完全依赖 HTML 语义工作无需任何 JavaScript这一特性也使它成为适合 Agent 静态审查、无运行副作用的规则。结合仓库的落地实践Front-End-Checklist 将本规则以三种形态沉淀便于人类与 AI Agent 协同落地内容规则picture-element.mdx以结构化 frontmatter 描述优先级high、难度beginner、耗时10 分钟、关联规则modern-format、srcset、alt-text、webp-format、推荐工具W3C Validator、caniuse与参考资料Agent 技能SKILL.md提供可执行的 Check / Fix / Explain / Code Review 提示词例如逐一验证①每个picture最后子元素是否为img②img是否带alt③是否带width/height④source是否全部位于img之前⑤每个source是否含srcset或media⑥格式协商型source是否带typeimage/avif或typeimage/webpMCP 审计工具review-code.ts在代码评审中自动正则扫描大图是否缺少picture并把该检查收录进 启发式覆盖测试。日常落地时可按此清单自查先跑 W3C Validator 排除非法结构再用 DevTools 的 Network 面板逐断点确认格式与尺寸选择正确最后在 Safari 等较新支持 AVIF 的浏览器上做一次回退冒烟测试。这样写出的图片标记既能在全部浏览器中稳定显示又能把现代格式的带宽收益与首屏性能提升落到实处。【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考