网页图片优化别只压体积：把尺寸、加载时机和替代文本一起做好
图片文件变小，不代表网页体验就一定改善。如果浏览器下载了远超显示需要的尺寸、图片出现时把正文推开，或读屏用户只能听到一串文件名，压缩只是解决了其中一部分。本文针对普通内容图片，给出从资源准备到页面验收的完整思路，不涉及图像编码器之间的跑分。
AI生成概念配图：同一内容图片适配桌面和手机，同时提供可理解的文字信息，仅辅助理解，不代表真实界面或实测结果。
先决定图片承担什么任务
把图片分成信息型、装饰型和功能型，比统一填写“文章配图”更有用。信息型图片需要表达与正文有关的要点；纯装饰图可以使用空 alt；作为链接或按钮的图片，则应说明操作或目的地。不要省略 alt 属性来表示装饰，因为辅助技术可能转而读出文件名。
例如数据库关系示意图，可以用简短替代文本概括核心关系，并在正文中解释细节。若它只是在文章开头营造气氛，正文已传达全部内容，空 alt 往往更合适。图注负责来源与说明，alt 负责图片在当前语境中的作用，两者不必机械重复。AI 生成概念配图也应明确标注，避免被当成真实截图或数据证据。
为相同构图准备合理候选尺寸
下面假定已经导出三张同构图、相同比例的图片，宽度分别与文件名一致。sizes 表达图片在布局中大约占多宽，并不是候选文件的像素宽度。示例布局最大显示宽度为 720 CSS 像素；实际主题若存在侧栏或更大内边距，应按真实布局修改。
<img src="/images/backup-960.jpg" srcset="/images/backup-480.jpg 480w, /images/backup-960.jpg 960w, /images/backup-1440.jpg 1440w" sizes="(max-width: 760px) calc(100vw - 32px), 720px" width="1440" height="960" loading="lazy" alt="数据库通过备份流程生成独立副本">
浏览器会结合布局提示、设备像素密度等条件选择资源，不保证每次选择你直觉上认为的那张。候选图仍需在内容侧正确生成，不能只改文件名和 w 描述值。CSS 应同时限制图片最大宽度，并保持高度自适应；width 与 height 属性用于提供固有尺寸关系，帮助浏览器提前安排空间。
加载时机要看图片的位置
正文下方、初始视口之外的图片适合评估原生懒加载。首屏主图如果承担主要内容展示，不应不加区分地套用 loading="lazy"，否则可能推迟发现或加载。可以省略该属性让它使用默认加载行为，再结合实际页面测量决定是否需要额外优先级提示。不要把全部图片都标成高优先级。
格式选择也要服务内容：照片、透明图、细线示意图和带字截图的容错不同。先在实际显示大小检查清晰度、边缘和透明背景，再比较文件大小。若使用 picture 提供不同格式或裁切版本，应确认回退图片存在，且不同构图仍能被同一替代文本准确描述。
用页面证据完成验收
先在桌面与窄屏查看图片有没有溢出、拉伸或推动正文，再打开网络面板检查实际下载资源，必要时在开发者工具查看 img.currentSrc。测试前明确缓存状态，避免把已经缓存的资源误认为这次无需下载。模拟慢网络时，还要检查图片未显示阶段，标题、正文和链接是否仍然可用。
最后朗读一次替代文本与周围段落：如果它只重复标题，或离开图片后完全无法理解关键结论，就需要重写。复杂图表应在正文提供数据或长描述，而不是把所有细节塞进 alt。我的发布检查顺序是先确认意义与布局，再调整资源与加载；体积、可访问性和视觉稳定性应共同验收。
