教程分享 精选
图片优化别只看文件大小：从尺寸、加载顺序到版面稳定
把图片压得更小只是第一步。结合内容网站的排查过程，说明如何选择输出尺寸、预留图片空间，并把首屏关键图片与延迟加载分开处理。
先找最影响体验的图片
检查一个内容页时，我先用浏览器网络面板查看图片传输大小和请求时序，再在较慢网络下观察页面出现内容的过程。真正拖慢首屏的是一张尺寸远超展示需求的封面，而不是数量很多的小图标。优化前记录同一设备和网络条件下的结果，之后才能判断调整是否有效。
根据展示宽度提供合适资源
为主要图片准备多个合理尺寸，通过 srcset 和 sizes 让浏览器结合布局与设备像素密度选择资源。sizes 需要反映真实展示宽度，不能为所有位置都写成全屏；格式和压缩质量则要结合照片、插画与透明背景分别评估。保留清晰度的前提下减少无用像素，通常比一味降低质量更稳妥。
提前为图片预留空间
在标记中给出图片宽高，或用合适的宽高比约束容器，可以减少加载后把文字推开的情况。裁切模式也要按内容选择，人物照片和带文字的海报未必适合同样的居中裁切。测试时既观察加载完成后的效果，也观察图片尚未到达时页面是否已经保持合理结构。
首屏与非首屏采用不同策略
首屏关键图片通常不适合延迟加载，靠近页面下方的图片则可以考虑按需加载。不要给所有图片都提高优先级，否则关键资源仍然会互相竞争。调整后重新测量加载时序、最大内容绘制和布局偏移，并在真实移动设备上确认体验，避免只凭一次实验室评分下结论。