阿里云 OSS 图片缩略图尺寸调整

在微信小程序中使用了阿里云 OSS 来存储图片文件。在需要展示图片列表时，例如瀑布流布局，如果能直接访问缩略图，可以大大减少拉取图片的流量，即节省了流量成本，也加快了渲染速度，用户体验更佳。

之前只用过七牛云的图片存储参数查询，查了一下 OSS 也支持，官方文档地址：

https://help.aliyun.com/document_detail/44688.html

等比缩放

按宽高缩放，例如：

• 图片缩放为高100 px：resize,h_100
  
• 缩放模式为lfit：m_lfit
  

图片处理的URL为

http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,h_100,m_lfit

即在后面缀上

?x-oss-process=image/resize,h_100,m_lfit

小程序示例

<image src="{{item.coverImg + '?x-oss-process=image/resize,w_600,m_lfit'}}"
    class="column_pic" mode="widthFix" />

需要优化的地方

以信息流为例

• 作者头像。因为用户可能上传很大的头像
  
• 文章缩略图
  

VIM Snippet

snippet oss_thumbnail "html_wxml" i
'?x-oss-process=image/resize,w_600,m_lfit'
endsnippet

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式