在之前的讨论中，我们已经明白了“速度”的重要性，也学会了用专业的指标去衡量它。当你用GTmetrix这样的工具给你的网站做一次“CT扫描”后，我敢打赌，在报告的“问题列表”里，排名第一的、最“病入膏肓”的，几乎永远是同一个问题——图片。
我们总是在追求更高清的图片、更惊艳的视觉效果，但我们常常忘记，每一张未经优化的、巨大的图片，都是一枚插在用户体验咽喉上的、尖锐的刺。
我们陷入了一个两难的境地：要么追求画质，牺牲速度；要么追求速度，牺牲画质。
但如果我告诉你，这根本就是一个伪命题呢？如果有一种方法，能让你在几乎不牺牲肉眼可见的画质的前提下，将图片的文件大小，轻松地削减80%，甚至90%以上呢？
今天，我们就来深入聊聊图片优化的“道”与“术”。
《图片优化的“道”与“术”：如何在不牺牲画质的情况下，将图片大小减少80%？》
要成为图片优化的“绝顶高手”，你不能只学“招式”（术），更要先领悟“心法”（道）。只有心法对了，招式才能发挥出最大的威力。
图片优化的“道”：三大核心心法
“道”，是你在点击任何“压缩”按钮之前，就必须建立的正确思维模式。
心法一：为最合适的场景，选最合适的“兵器”（格式）
图片格式，就像兵器谱。刀、枪、剑、戟，各有其用。你总不能用一把沉重的“屠龙刀”（PNG）去干“削水果”（显示照片）的活儿。
在网站的世界里，你必须认识这几样主流“兵器”：
JPEG (或JPG)：照片专用。这是当之无愧的“照片之王”。它被设计出来，就是为了处理像照片这样色彩丰富、细节复杂的图像。它采用一种“有损压缩”技术，能在人眼几乎无法察觉的情况下，极大地削减文件大小。记住，只要是照片，99%的情况下，选它没错。
PNG：透明背景与简单图形专用。如果你的图片需要一个透明的背景（比如你的Logo），或者它是由大面积纯色块、清晰线条组成的简单图形（比如软件截图、图表），那PNG就是你的不二之选。它采用“无损压缩”，能完美保留每一个像素的细节。但请千万不要用PNG格式去保存照片，它的文件大小会是JPEG的几倍甚至几十倍，简直是一场性能灾难。
SVG：Logo和图标的“终极形态”。SVG是一种“矢量”图形。你可以把它理解为，它记录的不是一个个像素点，而是“从A点到B点画一条曲线”这样的指令。这意味着，它极其微小（通常只有几KB），并且可以无限放大而不失真。你的品牌Logo、页面上的小图标，都应该尽可能地使用SVG格式。
GIF：仅用于短小的、色彩单一的动画。在今天，它除了在“表情包”领域大放异彩，在绝大多数网页动画场景下，都已经被更先进的视频格式或CSS动画所取代。
心法二：“差不多就行”的艺术（压缩）
请你现在，立刻，马上，抛弃那种“像素眼”的完美主义情节。
图片优化的目标，不是100%保留图片在专业显示器上的原始画质。而是在普通用户的屏幕上，让压缩后的图片，看起来和压缩前“没什么区别”。
这就是“有损压缩”的伟大之处。它会像一个聪明的收纳师，优先扔掉那些你大脑和眼睛最不敏感的、最不重要的图像信息。比如，在一片蓝色天空的图片里，它可能会把上百种极其细微的、肉眼难以分辨的“蓝色”，统一成几十种，从而极大地减少了需要记录的数据量。
结果是，图片质量可能从100%降到了85%，但文件大小，却可能从1MB骤降到了200KB。你损失了15%你根本看不出来的“完美”，却换来了80%的速度提升。这笔买卖，简直太值了。
心法三：杀鸡焉用牛刀（尺寸）
这是新手最最最容易犯的、也是后果最严重的一个错误。
你的单反相机，拍出了一张6000x4000像素的、高达10MB的精美照片。然后，你直接把它上传到了你网站的文章内容区。
而你的文章内容区的宽度，实际上只有800像素。
这意味着，用户的浏览器，需要先硬着头皮，把那个10MB的“庞然大物”下载下来，然后再耗费自己宝贵的CPU资源，把它硬生生地从6000像素宽，实时缩放到800像素宽来显示。
这是一种极其愚蠢的、彻头彻尾的资源浪费！
正确的做法是，在上传图片之前，就先想好：“这张图片，在我网站上，最大会被显示成多宽？” 如果答案是800像素，那你最多只需要上传一张1600像素宽（为了适配高清的Retina屏幕）的图片。任何超过这个尺寸的像素，都是在拖慢你网站速度、浪费用户流量的“垃圾”。
图片优化的“术”：三大实用招式
领悟了“心法”，我们再来学习具体的“招式”，就会事半功倍。
招式一：拥抱下一代“神兵利器”—— WebP 与 AVIF
我们前面说的JPEG、PNG，都是“上个时代”的兵器了。现在，Google等巨头已经为我们打造了更强的“神兵”。
WebP：这是Google推出的、旨在统一天下的“现代图片格式”。你可以简单地理解为：它集JPEG和PNG的优点于一身，但体积却能比它们再小个20%-50%。它既能处理照片，也支持透明背景，是今天网站图片格式的“最优解”。
AVIF：比WebP更年轻、更激进、压缩率更高的新一代格式。目前浏览器支持度还在追赶中，但潜力巨大。
你可能会说：“这些新格式，我的PS也存不了，怎么用？” 别急，你不需要自己手动转换。很多现代化的CDN服务，都提供了“图片自动优化”功能。你只需要上传一张普通的JPEG或PNG，CDN会自动判断用户的浏览器是否支持WebP，如果支持，它就会在“云端”实时地、无感知地把你的图片转换成WebP格式再发给用户，让你的网站坐享技术红利。
招式二：一套拳打下来——“缩放-压缩-上传”三步走
对于每一张需要上传到网站的图片，请你都严格执行以下“三步拳法”：
第一步：缩放（Resize）。使用任何图片处理软件（哪怕是Windows自带的“画图”），先把图片的尺寸，缩放到你需要的那个“最大显示尺寸”。比如，一张
4000x3000的图，先缩成1200x900。第二步：压缩（Compress）。把缩放好的图片，扔进一个在线压缩工具里。我强烈推荐两个免费的“神器”：
TinyPNG.com(它也能压JPEG) 和 Google的Squoosh.app。这些工具，会用最先进的算法，帮你智能地完成“有损压缩”，找到画质和大小的最佳平衡点。第三步：上传（Upload）。只有经过了以上两步“瘦身”的图片，才有资格被上传到你的网站后台。
招式三：终极绝招——“懒加载”（Lazy Loading）
这是一个改变游戏规则的“加载策略”。
比喻一下：你打开一个很长的网页，就像进入一个长长的画廊。
传统加载方式：在你踏入画廊大门的一瞬间，管理员就把整个画廊所有的灯，全部打开了。哪怕你只打算看门口的第一幅画，你也必须等到走廊尽头最后一幅画的灯也亮起来，才算“加载完成”。
懒加载方式：当你走进大门时，管理员只打开你眼前那一幅画的灯。其他的画，都还处在黑暗中。只有当你慢慢往前走，快要走到第二幅画的时候，第二幅画的灯，才会“智能”地亮起来。
懒加载，就是只加载用户当前屏幕“看得到”的图片。那些在屏幕下方、需要滚动才能看到的图片，会等到用户快要滚动到它们的时候，才开始加载。
这对于那些图片极其丰富的长页面（比如电商列表页、博客首页）来说，效果是立竿见D影的。它能极大地提升页面的“首次可视时间”，让用户感觉网站“秒开”。
我们来见证一次奇迹
我们来实战演练一下，看看80%的压缩目标，是不是吹牛。
原始文件：一张来自你相机的
5000x3750像素的照片，体积：8MB (8000 KB)。第一步：缩放。你的网站只需要1500像素宽。你把它缩放到
1500x1125。此时，体积可能已经骤降到了 700 KB。第二步：压缩。你把这张700KB的JPEG，扔进TinyPNG，它帮你压缩到了 150 KB。画质？你用肉眼几乎看不出任何区别。
第三步：格式转换。如果你的网站启用了CDN的WebP转换功能，这张150KB的JPEG，在实际发送给用户时，会变成一张大约 100 KB 的WebP图片。
最终，用户实际下载的图片，只有100KB。从8000KB到100KB，我们把图片大小，减少了98.75%！
现在，你还觉得图片优化，是一件无关紧要的小事吗？它不是。
它是一门艺术，也是一门科学。它是你作为网站运营者，对用户体验最基本的尊重，也是你能为你的网站速度，做的最立竿见影、回报率最高的一项投资。
