今有网页性能之事，最恼人者莫过于图片。这般图籍，若使用不当，教那顶顶要紧的首屏景致迟迟不得露脸（延迟最大内容绘制LCP）。若是严重，更会把版面搅得七颠八倒（页面布局偏移CLS）。活似黄包车撞进了古玩店——字也斜了，画也歪了，真真是雪上加霜的营生！图片之流，原是为着教人悦目，却不料成了性能的枷锁。呜呼！开发者们整日念叨JS、CSS的优化，偏对这庞然大物视若无睹，岂非怪事？
夫图籍载道，贵在轻装疾行。今有四法，诸君且观：
一、择图如择衣，不可不慎
诸君且看：同一张画儿，若用了愚笨的格式，竟能教浏览器多驮十倍的货。譬若盛夏穿棉袄，寒冬披薄纱，徒惹人笑。试观此二类图：
1、照片类
（照片图：jpg格式比png格式小，webp和avif明显更小）
2、切图类
（插画切图类：png格式比jpg格式小，webp和avif明显更小）
故，因景用图片，何其重要。那JPG原是给姹紫嫣红的照片预备的，偏有人拿它画简笔；PNG本宜作透明图案，却硬要装点万花筒。更有甚者，抱着老旧的格式不放，殊不知WebP、AVIF之流，早将体积削去七分，画质犹胜从前。这等糊涂账，真真是捧着金碗讨饭！
最终结论：照片用JPG，图形用PNG，现代浏览器优先使用WebP/AVIF。
- JPG - 适合色彩丰富和有渐变的照片，采用有损压缩保持小体积
- PNG - 适合图形、logo和需要透明度的场景，无损压缩但体积较大
- WebP - 现代格式，体积通常比JPG/PNG小30%且保持高质量
- AVIF - 压缩率优于WebP，但尚未获得全面支持
二、尺寸须合身，莫削足适履( 标签)
诸君可曾见三寸金莲套进丈二绣鞋？今之网页图片，往往将桌面尺寸强塞手机屏幕，恰似此状。当学那巧裁缝，用 标签作容器，srcset属性为条件，为不同看客（机型）展示不同图片：
<picture>
<source srcset="img1.png" media="(max-width: 375px)" />
<source srcset="img2.png" media="(max-width: 420px)" />
<img src="default.png" alt="xxx" />
</picture>
这般布置，方是体贴的做派。那浏览器见了，自会拣选合宜的尺寸，免了驮着巨石走山路的苦楚。
三、懒加载法，不见棺材不落泪(loading="lazy"智能延迟加载)
网页底层的图，何必急着请出来？且看这懒字诀：
<img
src="img1.png"
loading="lazy"
width="1200"
height="630"
alt="xxx"
>
此法最妙处，是教那图藏身暗处时只管打盹，待得将将滚入眼帘，方抖擞精神现身。只是切记留好宽高尺寸，莫让版面如地震般摇晃——此事关乎CLS指标，不可不慎。
四、驿站传图，快马加鞭(CDN加速分发)
若说CDN，好比四方驿站。往日里图像从京城出发，跋山涉水；如今就近取图，八百里加急。
更兼有HTTP/3这等千里驹，比旧时快上一倍有余。
辅以那缓存头，长效缓存：
Cache-Control: public, max-age=30000000, immutable
如上设置，老客重访时，图像早已备在本地，省却多少脚程。某电商试用此法，图速竟快了三倍不止，可见其效。
更有甚者，九天之上自配服务，内置自动格式转换（云端实时转换WebP/AVIF格式，节流表率）。
五、结语
图片优化之道，贵在四两拨千斤。择对格式，如卸重甲；尺寸合宜，似换轻履；懒加载法，好比行军省粮；CDN驿站，便是快马传书。近日某站依计施行，图速由慢至瞬，流量省半。诸君若不信，何不用Lighthouse照妖镜一验？须知每省百KB，贫寒设备便少受一分煎熬。这网页性能的账，原是要算到毫厘的！
