分享

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

遇到问题

博客做动静分离有一段时间了,但一直都存在一个严重的问题:首页缩略图是利用主题自带的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。

(3)

本文由 橙叶博客 作者:FrankGreg 发表,转载请注明来源!

热评文章

评论:

15 条评论,访客:15 条,博主:0 条
  1. avatar
    Tostring发布于: 

    你好,博主,我动静分离之后timthumb.php不能显示略缩图,访问略缩图地址出现404错误,你是如何解决这个问题的?我把设置成timthumb.php外链也支持,但还是没用。

  2. avatar
    一芦居发布于: 

    之前用的马文建的插件ALIYUN OSS,很简单,但是我现在的主题用水煮鱼的BISIC,实现起来却很麻烦,博主有办法吗?

  3. avatar
    付涛发布于: 

    你好,博主,我在按照你这个操作后,缩略图问题一直未解决,哎,闹腾了几个小时;
    我用的是BEGIN4.6主题包,请问缩略图这个问题可有修复后的文件,我可以直接覆盖呢;根据你文中说的<img src="?x-oss-process=image/resize,m_fill,h_’.$height.’,……这样一段在timthumb.php里面根本没有找到,麻烦你了;可以直接发我一份吗;谢谢

    • FrankGreg发布于: 

      额,不同主题的方法应该不同吧,我的这个只适用于LensNews

    • avatar
      章鱼的故事发布于: 

      你好 你的问题解决了吗? 我的也是begin主题,和你有同样的问题。

    • avatar
      章鱼的故事发布于: 

      你好 你的搞定了吗 我用的也是begin主题和你有同样的问题 求帮助 多谢

  4. avatar
    姜较瘦发布于: 

    你好。我试了好久没有搞定。我也想要一份更改后的文件,发我一份好么?谢谢啦

  5. avatar
    dmac发布于: 

    遇到同样的问题,能否邮件分享一下更改的文件?用的同一个主题,试了半天搞不定–!

      • avatar
        王朗发布于: 

        遇同样问题,求更改文件o(╥﹏╥)o

        • FrankGreg发布于: 

          用电子邮件发给你可以吗

          • avatar
            王浪发布于: 

            好的,万分感谢

  6. avatar
    IGK小高发布于: 

    学习了,最近缩略图还从源站下载真是糟糕,我也是1M的ECS

    • FrankGreg发布于: 

      之前整站CDN,首页加载时总是感觉怪怪的,很久之后才发现这个问题。

发表评论