17370845950

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），会导致整个列表被当成单个源而失效。