Copy

CC的部落格更新啦

博客图片的webp之路
CC康纳百川   Nov 29, 2020 04:38 pm  编辑

在主流浏览器都支持的情况下,我趁着文章还少,把所有文章的图片全部转换为webp格式,以寻求更快的加载速度和丝滑的体验

webp转换

个人呢,不喜欢为了这简单的事去下载一个专门的软件,所以必定是找了很久,在搜索引擎和论坛看评论,以及综合个人使用经验,推荐以下平台

  • 没广告,做该做的事
  • 参数可调整

很抱歉,这篇文章一张截图也没有🤷‍♂️(就是我太懒了,而且也费时间)

智图

为什么推荐呢,因为对于临时的一张图片用起来还是不错的,而且图片品质参数可调,个人按需以及实际情况做单张图片转换或者优化压缩可使用这个平台

webp2jpg-online

「无需上传的图片转换器-简单、隐私、快速」官网是这么介绍的啦,纯前端处理,所以速度快慢取决于你的设备性能,适合批量图片处理的情况,同时多参数可调整,处理完毕后会把所有文件打包压缩自动下载

对于webp动态的处理,个人用多张gif试了一下,效果不是很理想,不推荐

如果处理过程中,长时间进度卡着不动,没办法,刷新吧

Gitee Pages(国内访问良好)

GitHub Pages

上面提到的都是静态图片,目前对gifmp4转换为webp支持较好的,很抱歉,我只找到了又拍云,虽然这是个demo,但真的很好用

WebP - 图片格式的发展趋势 - 又拍云

同时缺点吗就是不能选择图片质量,而且我这边使用只能在控制台Console找报错图片地址,然后新标签页打开保存处理好的webp动图,也是只支持单张图片处理,所以对于比较小的gif我还是推荐就用gif吧,除非你和我封面一样,几兆一张图必须得压缩,不然博客访问速度可想而知,同时浪费访客的流量

合并PR Actions

OneManager

流浪图床

鸡霸图床

鸡霸网盘

IMG.WANG

OneManager

视频

鸡霸网盘2号

teambition

OneManager

自动化

个人总结出了以下解决方案

我的博客图床仓库

我的README这样写道

  • 本仓库文件使用PicGo上传

  • 其中图片使用gulp imagemin压缩

  • (之后考虑加入webp转换👍,gulp作者貌似不考虑适配,虽然imagemin测试成功了,但是还是等等再说)

  • GitHub Actions压缩完成

  • 每天早晚8点左右各执行一次压缩

  • 当然也可以手动点击压缩一次

  • 同时游客点击Star也会帮忙压缩一次(谢谢)

  • 图片上传完毕一会儿会由Imgbot压缩提交PR

  • 然后由Restyled进行代码格式重置(图片也不需要了其实)

  • 最后由MergifyGithub Actions自动合并PR(比速度🚀)

  • (或由我打标签后由PRValet自动完成完成PR合并)

    全部换成webp,不需要自动压缩了,虽然自动压缩是真的方便

但还没完,如果继续使用GitHub做图床,jsDelivrCDN加速,我面临以下问题

  • 将来图片越来越多,仓库体积也会越来越大

  • 涉及到了jsd的滥用问题,万一哪天禁了,或者关系到我GitHub账户使用问题,后果很严重

  • 备份在哪,将来统一更换链接方便,有没有满足以下条件的图床

  1. 稳定,这是首要条件

  2. 免费,或者说够我这小型博客免费试用的量

  3. 支持批量上传下载,并且上传后文件名保持不变

  4. 支持API上传,以配合PicGo实现流畅的写作体验

  5. 相册功能要有,批量多种场景不同格式链接以适应不同需求

  6. 友好地支持webp格式(包括动态)

  7. 访问速度还不错

    ……

当然啦,这么显得我是不是过于贪心了,但真的没有一种比较好的解决方案,对我这种不是优秀博主的人也可以很好的使用免费资源为博客图片加速呢?

A:我也在慢慢摸索中,所以这篇博文会持续更新下去

  1. PicGo官网

    因为版本过多原因,这里不放加速下载链接,如果您访问过慢,不如试试加速脚本或者加速插件

    这里提供我个人搭建的加速站,您可以访问按照教程和说明下载

  2. 关于配置如果要写的话肯定要截图,这里放上别人的文章链接咯,大家自行比对

    PicGo+GitHub快速实现markdown图床

  3. 自动压缩

    1. 使用GitHub APP,也就是上面提到的

      • 图片上传完毕一会儿会由Imgbot压缩提交PR

      但这就涉及到了是手动合并PR还是自动合并PR的选择问题,如果你和我一样只要求压缩,实际上当一遍又一遍的压缩优化,推荐大家使用自动合并PR解决问题

      • 然后由Restyled进行代码格式重置(图片也不需要了其实)
      • 最后由MergifyGithub Actions自动合并PR(比速度🚀)
      • (或由我打标签后由PRValet自动完成完成PR合并)

      合并PR Actions仓库,详情可以去看README

    2. 使用GitHub Actions,每天定时压缩

      这有个好处就是由于是本仓库文件,所以省去了Secrects配置,直接push就行,也比较省心,同时图片压缩质量是通过调整参数可控的,当然也可以再每次博客写完,图片上传完毕后手动压缩一次,达到可控效果,毕竟我们并不希望上传一张照片自动压缩一次,浪费资源哦

  4. 自动转换

和自动压缩差不多,但我们说了,那是之前的解决方案,现在我们是要让博客使用webp,因此必须要向前看,自动转换为webp,同时jsd链接后缀也得自动改或者手动改,这我还在研究中

  • 其中图片使用gulp imagemin压缩

  • (之后考虑加入webp转换👍,gulp作者貌似不考虑适配,虽然imagemin测试成功了,但是还是等等再说)

    为什么这么说,已经配置了gulpfile.js,我不想再配置imagemin.js,少一个文件是一个文件

我们原来还在顾忌webp的支持问题,考虑自适应,加入判断,又拍云,https://webp.sh/ 也提供这样的功能,但现在我的态度是,你看不到我博客的图片是你我无缘

本文阅读完毕,您可以邮件回复 | 直达评论区 »
 
Copyright © 2020 CC的部落格, All rights reserved.
您收到这封邮件是因为您订阅了本站的邮件更新通知

想更改您接收这些电子邮件的方式?
你可以 更新您的偏好 或 取消订阅更新

Email Marketing Powered by Mailchimp