img标签无HTML5独有新属性，必须写src和alt（空alt=""合法但不可省略），srcset/sizes实现响应式，loading="lazy"原生懒加载，decoding="async"异步解码防阻塞。
img 标签本身没有 HTML5 特有新属性，所谓“HTML5 插图技巧”实际是规范用法 + 现代实践约束，不是加了新功能就能乱用。
必须写 src 和 alt 属性
浏览器不渲染无 src 的 ，且无障碍、SEO、可访问性都依赖 alt。空 alt="" 是合法的（装饰图），但不能省略。
常见错误： —— 缺 alt，校验失败，屏幕阅读器跳过，搜索引擎降权。
正确写法示例：
@@##@@ @@##@@
srcset 和 sizes 适配多分辨率设备
单靠 src 无法响应式加载合适尺寸图片，srcset 告诉浏览器有哪些资源可选，sizes 告诉它在不同视口下该用多宽的图。
-
srcset中每个值格式为"路径 宽度w"或"路径 像素密度x"，如"photo@2x.jpg 2x"或"photo-480w.jpg 480w" -
sizes是媒体条件 + 宽度描述，如"(max-width: 768px) 100vw, 50vw"，表示小屏占满视口，大屏占一半 - 浏览器自动选最匹配的源，不保证下载最小图，但能避免在手机上加载 4K 图
示例：
@@##@@
用 loading="lazy" 延迟加载非首屏图
原生懒加载只对 和
loading="lazy" 是 HTML5.2 加入的标准属性（Chrome 76+、Firefox 75+ 支持）。
注意点：
- 仅对非首屏图生效；首屏图加了也无效，浏览器会忽略
- 不支持 CSS 背景图，只能用于
标签 - 若需兼容老浏览器，得用
IntersectionObserver手动实现，不能指望 polyfill 自动补全loading
示例：
@@##@@ @@##@@
decoding="async" 避免图片解码阻塞主线程
大图（尤其 WebP / AVIF）解码可能卡住页面渲染，decoding="async" 让浏览器在后台线程解码，适合列表页、画廊等含多图场景。
但要注意：
- 不是所有浏览器都支持（Safari 直到 16.4 才支持，旧版 Edge 不支持）
- 设为
sync（默认）时，解码和渲染同步进行，可能导致卡顿 - 与
loading="lazy"搭配使用效果更明显，但两者解决的是不同阶段的问题
示例：
@@##@@
真正容易被忽略的，是 alt 的语义准确性——写成“图片”或留空比不写还糟；还有 srcset 里单位写错（比如漏掉 w），会导致整个列表被当成单个源而失效。
