专栏首页edsion的小窝借助数据万象(原万象优图),让 hexo 也用上 webp
原创

借助数据万象(原万象优图),让 hexo 也用上 webp

我的博客目前是使用 hexo + Next 主题搭建在 GitHub Pages 上的,使用 git 管理,并接入了 Travis-CI 自动发布。一直以来,对于图片的处理是我的一块心病。虽然hexo官方提出了资源文件夹的概念,但是{% asset_img example.jpg This is an example image %}这种方式几乎不被任何 Markdown 编辑器支持。

个人习惯是使用 Typora 码字,然后再用 vscode 的 markdownlint 扩展进行语法检查(代码格式上的洁癖)—— vscode 用得顺手,甚至可以放弃 Typora。

为了不滥用GitHub仓库、节省空间和提高访问速度,可以使用腾讯云的对象存储(COS) + 内容分发网络(CDN)。良心云每个月都赠送了一定的免费额度,对于个人博客来讲一般是够用的。

最近CDN也不能满足我的胃口了,在尝试极限优化的路上,我又发现了一个更有想象力的方案,那就是借助腾讯云的数据万象(原万象优图)服务,对图片进行预处理或者实时处理,从而减小图片体积、提高打开速度。

对于数据万象我在之前的一篇文章薅羊毛党的胜利 —— 合理利用腾讯云搭建服务提到过。

如果看完这篇文章觉得有帮助,欢迎点击我的推广链接:https://cloud.tencent.com/redirect.php?redirect=10371&cps_key=d61d10b4df29eee56b529f879e701bb2,购买腾讯云相关服务,谢谢支持。

第一步,开启相关服务,并进行配置

数据万象本身是基于对象存储服务的,并且也可以开启CDN对其进行加速。这里三者之间的关系有点难理清,我在尝试了一番之后,推荐按照如下顺序进行操作:

1. 创建存储桶

访问数据万象控制台,创建存储桶 Bucket(选择绑定-新建)。所属地域随便选择,访问权限“公有读私有写”,注意不要开启 CDN 加速。

刚开始先不要开防盗链、原图保护等高级功能,先把流程跑通再回来处理。

以下是我的配置页面,供参考:

20190702221156.png

2. 绑定自定义域名

为 Bucket 绑定自定义域名,并开启CDN。我的博客域名是blog.i1hao.com,所以我新建了一个子域名img.blog.i1hao.com用于此处。注意自己的域名要提前备案。使用自定义域名主要是好记,使用腾讯云提供的默认域名也不是不可以。

不使用自定义域名,可以在第一步直接开启CDN。创建时不建议开是为了缩短 CDN 的部署时间,毕竟部署一次要5分钟,我是不太想等的。

3. 为自定义域名申请 HTTPS 证书

都9102年了,HTTPS 应该是标配。证书颁发比较慢,所以尽量早点做好。这里就不推荐用 Let's Encrypt 的证书了,因为证书要用到 CDN 上,如果每三个月更新一次,就有点小麻烦了。

如果恰好用的是腾讯云的云解析,那你有福了。申请证书和配置到之后的CDN,只需要通过网页勾选几下就可以了,非常方便。

具体过程这里就不展开了,网上有大量文章介绍。

4. 配置CDN

这里主要分两步:配置 DNS 解析的 CNAME ,开启HTTPS。

下图是我在腾讯云云解析上的配置,如果用其它服务商,也可以参考:

20190702221642.png

至于 CDN 的配置,要去内容分发网络的控制台,在对应域名的“高级配置”中开启:

cdn_console.png

上图中还开启了HTTP2.0,也能一定程度上提高访问速度,建议开启。

稍等约5分钟,等待 CDN 部署完成。

5. 开启子账号,创建 API 密钥

为了您的账号安全,我强烈建议,对于腾讯云的每个产品都创建相应的子账号,并按照最小化权限原则进行设置。如果确定不想这么麻烦,可以省略这一步。

打开腾讯云访问管理控制台,从用户列表新建用户 - 子用户。

这里只要跟着流程走就可以了,没什么坑,我只放一个最终配置好的图吧(不用跟我保持完全一致):

20190702222910.png

这一步完成后,需要记住账号ID、SecretId、SecretKey,之后会用到。

6. 为子账号配置 Bucket 的访问权限

如果未启用子账号,则跳过此步骤。

打开腾讯云对象存储控制台(这里比较混乱,数据万象中没有权限配置的入口),在存储桶列表中找到数据万象中用到的 Bucket,在“权限管理”页面将子账号加入,并选择合适的权限:

20190702223537.png

7. 配置验证

到这里,有关腾讯云的基础配置就完成了。现在需要上传一张图片到 Bucket,然后通过自定义域名访问,验证整个流程是否打通。

首先通过 web 页面上传一张名为IMG_0526.png的图片。此时通过页面可以查到,系统分配给我的原始URL为:http://blog-i1hao-com-1251008864.picsh.myqcloud.com/IMG_0526.png。如果此链接无法访问(一般不可能),说明是对象存储或数据万象的配置(例如读写权限)有问题。

