写文章
大树修炼中
2022-05-10 16:13

2022.5.10 傻帽,你今天WebP了吗?

本文话题:网站图片优化网站速度。

不得不说,颜sir直播间,真的就是在挖宝。

虽然金矿在线下课,但是,没钱有闲的,直播间也是能捡到宝的。最重要的,我认为是可以改变你的一些固有的错误思维。


就比如,今天直播间所说的一个话题:

你是把图片转换成webp格式之后,再上传到你的网站的,还是上传到网站之后,再转成webp格式的?

不卖官司,这里直接给答案:正确做法是,上传到网站之后再转WebP格式。


WebP是啥?什么转来转去,传来传去的?且听我慢慢道来。

以下为内容大纲:

1:图片格式对网站速度的影响

2:关于图片优化,我的傻帽血泪之路

3:有关图片优化(WebP格式)的正确打开方式


1:图片格式对网站速度的影响

事情还要从昨天的直播间说起,颜sir测评的一个网站是:https://scarf.com/。

一打开网站,师父就觉得这个网站速度不是很快,所以用了测速工具测了一下。

1.png

手机端速度20

下面有一条优化建议:采用新一代格式提供图片,说穿了,就是要用webp格式的文件。

2.png

2:关于图片优化,我的傻帽血泪之路

几个月前,我在测试自己网站的时候,也看到这条优化建议,所以,我悟了,为了网站速度,我要把图片全部翻新一遍,用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张。

上传到网站,一张一张替换掉了原来的图片,替换完毕,测了一下网速:嘿!确实快了,果真皇天不负有心人,心里好生欢喜。


3:有关图片优化(WebP格式)的正确打开方式

凡是都有但是,要不就没有那么精彩了不是,但是...

上两天,听师父直播,说WebP格式有兼容问题,可能有些浏览器兼容不了。就说了这么句话,我也没太在意,想着,那谷歌还建议用WebP格式干啥呢?哦,是了,这个WebP格式是Google支持研发的,自家孩子,谷歌当然要更加偏爱一点的。

那我是不是要把图片重新换回来?但是师父的椰子碗网站不也是webp格式吗?到底哪个对?哪个错?纳闷了一阵,就没再管了。

直到昨天直播间,师父说到了这个话题,我才意识到自己是个彻彻底底的大傻帽。

Google是推荐WebP格式,椰子碗的部分图片也是WebP格式,但是师父的操作,跟我这个操作就完全不是一个思路。

什么是WedP格式,为什么要用WebP格式?

先来解释为啥图片要用WebP格式,官方解释:

WebP(发音weppy),是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式
,派生自视频编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;

说人话:WebP是Google支持研发的一种图片格式,画质差不多的情况下,体积更小。

看关键词

Google支持,也就是为什么google建议你用webp格式。

体积更小,也就是会让网页更轻,更快被打开,这也是我们建站者为什么要用这种格式。

那直男直女们的做法,肯定就是整来webp格式图片上传网站喽,能有什么错呢?

WebP的兼容性问题

但是,重点来了,这样做有个问题?

因为:WebP格式的图片存在兼容性问题。

在部分浏览器中是不兼容的,当然Google支持研发的图片格式,是支持Chrome的。但是另一部分的浏览器,例如:IE和safari是不支持的,which means, 用了兼容性不适合的浏览器的一部分人,是看不到你网站上的图片的,只会看到一格一格的空白,他知道那里就是图片,但就是看不到,想想看,这样的客户体验多么糟糕!

看了一下,WebP目前支持的浏览器有:

  1. Chrome

  2. Firefox

  3. Microsoft Edge

  4. Safari on iOS

  5. Safari on macOS – partial support limited to macOS 11 Big Sur and later

  6. Android Browser

  7. Opera (desktop and mobile)

而且有的部分浏览器还有版本的要求,有的版本支持,有的不支持。

WebP的正确打开方式

那这样鸡肋的WebP就弃之了吗?

不,正确做法,先把原格式图片上传网站,再用插件去转换。

直播了上说,这样做的好处是,插件会根据客户使用浏览器的不同,智能识别,支持webp格式的浏览器,就呈现webp的格式,这样速度会更快。不支持WebP格式的浏览器,就用源图片格式,这样客户体验会更好。

师父提到,这个插件是ShortPixel,我都想不到会有这样神奇的插件。

之前只是用了Tinypng后台压缩了一下上传的图片,Nitropack本身也有优化图片的功能,也没认真研究过这个问题。

插件ShortPixel,长这样式的,在Wordpress后台下载:

3.png

我下载了这个插件,想一探究竟,真的可以智能识别吗,太神奇了。

看到后台有一个选项:WebP Version。Version,应该和师父说的这个功能有关,点进去,看一下官方介绍:

4.png

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的格式,还是智能识别,还是自己亲自测试一下看看。

