利用OSS图片处理代替timthumb.php生成缩略图

Posted by 橙叶 on Mon, Jun 12, 2017

遇到问题

博客做动静分离有一段时间了,但一直都存在一个严重的问题:首页缩略图是利用主题自带的timthumb.php生成的。相较于WordPress自己裁剪的参差不齐、大小不一的缩略图,这的确是一个不错的解决方案,但是也使得博客不能做到彻底的动静分离。

这样生成的缩略图的URL一般为

https://www.orgleaf.com/wp-content/themes/lensnews/includes/timthumb.php?src=https://img.orgleaf.com/2017/05/a_picture.jpg&h=338&w=600

虽然我已经将图片存放到了img.orgleaf.com这个域名下的OSS里,但是缩略图却是timthumb.php从img.orgleaf.com里获取图片、处理后得到的,实际上仍然是从www.orgleaf.com中下载。

这样问题就大了,网站服务器的带宽一般不大,比如我这种1M(最大125kb/s)的小水管,与OSS(尤其搭配CDN之后)的海量带宽根本没法比,并发处理能力也不是也个级别。之前为了解决这个问题,我将ECS的带宽升级为2M,不过也是治标不治本,效果不算很好,成本却不低(升级成6个月的2M带宽花了我200大洋)。

另外,timthumb.php对图片的处理也会消耗一定的服务器资源。存在安全隐患。

解决思路

后来我看到OSS其实自带图片处理功能。如果能从OSS中直接得到处理好的图片,同时解决了加载速度和图片样式的问题,岂不美哉?

简单看了一下OSS有关图片处理的文档,发现二者都是通过URL尾部的参数指定图片的缩放大小,OSS则是使用

http://example.com/pic.jpg?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数]

根据我对php粗浅有限的了解,实现起来应该不难!

Code

这儿不便直接引用本站主题作者的代码,就从网上的一篇教程WordPress使用timthumb.php截取文章缩略图上扒了一个类似的代码下来。部分原代码是这样的:

<img src="<?php bloginfo('template_url');?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h='.$height.'&w='$.width.'&zc=1" alt="<?php the_title(); ?>" class="thumbnail"/>

只需要保留.$height.和.$width.这两个变量就行了。

经过反复测试,最适合的OSS图片处理参数是

?x-oss-process=image/resize,m_fill,h_高度,w_宽度,limit_0

 ,效果与timthumb.php的处理效果基本相同。(其实找到最适合的处理参数才是最麻烦的事,我试了一中午……)

那么应该是这样的:

<img src="<?php echo post_thumbnail_src(); ?>?x-oss-process=image/resize,m_fill,h_'.$height.',w_'.$width.',limit_" alt="<?php the_title(); ?>" class="thumbnail"/>

效果

不开启lazyload,首页加载完毕总共用了1.89s。



comments powered by Disqus