1. 在优化前先对图片进行分类
按模板汇总图片清单。记录每张图片的角色、最大和最小渲染宽度、是否位于初始视口内，以及小屏幕是否需要不同裁切。这会把文件大小的问题转化为可以在重要页面上测试的决策。
照片通常可以容忍经过审查的有损压缩。徽标、界面图标、线条艺术和图表可能适合使用 SVG，或采用能保护锐利边缘的栅格格式。SVG 适合线条艺术、示意图和图表，不适合细节丰富的照片。
保留必要细节并提供文本以表达图片的用途。
使用空替代文本（alt=""）；不要将其作为重要信息的唯一来源。
说明动作或目的地，而不仅仅描述像素本身。
2. 按渲染插槽进行尺寸设定，然后提供响应式候选
将固有尺寸（intrinsic dimensions）与 CSS 插槽匹配。桌面尺寸的文件放在狭窄卡片中会浪费传输；一个过小的栅格图被拉伸则会变得模糊。考虑设备像素比（device pixel ratio），但应以视觉验证为准，而不是假定每个屏幕都需要最大的候选项。
对于同一构图在多个宽度下使用，采用带宽描述符的 srcset 并使用 sizes 陈述实际插槽宽度，让浏览器选择合适候选项。当缩放会隐藏主体信息时，为艺术指向（art direction）使用 picture：小屏裁切保留主体可能需要与单纯缩小桌面图不同的作法。始终在 picture 内保留带有 src 和 alt 的 img 作为回退。
相同构图，不同像素尺寸的候选。
当缩放会隐藏信息时使用不同裁切或构图。
为不使用响应属性的客户端在 img 上保留 src。
3. 根据图片特性选择格式和压缩
WebP 和 AVIF 在合适的情况下可以减少栅格图片的传输，但格式本身并不是质量保证。对代表性的人像、细腻纹理、品牌渐变、嵌入文本和透明度进行测试。JPEG 仍是常见的照片回退；PNG 适合无损细节或需要透明通道的栅格图。检查 AVIF 的浏览器支持和在你交付链中的运行适配性。
有损压缩通过丢弃信息来节省字节，通常对细节丰富的照片更宽容，而对锐利边缘或文本的影响更明显。无损压缩保留编码像素但可能节省较少。按渲染尺寸进行并排对比来选择质量，而不是仅依赖数字设置。确认方向、色彩和工作流需求后，才移除元数据。
在显示尺寸下对比有损 AVIF、WebP 以及 JPEG 回退的效果。
优先考虑适合的 SVG，或通过测试保护栅格图的锐利边缘。
确认每种交付格式及其回退在 alpha 通道上的显示效果。
4. 通过标记保护速度和布局稳定性
为每个内容性 img 提供与其固有宽高比匹配的 width 和 height 属性。这样浏览器在文件到达前能预留空间，减少布局位移。CSS 仍然可以控制显示尺寸。
仅对真正位于视口之外的图片使用 loading=lazy。不要对可能在加载时可见的图片（尤其可能成为 LCP 的图片）使用懒加载。LCP 是视口内可见的最大图片、文本块或视频的渲染时间。fetchpriority=high 只是相对提示；谨慎使用并测量效果。对需要替代文本或可被发现的内容，使用 HTML 图片标记；Google 记录表明它不会索引 CSS 背景图像。
设置 width 和 height，包括懒加载的图库图片。
保持可能成为 LCP 的图片为 eager，并检查请求优先级。
对折叠下方的图片使用懒加载，并在受限网络下测试滚动加载。
5. 保留含义、可发现性与视觉质量
替代文本的写法取决于用途与上下文。对信息性图片描述关键信息；对装饰性图片使用 alt=""；对链接或作为按钮的图片说明其功能。对复杂图表或示意图，在附近提供等效说明。不要使用关键词列表。
对于需要可被发现的内容图片，使用标准 HTML 图像元素、相关的附近文本、在可行时使用简短描述性的文件名，并为响应式标记提供回退源。不要仅为可发现性把装饰性背景图转换成冗余内容。
在最大和最小预期尺寸下复查压缩后的文件。
优先使用常规文本；若必须在图中嵌入文本，则提供等效文字。
将信息性图片放在相关页面文本附近。
6. 验证页面，而不仅仅是单个资源
在窄视口和宽视口下测试代表性页面。在浏览器开发者工具中，检查被选中的 srcset 候选项、传输大小、渲染尺寸和布局位移。在网络节流下测试以暴露加载较晚的首屏图片和缓慢的图库。一次导出对比无法揭示不准确的 sizes 值、意外裁切或生产环境转换问题。
在可用时同时使用实验室和现场信号。Lighthouse 与 PageSpeed Insights 可识别尺寸不当的图片；现场 LCP 反映真实访问。比较相同的模板、设备类别、发布版本和测量窗口。服务器时间、脚本、字体或第三方变化也会影响指标，发布时不要把指标变化完全归功于图片。对共享模板的改动先在预发布环境阶段化并保留回滚路径，直到验证完成。
确认插槽未选择意外过大的候选项。
检查裁切、清晰度、色彩、替代文本和布局稳定性。
明确负责人、预期信号和回滚路径。