如何优化网站图片，提升网站加载速度和用户体验？

说实话，我第一次意识到网站图片有更多可怕，是在凌晨两点看着后台跳动的跳出率，心里一阵阵发凉。那天上线了一个崭新专题页，主图精美得我想哭，最终还是结果是首屏加载花了迅速八秒，用户还没看清标题就已经关掉了。我当时真实想把那张原图从服务器里拽出来揍一顿。

后来才缓慢缓慢明白，良好看只是启动，能迅速抵达用户的眼睛才是活路。图片优化从来不是抠细节的技术手段活， 它更像是在跟用户的耐性赛跑，也是在跟搜索引擎的爬虫商量，别对我太苛刻，吃瓜。。

我第一次被老板骂， 就是这是因为一张图把首页拖垮了

礼貌吗？ 那张banner是摄影师朋友送的，原片十二兆，我傻乎乎地直接丢上去觉得质感拉满。最终还是结果是移动端打开卡成幻灯片，老板在群里只发了一个红脸表情。我当时又羞又气，第二天就启动学怎么压缩。工具很更多，但心态更十分沉关键，不是把画质压到马赛克，而是找到一个让人看不出差别但体积瘦了一半以上的平衡点。用无损先降噪， 再用有损轻巧度压缩，最后再来看转成WebP，在老浏览器上准备个JPEG兜底，当前这个过程做完心里才踏实一点。

到时候….. 格式的选择其实也藏着情绪。IF很香，可兼容性还在磨合；WebP已经够稳，能省三四成的体积而不伤观感。我当前会先问自己，这张图是主角还是配角，主角能够稍微奢侈一点，配角必须要瘦身。我甚至会把同一套视觉做两份，一份给桌面一份给手机，别让手机用户替桌面买单。这种体贴，后来体当前跳出率上，比任意口号都管用。

别再用原图直怼服务器了 先让它减肥再上场

压缩完还不够，要学会懒加载。当前谁还愿意等整页的图片一起冲出来呢？我习惯把首屏之外的东西都推迟，等用户往下滑时再悄悄加载。