前端图片性能优化有哪些手段？

简化版

图片优化要同时控制编码格式、像素尺寸、质量、发现时机和布局占位：照片常选 AVIF/WebP/JPEG，图标和简单矢量图用 SVG；用 srcset/sizes 给不同视口合适候选，非首屏才懒加载，LCP 图片应早发现并可提高优先级；始终声明宽高或 aspect-ratio 防止 CLS。

详细版

不要只看压缩后字节。浏览器会把图片解码成像素位图，2000×1500 的 RGBA 图片约占 2000×1500×4≈12 MB，即使下载文件只有 250 KB，也可能带来解码、内存和绘制成本。

srcset 的宽度描述符提供候选，sizes 告诉浏览器图片在当前布局中的预计 CSS 宽度，由浏览器结合 DPR、网络与缓存选择。服务端或图片 CDN 应按业务场景自动裁剪、转码和缓存，避免每个开发者手工压图。

首屏 LCP 图片不要 loading="lazy"；非首屏图片可原生懒加载。width 与 height 会让浏览器在资源到达前计算固有比例，减少布局偏移，但 CSS 仍应保持响应式尺寸。

完整版教学

一、图片成本分为传输、解码、内存和绘制

网络面板的 transfer size 只是第一层。压缩图下载后要解码成像素，上传 GPU 或参与绘制，过大的像素尺寸会增加内存峰值和滚动压力。

传输文件 → 解码像素 → 内存位图 → 缩放/绘制 → 屏幕
  250 KB     CPU       12 MB        GPU/合成

记忆钩子：文件小不等于像素少；先匹配展示尺寸，再讨论格式和质量。

二、怎样选择格式而不背绝对排名

AVIF、WebP 和 JPEG 都适合照片，压缩率、编码速度、透明度与兼容要求不同；PNG 适合需要无损和透明的特定位图；SVG 适合图标、Logo 和简单矢量，不适合把复杂照片硬转成巨大 XML。

场景	常见选择	注意点
照片/封面	AVIF、WebP、JPEG	视觉质量与解码支持
截图/无损图	PNG、WebP lossless	色彩与透明通道
图标/Logo	SVG	外部内容与脚本安全
动画	WebP/AVIF、视频	长动画常由视频更高效

“AVIF 一定最小”并非每张图都成立，编码器参数和图像内容会改变结果。生产链路应对代表性图片做视觉与字节对比，并为不支持的环境提供可接受候选。

三、像素尺寸和 DPR 怎样决定真实需求

图片显示为 360 CSS px 宽，在 DPR=2 的屏幕上通常需要约 720 个设备像素才能清晰；直接给 2400 px 原图会多解码约 3.3 倍的线性尺寸，像素总量更是约 11 倍。

目标像素宽度 ≈ CSS 展示宽度 × DPR
360 CSS px × 2 = 720 px

DPR 不是无限追求的目标，弱网、节流模式和视觉内容会影响最优候选。图片服务通常设置最大宽度档位，例如 320/640/960/1280，而不是为每个像素生成一份文件。

四、srcset 与 sizes 各自告诉浏览器什么

srcset 提供候选资源及其固有宽度，sizes 描述在不同媒体条件下的预计展示宽度。浏览器据此选择候选，开发者不能保证它机械选某一张，因为缓存和设备情况也可能参与决策。

<img
  src="cover-800.webp"
  srcset="cover-480.webp 480w, cover-800.webp 800w, cover-1280.webp 1280w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800"
  height="450"
  alt="文章封面"
/>

如果忘写 sizes，宽度描述符的默认假设可能与两栏布局不符，浏览器就可能选择过大候选。调试应在 Network 中看实际请求 URL和 DPR，而不是只检查 HTML 中是否有 srcset。

五、关键图与非关键图的加载策略相反

LCP 图片需要尽早被 HTML 预加载扫描器发现，避免懒加载；必要时使用 fetchpriority="high" 或精确 preload。CSS 背景图发现较晚，若它是主视觉，应评估改成语义化 <img>/<picture> 或显式预载。

非首屏长列表图适合 loading="lazy"，浏览器会按自身启发式在接近视口时获取。所有图片都 lazy 会把首屏关键图也推迟，而所有图片都 eager 又浪费首屏带宽。

假设首屏带宽 2 Mbps，一张 600 KB 的非首屏图若抢先下载，理论传输约 600×8/2000=2.4 秒，期间会和关键资源竞争。加载策略本质是优先级预算。

六、尺寸占位、解码与图片服务自动化

HTML 的 width/height 让浏览器得到宽高比，响应式 CSS 可写 max-width:100%; height:auto。没有占位时图片到达后撑开页面，会产生非预期布局偏移。

decoding="async" 是解码提示，不保证或替代所有浏览器调度；对关键 LCP 图滥用提示未必更快。与其堆属性，更应从资源发现、正确尺寸和字节量入手。

自动化环节	输入	输出
上传校验	原图、用途	尺寸/格式限制
转码裁剪	宽度档、质量	AVIF/WebP/JPEG 候选
CDN 协商	URL 参数、请求能力	就近缓存资源
监控	LCP、失败率、字节	策略反馈

图片 URL 参数必须有允许列表和最大尺寸，防止攻击者制造无限变体击穿缓存。自动化的目标是稳定落实规则，而不是让 CDN 在每次请求上无限实时计算。

七、常见误区与追问

误区：把图片压到最小就是最佳优化。 过度压缩会损害清晰度和业务转化，还要考虑像素与解码成本。
误区：所有图片都应该懒加载。 首屏 LCP 图片懒加载会延迟关键内容，应优先发现和下载。
误区：下载只有几百 KB 就不会占内存。 解码位图按像素计，远大于压缩文件并很常见。
追问：srcset 和 sizes 有什么区别？ 前者列候选及宽度，后者描述布局展示宽度，浏览器结合二者选择。
追问：设置 width/height 会让图片固定尺寸吗？ 属性主要提供固有尺寸与比例，CSS 仍可响应式缩放。
追问：CSS 背景图为何可能拖慢 LCP？ 浏览器需先下载并解析 CSS 才能发现 URL，资源发现链更晚。
追问：图片 CDN 需要防什么工程风险？ 无限尺寸变体、缓存键错误、转码故障和回源压力都需限制与监控。

八、加强记忆

用“格式、像素、候选、时机、占位”检查图片：按内容选择编码而不迷信单一格式，展示尺寸乘 DPR 决定像素档位，srcset/sizes 让浏览器选候选，LCP 图早加载而非首屏图懒加载，宽高比先占位。最后同时观察传输字节、解码内存、LCP 和 CLS，才是完整图片优化。

简化版

详细版