图像标记

Web 图像标记 思维导图（精简背诵版）
一、核心标签 img（单标签）
必写属性
src：图片地址（相对 / 绝对）
alt：替代文本（内容图描述，装饰图 alt=""，无障碍 + SEO）
width/height：控制尺寸，单值等比防回流
常用拓展属性
title：悬浮提示
loading="lazy"：懒加载
decoding="async"：异步解码
crossorigin：跨域图片
usemap：绑定热区 map
二、响应式高清适配
1. srcset
密度符：1x/2x/3x 适配视网膜屏
宽度符 w + sizes：根据页面展示宽度自动选图
2. picture 多格式 / 多尺寸兼容
结构：多个 source + 末尾 img 兜底
source 属性：media 媒体查询、srcset、type (webp/avif)
规则：从上至下匹配，匹配即停止
三、语义化图文组合 figure
figure：包裹图片整体容器
figcaption：图片说明文字（仅直接子元素有效）
适用：文章插图、作品配图
四、图像热区 map + area
img 添加 usemap="# 命名"
map 标签写同名 name 属性
area 属性
shape：rect 矩形 /circle 圆 /poly 多边形
coords：坐标参数
href：跳转链接、alt：区域说明
五、img 标签图 VS CSS 背景图
img：内容图片、占文档流、alt 利于 SEO、可直接加链接
background-image：装饰图、不占流、无 alt、需容器宽高
六、图片格式
jpg：照片，无透明
png：图标插画，支持透明
gif：动图
webp/avif：高压缩，性能最优
七、高频考点易错点
img 自闭合，不可写</img>
alt 不可省略
picture 内 source 顺序不能颠倒
srcset 仅补充，src 做降级兼容
map 的 name 与 usemap 名称必须完全一致
八、图片优化要点
懒加载 lazy
优先 webp/avif 格式降级
提前设置宽高，避免页面回流
图片压缩减小体积
canvas 绘图添加跨域属性