所以,通过我的自定义域名(CDN)访问此图片的地址为:https://img.blog.i1hao.com/IMG_0526.png。如果此处无法访问,大概率跟 CDN 有关。检查 CNAME 是否生效(nslookup命令),CDN 是否在部署中,和 HTTPS证书、回源策略等。

通过数据万象处理为 webp 格式的图片链接为:https://img.blog.i1hao.com/IMG_0526.png?imageView2/format/webp

20190702224558.png

数据万象添加水印后的图片链接为:https://img.blog.i1hao.com/IMG_0526.png?watermark/2/text/YmxvZy5pMWhhby5jb20%3D

20190702225242.png

后面这两个链接能访问,并且结果格式或显示不正确,可能是参数问题,或者样式分隔符设置问题,可以通过根据数据万象文档,进行排查。

图片上传后首次访问,可能由于 CDN 回源,或图片处理,速度不够理想,之后就没问题了。当然也可以手动去刷 CDN 缓存进行“预热”。 我这里只是用了数据万象中“图片格式转换”这一个功能,根据API在URL中附加参数,还可以实现图片缩放、裁剪、缩略图、文字和图像水印、获取EXIF信息、盲水印等等,很多高级的功能。

第二步,选择一个顺手的图片上传工具

macOS 上的 iPic 产品理念、执行力,都非常令人佩服,难能可贵的还是由独立开发者完成的。之后涌现大量模仿者都或多或少受到了一定的启发。

因为需要考虑到 webp 并非所有浏览器都兼容,所以我采用的是在 Markdown 中插入 html 的方案来解决的。另外还可以通过 JS 来检测,但是需要修改 hexo 代码,担心版本升级的时候还要自己处理冲突,所以没有采用。

纯html代码解决兼容性的示例代码如下:

<picture>
  <source srcset="https://img.blog.i1hao.com/IMG_0526.png?imageView2/format/webp" type="image/webp">
  <source srcset="https://img.blog.i1hao.com/IMG_0526.png?imageView2/format/png" type="image/png">
  <img src="IMG_0526.png">
</picture>

非常遗憾的是,我没有使用 iPic,而是PicGo,因为通过它的“自定义链接格式”功能,可以生成模版代码,能提高一些效率。但是 PicGo 唯一令我不太满意的就是,我在配置腾讯云COS为图床时,遇到了点小问题,如果是新手可能会卡在这里一会。

配置参照下图:

20190702233755.png

需要注意的是,腾讯云COS分 V4 和 V5 两个版本,现在新用户应该是 V5 的了。如果不确定,或者想从 V4 升到 V5,请发工单。 存储空间名,并非 Bucket 的名字,而是 Bucket 名称 + APPID。从数据万象看到的只是 Bucket 名称,对象存储显示的才是正确的“Bucket 名称 + APPID”。这里可能责任也不在开发者,在我印象里腾讯云好像很久之前升级 SDK 修改过此处。总之知道怎么正确即可。

接下来,在 PicGo 的设置里,将自定义链接格式修改为:

<picture><source srcset="$url?imageView2/format/webp" type="image/webp"><source srcset="$url?imageView2/format/png" type="image/png"><img src="$fileName"></picture>

使用的是$url$fileName占位符,PicGo会自动帮你替换。

最后,在 PicGo 的上传区,将链接格式改为Custom即可:

20190702234727.png

一般来说,上传图片的流程可以是:

  • 右键点击一个图片文件,选择复制(macOS上选择"拷贝"),点击 PicGo 在系统托盘中的图标,点击待上传。
  • 打开 PicGo 的界面,或直接拖拽图片文件。
  • 使用截图软件、图片编辑软件,将图片复制到剪贴板,点击 PicGo 在系统托盘中的图标,点击待上传。

以上三种方式任意一种,执行成功后,Custom那段代码都会自动复制到你的剪贴板,只要在需要的地方粘贴即可。

第三步,使用中意的 Markdown 编辑器,撰写文章

本文开始,我推荐过 Typora,自身能完美配合 iPic。但是由于它不能加载 html 中的图片,所以只能忍痛放弃。

20190702235553.png
20190703000042.png

vscode 对于程序员来说很容易上手,我只安装了Markdown All in Onemarkdownlint这两个插件,并且在(hexo 博客)工程根目录下创建了文件.markdownlint.yml,内容如下:

20190703000042.png

使用 vscode 编辑好博客文章后,执行发布,即可通过 Chrome、Safari等浏览器来验证此方案。

关于 Github Pages + Travis-CI 自动构建和发布的内容,可以参考我的 Github 仓库,不是本文主题就先不展开了。

总结

通过我目前这套方案,可以较好做到博客文章和图片资源的分离,并且在支持 webp 的浏览器上得到更好的体验;大量使用免费资源,降低部署和维护博客的成本;使用COS存储图片,还可以降低博客迁移成本。何乐而不为呢?