思路如下:先用免费额度优化了一张图片,再把它插入一个页面,然后从不同的浏览器中去看它呈现出来的图片格式

5.png

Tips:Nitropack后台突然看到这个提示,功能类似的插件之间还是会互相掐架,先不管这个了。

6.png

分别放在这么几个浏览器中测试一下

7.png

Google浏览器中,右击保存图片,呈现了webp图片格式

8.png

IE浏览器中,右击保存图片,呈现了JPEG图片格式

9.png

360急速浏览器中,右击保存图片,呈现了JPEG图片格式

10.png

火狐浏览器中,右击保存图片,呈现了WebP图片格式

11.png

暂时电脑里就这几个浏览器,就试了这几个

果真有这样的神奇效果,Good!Great!Perfect!

如何使用ShortPixel这个插件?

那下面就捣鼓一下,如何在Wordpress后台操作这个插件吧。

后台插件区搜索:ShortPixel,安装,启用,注册,这些基础的就不说了。

补充一点:密码是自动生成的,在邮件里,找到之后,可以自行后台修改,API在ShortPixel官网的个人后台也找得到,填写就可以:

API.jpg

这里的API会显示无效,但是用起来是正常的。spacer.gif

Wordpress后台 - 设置 - shortPixel

12.png

高级,这里有这个选项,勾选一下,就是针对WebP格式优化的。

13.png

这是高级功能,是需要付费的,这个我认,付费的才是最便宜的,免费才是最贵的。

看一下付费原则:

积分制,2个积分,优化一张图片(实际上,并不是我们理解的一张图片,各种缩略图的优化也算一张图片,这个暂时还没研究过,不管他了,反正也不是很贵,系统提示,我的图库现在有520张图片,需要花费3990积分)系统推荐一次性购买10000积分,价格9.99美金

14.png

点击购买,付款。实付是10.19美金,好像还有个啥税,懒得管了。

15.png

对于, 安装这个插件之前的图片,有两种方法优化方法:

1:批量优化

2:媒体库手动优化

1:批量优化:

Wordpress后台 -  设置 - Shortpixel

16.png

设置 - 高级 - 勾选 also create WebP vision这个选项 - 下拉到最底下:保存并且转到批量处理

17.png
18.png

点击批量优化按钮,就自动优化了

19.png

2:媒体库手动优化

如果,需要针对某部分图片进行优化的,可以如下操作:

点击,媒体库,把视图改为列表视图,此时右侧有优化按钮,针对需要优化的图片,点击优化按钮

20.png
24.png

这里可以看到图片优化后的具体效果

21.png

或者全选,点击批量优化

22.png

安装插件之后的图片,在上传的过程中是自动优化的,不用手动点选,这个选项勾选是自动的,不要主动去掉就可以。

23.png

完结,撒花!94.png94.png94.png94.png94.png94.png

千兜万转,最终解决这个问题,承认自己是个傻帽,之前做了很多无用功,估计会被师父骂了。

直播间师父的态度,就很无奈。

但是,我也相信:世界上没有白走的路,每一步都算数。没失败过,就代表没有努力过,这个兜圈子的过程也学到很多东西,有进步。

不感慨了,按需,买了课程的,去学习课程,没买课程的,或者买了课程还有空闲时间的,去米课老师的各个直播间去蹲:无论是颜sir的,老华的,还是毅冰大大的,收获肯定是会有的,聚沙成塔。

现在这个发达的网络,何其幸运,可以有偶像天天陪着,他不香吗?

我在“颜sir”和“师父”的称呼中反复横跳,一边觉得称呼“颜Sir”客观公正,有距离感,更显尊重。一边又觉得称呼“师父”,更显得亲近一点,可以表忠心,也促使自己能更加努力,不给师门丢脸,期待真正能离偶像近一点,不是距离的远近,是能力更加靠近。又觉得自己年龄比颜sir大,称呼师父,脸皮好厚,哈哈。不管了,默默关注,崇拜,学习,模仿,希望有一天离偶像近一点。

不说了,建站去了,希望这篇文章对小伙伴们有帮助,同时,希望你们不要做我这样的傻帽!

关注作者,看更多TA的好文章 个人展示
大树修炼中 谁在评论里提醒下这位作者,懒得连名片都没填写。
举报
收藏
转发
0/500
添加表情
评论
评论 (11)
最近
最早
3天2夜学会建站

大树修炼中

B2C小SOHO一枚,心之所向B2B。米课圈半路出家野生建站人,颜sir死忠粉,践行米课圈外贸建站体系,终身学习践行者,爱好折腾,喜欢新鲜,运动,阅读,摄影,网站设计,不聪明,但是勤奋。

向TA提问
置顶时间 :

设置帖子类型

普通
新闻
活动
修改

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示