本文话题：网站图片优化，网站速度。
不得不说，颜sir直播间，真的就是在挖宝。
虽然金矿在线下课，但是，没钱有闲的，直播间也是能捡到宝的。最重要的，我认为是可以改变你的一些固有的错误思维。
就比如，今天直播间所说的一个话题：
你是把图片转换成webp格式之后，再上传到你的网站的，还是上传到网站之后，再转成webp格式的？
不卖官司，这里直接给答案：正确做法是，上传到网站之后再转WebP格式。
WebP是啥？什么转来转去，传来传去的？且听我慢慢道来。
以下为内容大纲：
事情还要从昨天的直播间说起，颜sir测评的一个网站是：https://scarf.com/。
一打开网站，师父就觉得这个网站速度不是很快，所以用了测速工具测了一下。
手机端速度20
下面有一条优化建议：采用新一代格式提供图片，说穿了，就是要用webp格式的文件。
几个月前，我在测试自己网站的时候，也看到这条优化建议，所以，我悟了，为了网站速度，我要把图片全部翻新一遍，用webp格式的图片，尽善尽美嘛，舔狗谷歌嘛。
自此，我开始了我的图片优化之路。
我的思路如下：
压缩图片第一招：把较大的的图片（宽度大于1000px），先用PS改到1000px宽
压缩图片第二招：把图片放到Tinypng（https://tinypng.com/ )去压缩一遍
压缩图片第三招：把压缩后的图片用软件转换成webp格式，上传网站
Tips：我的傻帽操作，是在第三招犯了错误。至于第一招，第二招，是图片处理的根本方法，还是很实用的，不仅仅是建站，也包括日常给客户发图片，不要一张原图发过去，有的时候，单反直出图，一张十几MB的图片，就直接发过去，没有必要，你可以根据第一步，第二步处理一下，按需处理，Tinypng这个网站很神奇，针对大的图片，可以压缩很多，而且，画质基本上没有改变，可以试一下。
你用直出的原图，上传网站，就算转换成WebP，它还是大。
下面继续：
就这小小的三步，可是花费了我不少时间，一开始，我不知道，第一步和第二步先做哪个？还调换了一下步骤来做，后来发现先用Tinypng去压缩，再用PS改像素宽度，甚至比原图大小还要大，我也是醉了，后来调换了一下顺序，这样的折腾也花费了一些时间。
接着就是把JPEG转换成WebP格式的问题了。
一开始，本着省钱的原则，当然免费的方法是首选，Google了一大圈，试了几个线上的转换网页，都不能批量转，有图片的限制，后来换了一个专门的免费软件，转换的最终画质和大小都不尽如人意（免费是有原因的，呵呵）。
还是花钱省事，最终选了一个付费线上转换的网站，就是这货：
https://convertio.co/zh/files
每个月9.9美金
我花费了大把的时间，把自己500多张图片转了webp格式，为什么是大把的时间？因为9.9美金的版本一次只能转25张。
上传到网站，一张一张替换掉了原来的图片，替换完毕，测了一下网速：嘿！确实快了，果真皇天不负有心人，心里好生欢喜。
凡是都有但是，要不就没有那么精彩了不是，但是...
上两天，听师父直播，说WebP格式有兼容问题，可能有些浏览器兼容不了。就说了这么句话，我也没太在意，想着，那谷歌还建议用WebP格式干啥呢？哦，是了，这个WebP格式是Google支持研发的，自家孩子，谷歌当然要更加偏爱一点的。
那我是不是要把图片重新换回来？但是师父的椰子碗网站不也是webp格式吗？到底哪个对？哪个错？纳闷了一阵，就没再管了。
直到昨天直播间，师父说到了这个话题，我才意识到自己是个彻彻底底的大傻帽。
Google是推荐WebP格式，椰子碗的部分图片也是WebP格式，但是师父的操作，跟我这个操作就完全不是一个思路。
先来解释为啥图片要用WebP格式，官方解释：
WebP（发音weppy），是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式
，派生自视频编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。
体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；
说人话：WebP是Google支持研发的一种图片格式，画质差不多的情况下，体积更小。
看关键词
Google支持，也就是为什么google建议你用webp格式。
体积更小，也就是会让网页更轻，更快被打开，这也是我们建站者为什么要用这种格式。
那直男直女们的做法，肯定就是整来webp格式图片上传网站喽，能有什么错呢？
但是，重点来了，这样做有个问题？
因为：WebP格式的图片存在兼容性问题。
在部分浏览器中是不兼容的，当然Google支持研发的图片格式，是支持Chrome的。但是另一部分的浏览器，例如：IE和safari是不支持的，which means, 用了兼容性不适合的浏览器的一部分人，是看不到你网站上的图片的，只会看到一格一格的空白，他知道那里就是图片，但就是看不到，想想看，这样的客户体验多么糟糕！
看了一下，WebP目前支持的浏览器有：
Chrome
Firefox
Microsoft Edge
Safari on iOS
Safari on macOS – partial support limited to macOS 11 Big Sur and later
Android Browser
Opera (desktop and mobile)
而且有的部分浏览器还有版本的要求，有的版本支持，有的不支持。
那这样鸡肋的WebP就弃之了吗？
不，正确做法，先把原格式图片上传网站，再用插件去转换。
直播了上说，这样做的好处是，插件会根据客户使用浏览器的不同，智能识别，支持webp格式的浏览器，就呈现webp的格式，这样速度会更快。不支持WebP格式的浏览器，就用源图片格式，这样客户体验会更好。
师父提到，这个插件是ShortPixel，我都想不到会有这样神奇的插件。
之前只是用了Tinypng后台压缩了一下上传的图片，Nitropack本身也有优化图片的功能，也没认真研究过这个问题。
插件ShortPixel，长这样式的，在Wordpress后台下载：
我下载了这个插件，想一探究竟，真的可以智能识别吗，太神奇了。
看到后台有一个选项：WebP Version。Version，应该和师父说的这个功能有关，点进去，看一下官方介绍：
Using ShortPixel Image Optimizer, you can create WebP images alongside the existing formats when optimizing your images. After installing the plugin, navigate to Settings
ShortPixel > Advanced and enable the option.
看这段介绍，不太确定，向下看了整篇文章，也没怎么看明白。这段里看到一个alongside这个单词，应该差不多大概可能吧。
但是，还有点怀疑：这个插件，是直接把图片转换成WebP的格式，还是智能识别，还是自己亲自测试一下看看。
思路如下：先用免费额度优化了一张图片，再把它插入一个页面，然后从不同的浏览器中去看它呈现出来的图片格式
Tips：Nitropack后台突然看到这个提示，功能类似的插件之间还是会互相掐架，先不管这个了。
分别放在这么几个浏览器中测试一下
Google浏览器中，右击保存图片，呈现了webp图片格式
IE浏览器中，右击保存图片，呈现了JPEG图片格式
360急速浏览器中，右击保存图片，呈现了JPEG图片格式
火狐浏览器中，右击保存图片，呈现了WebP图片格式
暂时电脑里就这几个浏览器，就试了这几个
果真有这样的神奇效果，Good！Great！Perfect！
那下面就捣鼓一下，如何在Wordpress后台操作这个插件吧。
后台插件区搜索：ShortPixel，安装，启用，注册，这些基础的就不说了。
补充一点：密码是自动生成的，在邮件里，找到之后，可以自行后台修改，API在ShortPixel官网的个人后台也找得到，填写就可以：
这里的API会显示无效，但是用起来是正常的。
Wordpress后台 - 设置 - shortPixel
高级，这里有这个选项，勾选一下，就是针对WebP格式优化的。
这是高级功能，是需要付费的，这个我认，付费的才是最便宜的，免费才是最贵的。
看一下付费原则：
积分制，2个积分，优化一张图片（实际上，并不是我们理解的一张图片，各种缩略图的优化也算一张图片，这个暂时还没研究过，不管他了，反正也不是很贵，系统提示，我的图库现在有520张图片，需要花费3990积分）系统推荐一次性购买10000积分，价格9.99美金
点击购买，付款。实付是10.19美金，好像还有个啥税，懒得管了。
对于， 安装这个插件之前的图片，有两种方法优化方法：
1：批量优化
2：媒体库手动优化
1：批量优化：
Wordpress后台 - 设置 - Shortpixel
设置 - 高级 - 勾选 also create WebP vision这个选项 - 下拉到最底下：保存并且转到批量处理
点击批量优化按钮，就自动优化了
2：媒体库手动优化
如果，需要针对某部分图片进行优化的，可以如下操作：
点击，媒体库，把视图改为列表视图，此时右侧有优化按钮，针对需要优化的图片，点击优化按钮
这里可以看到图片优化后的具体效果
或者全选，点击批量优化
安装插件之后的图片，在上传的过程中是自动优化的，不用手动点选，这个选项勾选是自动的，不要主动去掉就可以。
完结，撒花！
千兜万转，最终解决这个问题，承认自己是个傻帽，之前做了很多无用功，估计会被师父骂了。
直播间师父的态度，就很无奈。
但是，我也相信：世界上没有白走的路，每一步都算数。没失败过，就代表没有努力过，这个兜圈子的过程也学到很多东西，有进步。
不感慨了，按需，买了课程的，去学习课程，没买课程的，或者买了课程还有空闲时间的，去米课老师的各个直播间去蹲：无论是颜sir的，老华的，还是毅冰大大的，收获肯定是会有的，聚沙成塔。
现在这个发达的网络，何其幸运，可以有偶像天天陪着，他不香吗？
我在“颜sir”和“师父”的称呼中反复横跳，一边觉得称呼“颜Sir”客观公正，有距离感，更显尊重。一边又觉得称呼“师父”，更显得亲近一点，可以表忠心，也促使自己能更加努力，不给师门丢脸，期待真正能离偶像近一点，不是距离的远近，是能力更加靠近。又觉得自己年龄比颜sir大，称呼师父，脸皮好厚，哈哈。不管了，默默关注，崇拜，学习，模仿，希望有一天离偶像近一点。
不说了，建站去了，希望这篇文章对小伙伴们有帮助，同时，希望你们不要做我这样的傻帽！
添加表情
分享至微信