当然,缺点也不是没有,比如 vscode 如果作为 markdown 编辑器,距离专业的 Typora 还是有一定的差距,不支持 TOC 自动生成目录,不支持导出成PDF、图片等格式;访客达到一定量级后,可能会产生 CDN 费用。

如果大家还有其它方案,欢迎一起讨论,通过 Github 的 Issues 或博客上的其它方式都可以联系到我。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 利用腾讯云数据万象节省带宽,极致压缩图片

    目前我的博客使用Typecho + VOID(主题)部署在GCP香港上,访问速度不能说很慢,但是移动全线路绕美个人体验很差。之前直接套了nodecache的香港...

    jcjyxjs
  • 开源应用中心|为什么别人的WordPress那么快?

    越来越多的人使用 WordPress 来搭建网站了,W3techs最新数据统计显示[1],截止到2021年11月3日,全网有43.0%的网站都是基于WordPr...

    腾讯云DNSPod团队
  • 如何节省 1TB 图片带宽?解密极致图像压缩

    在不断出现的新格式被逐步应用之后,兼容性最好的传统老格式 JPEG 依然地位高居不下占据大幅带宽,如何在老格式上也继续挖掘优化点?

    腾讯技术工程官方号
  • 如何节省1T图片带宽?解密极致图像压缩

    图像已经发展成人类沟通的视觉语言。无论传统互联网还是移动互联网,图像一直占据着很大部分的流量。如何在保证视觉体验的情况下减少数据流量消耗,一直是图像处理领域研究...

    腾讯大讲堂
  • 腾讯云对象存储COS + 数据万象CI = 完善的图片解决方案

    PHP工程师,开源爱好者,WordPress插件Sync QCloud COS 作者,GitHub@sy-records

    云存储
  • 【玩转腾讯云】征文活动获奖名单公布

    由云+社区联合腾讯云免费体验馆及各产品团队举办【玩转腾讯云】征文活动,吸引入驻作者积极参加,非常感谢各位作者的参与。经过评委老师从产品创新性、实用性、可借鉴性、...

    云加社区
  • 【玩转腾讯云】腾讯云对象存储COS + 数据万象CI = 完善的图片解决方案

    在日常开发当中,我们必然会遇到一些图片存储问题,例如用户头像、聊天发生的图片等,而这些图片资源存储是个问题,普遍做法都是直接落在服务器上进行存储,而我推荐的是图...

    沈唁
  • 数据万象 CI 图片瘦身,实现超高压缩与视觉无损两全

    据统计,一个人获得的信息大约有75%来自视觉,而图片是人们最主要的信息源。进入信息化时代,人们越来越依靠计算机获取和利用信息,而数字化后的多媒体信息具有海量性,...

    云存储
  • 从体积到耗电,全方位解析SDK超级优化方法

    sdk优化过程,是一段血泪史,可以吐槽的地方无数。移动端sdk不像app一样方便,sdk发布后出现任何问题,都会影响到很多家的app。 ? sdk的优化,最大的...

    BestSDK
  • 腾讯云携手群晖,为数据实现“双保险”

    对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性、低成本、可靠安全等优点。通过控制台、A...

    云存储
  • 图片处理超规则和超限制报错排查

    腾讯云数据万象产品支持图片功能,但在图片处理过程中,对图片是有规则和限制,具体如下:

    卓恒
  • 腾讯AVIF技术介绍

    前言 2021年8月,腾讯OAV1正式赋能腾讯云数据万象, 为其提供最前沿的AVIF图片压缩技术,在图片主观质量相同的情况下大幅降低码率,节省储存空间。  背景...

    腾讯多媒体实验室
  • 对象存储 AVIF 图片压缩,即将公测!

    2021年8月,腾讯云数据万象以内测方式推出了最前沿的 AVIF 图片压缩服务,可以在图片主观质量相同的情况下大幅降低码率,节省储存空间。 经过3个月时间的内测...

    云存储
  • 万象优图:图片成本优化的瑞士军刀

    引言不知道每天上下班的你坐在地铁公交上会刷哪些app呢?也许正为周末和朋友去哪里聚会而挑选餐厅;也许刷着朋友圈看看朋友们有哪些新动态;也许在Ins上浏览着大V博...

    腾讯云数据处理团队
  • Hexo博客静态资源加速

    jsdelivr是一个免费的CDN服务,可以利用它配合github来为页面静态资源提供加速,有效提升资源加载速度。

    Akilar
  • Web 性能优化: 图片优化让网站大小减少 62%

    图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。

    Fundebug
  • 【对象存储COS】利用数据万象CI对影像内容空间进行优化

    业务量的不断扩大,导致对象存储的存储空间以及流量迅速增大,尤其是图片业务,web中最关键的部分,由于html的同步加载特性,通常是一张加载完才能加载下一张,在本...

    Ar-Sr-Na
  • hexo-theme-yun 制作笔记

    还在用 WordPress 的时候,总是喜新厌旧,经常换主题。且装了一堆插件,速度慢还容易崩。 而迁移到 Hexo 之后(小水管服务器太慢,拿去挂 MC 了。根...

    云游君

扫码关注云+社区

领取腾讯云代金券