应使用语义化组织单张作品，配合srcset/sizes响应式加载、webp回退、详细alt描述、css grid布局及loading="lazy"与decoding="async"优化性能。
用 <figure></figure> 和 <figcaption></figcaption> 组织单张作品结构
每张照片不是简单塞个 <img> 就完事。浏览器默认不理解“这是摄影作品”，搜索引擎也抓不到语义。用 <figure></figure> 包裹图片 + 说明文字，是告诉 HTML：“这部分内容自成一体，有独立意义”。<figcaption></figcaption> 必须紧跟在 <img> 后（或前），否则语义断裂，屏幕阅读器可能跳过。
-
<figure></figure>内不能只放<img>，至少配一个<figcaption></figcaption>，哪怕只是空标签<figcaption></figcaption> - 避免把标题、日期、相机型号全堆进
<figcaption></figcaption>—— 过长会破坏排版节奏；建议只放作品名，其余用<small></small>或<div class="meta"> 放在 <code><figure></figure>内部下方 - 别用
<div> 模拟 <code><figure></figure>：CSS 可以仿样式，但无法传递语义，影响可访问性和 SEO响应式图片必须用
srcset+sizes，别只靠 CSS 缩放手机加载桌面尺寸的 4000px 宽图？带宽和内存直接告急。单纯用 CSS 设置
max-width: 100%只是“压小”，浏览器仍会下载原图。真正节省流量得靠<img>的原生响应能力。- 至少提供两个尺寸：
srcset="photo-small.jpg 800w, photo-large.jpg 1600w"，再配sizes="(max-width: 768px) 100vw, 50vw"告诉浏览器不同视口下该选哪份 - 如果用 WebP 格式，加
<picture></picture>回退：<source srcset="photo.webp" type="image/webp"></source>，后面跟<img src="photo.jpg" ...> - 忽略
alt属性？后果不只是 SEO 差——盲人用户完全不知道这张“山间晨雾”拍的是什么，写成alt="黄山云海，日出前一刻，松树剪影在雾中若隐若现"比alt="photo123"有用得多
网格布局用 CSS Grid，别用 float 或 inline-block 拼相册
float 布局要清浮动、计算 margin、适配断行极其脆弱；inline-block 有看不见的空白符干扰间距。Grid 是目前最稳的相册排列方案，尤其适合等高不等宽的作品集。
- 容器设
display: grid，用grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))实现“最小 300px，自动填满”的响应式列数 - 每张
<figure></figure>设margin: 0，靠 Grid 的gap控制间距，避免子元素 margin 塌陷或叠加 - 想让某张大图跨两列？给对应
<figure></figure>加grid-column: span 2，但注意：它后面的元素会自动避开，无需手动调整位置
加载性能关键点：懒加载 + 图片解码优化
一页 30 张图，全量加载会卡顿。浏览器原生
loading="lazy"是底线，但还不够 —— 解码阶段仍可能阻塞主线程。- 所有
<img>必须带loading="lazy"，Chrome/Firefox/Edge 都支持，Safari 15.4+ 也已支持 - 加上
decoding="async"，让浏览器在后台线程解码图片，避免渲染卡顿（尤其对 JPEG 大图明显） - 别在
<img>上写width/height像素值：这会导致布局偏移（CLS）。正确做法是用 CSS aspect-ratio：aspect-ratio: 4/3或内联 style：style="max-width:90%"
实际部署时最容易漏掉的是
decoding属性和aspect-ratio—— 它们不报错，但影响真实用户体验，且在 Lighthouse 报告里直接体现为 CLS 和 INP 分数下降。 - 至少提供两个尺寸：
