Whidy Writes

响应式图片功能上线

发布于:(更新于:

年后不是很忙,抽了点时间研究了下年前要做的响应式图片,虽然对于这个小博客,提升并不大,但是在这次研究过程中还是学到不少东西。

优化这个,方法很多,主要是考虑到图片尽量在CDN上加速访问,所以最后放弃了 gatsby 内置的 image 处理。

而服务端处理的方法也很多,但是很多方式并不利于维护管理和使用,比如:

  • 腾讯云服务器有一个自动任务,上传文件后,会自动触发调整尺寸,但是压缩体积非常糟糕,而且每次从腾讯云的COS上面进行上传操作也是非常繁琐,不利于文章创作。
  • 我也写了个node端上传图片到COS的页面,采用sharp自定义配置进行图片处理,部署好访问地址,能够解决上传麻烦的问题,但是这又是一个独立的服务。也是不太好用。
  • 最后仔细研究了Strapi的Upload,创建了一个本地的模块进行扩展Upload功能,基本满足了所有需要。

Gatsby在Markdown上面的图片处理,代码实现如图:

代码展示 {responsive-image-available-code.webp,818w}

总结

  • 学习了sharp的使用方法,了解了性能非常好的开源的图片处理工具,当然我也简单的对比过TinyPNG的压缩,还是TinyPNG比较强。
  • 学习了如何自己写一个Node.js modules
avatar

whidy

一名爱折腾的前端开发工程师,喜欢打篮球和分享 ฅʕ•̫͡•ʔฅ