Duke Yin
Duke Yin
2018年8月21日

在建设网站的过程中，很多时候会需要同一张图片输出各种尺寸以满足网站样式的需求，比如”题图”：

在首页需要小小的缩略图，

在文章列表页需要中等的缩略图，

单篇文章又需要更大的甚至全尺寸的图片。

WordPress自身对于新上传的图片会自动裁切成三种缩略图，加上原图，一共有四种尺寸规格，在后台可以自定义三种缩略图的宽高。

在较为简单的主题中，四种尺寸看似足够用了，但是当主题较为复杂，各种页面展示图片时所需的尺寸不一，四种尺寸就很难满足我们的需求。

早年从一个大师处得到一个神器，只有一个php文件，叫做：

WordPress主题裁切图片的探讨

1 TimThumb.php

这个文件最厉害的是，你只要访问它并在后面跟上你要裁切的图片地址、目标尺寸，它就会直接返回给你一个准确的裁切后的结果，举个栗子：

http://www.site.com/timthunmb.php?src=http://www.site.com/image.jpg;w=500;h=500;zc=1

当你访问这个URL地址，你就会得到强制被裁切成500像素宽，500像素高的图片，不论原图是多大或多小。

优势

  1. 结果图像完全按url参数控制，非常灵活，不需要统一设置；
  2. 参数只针对单张图片，不会像wordpress内置裁切一样统一裁切占用过多硬盘空间；
  3. 切过的图会缓存在临时目录中，下次访问不占用服务器资源；

劣势

  1. timthumb的图片url都带一大堆参数，非常丑，而且对搜索引擎不友好。
  2. 裁切过的临时文件并不是图片文件，每次调用都需要带参数。
  3. 带参数的URL对CDN也不友好，裁好的图片无法被大多数CDN服务识别，造成图片无法显示。
  4. 已被证实有安全性漏洞，而且作者已经放弃了这个项目，七八年没有更新了。

综上所述，Timthumb并不是一个好的选择。

WordPress主题裁切图片的探讨

2 add_image_size() 函数

当Wordpress自带的三种缩略图尺寸不能满足主题需求，你还可以用add_image_size()这个函数增加缩略图的种类，比如：

add_image_size( 'custom-size', 220, 180 );

add_image_size( 'custom-size', 220, 180, true ); //hard crop mode

add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) ); //hard crop left top

直接写在functions.php即可，可以在上传图片的时候生成任意多种尺寸。

优势

  1. 该函数是Wordpress原生函数，不依赖第三方，安全稳定。
  2. 切出的图片直接存在原图目录，调用的是一张真正的图片，SEO友好，CDN友好。

劣势

  1. 仅针对添加函数后上传的图片生效，旧的图片不会自动裁切。
  2. 对每一张上传的图片都会按各个尺寸裁切——不论用不用得到，浪费硬盘空间。
  3. 当你更换主题或是修改缩略图大小，需要用插件全站重新生成缩略图，非常麻烦。

很显然，用add_image_size()裁切图片仅仅适用于简单的主题，而且日后的修改和更换主题非常麻烦，也不是我们所需要的图片裁切方案。

3 CDN提供商的图像处理API

目前主流的 七牛、阿里云OSS、又拍云都提供了图像处理API，类似Timthumb一样发送一个带参数URL请求，提供商就会返回给你一个处理好的图片。

现在各家的API都越来越强大，除了基本的缩放、裁切，还有锐化、模糊、找平均色值，真是眼花缭乱。

比如七牛

http://cdn.site.com/image.jpg?imageMogr2/gravity/center/thumbnail/1024x1024/crop/1024x500 //以中心缩放，不论原图尺寸多大，结果是1024X500的图片


http://cdn.site.com/image.jpg?imageMogr2/blur/10x5 //得到一张模糊了的图片 模糊半径10 标准差5

这种图形处理跟Timthumb非常相像，但是最核心的不同是，所有处理任务都是在服务商的电脑里完成的，包括最终结果图像也并不是在你的服务器里，除了不占用服务器资源，其自带的CDN也能让图片加载更加快速。

优势

  1. 可以在主题的各个位置随意设置不同参数，针对位置进行不同尺寸图片裁切，灵活，花样多。
  2. 速度非常快。
  3. 处理工作交给提供商，自己的服务器非常轻松。
  4. 类似Timthumb，二次修改非常简单，修改url参数即可。

劣势

  1. 类似Timthumb，图像URL一堆参数，不美观，不利于SEO。
  2. 切好的图都不在自己服务器，一旦提供商宕机，或者自己账户出问题，整站图片都要消失，尽管可能性不大但风险难以把控。
  3. 三家对Wordpress都没有特别完善的Wordpress平台对接方案，爱好者WPJAM曾出过一个七牛插件，但是裁切图像用的是七牛的基础处理API，没有高级处理，致命缺点是只能缩小图片，不能放大，有时候会造成版面的错乱。
  4. 我在《我为什么要舍弃Wordpress七牛插件》这篇文章里也说了为什么不用WPJAM的插件。

曾经，七牛的图像处理是我放弃Timthumb之后的首选，但是经历过几次因为某插件带来的恶心之后，我放弃了用七牛API裁图。

WordPress主题裁切图片的探讨

3 Aqua Resizer

Aqua Resizer可能是对上述几种方案进行取舍后的结果，首先感谢作者。

类似TimThumb，Aqua Resizer也是仅一个PHP文件，但比TimThumb高级的是，AR的裁切完全是调用Wordpress内置裁图机制，通过添加一个函数来裁切图像，而不是利用底层的PHP来处理图像。

不同于Wordpress内置函数add_image_size()，AR的裁切完全是On the fly，也就是当访问页面模板碰到函数的时候，才开始裁切，不干预新上传的图片。

而且，裁切后的图像会直接在文件名后添加宽高数字存储在原图路径，第二次访问直接调用。

优势

  1. 调用Wordpress内部机制裁图，不依赖任何第三方，安全，稳定。
  2. 缓存图片与Wordpress缩略图格式一致，存储在自己服务器，安全放心。
  3. 前端直接输出缩略图的URL，对SEO友好，对CDN友好。
  4. 仅对需要的图片裁切需要的尺寸，不会对所有图片都“一刀切”。
  5. 通过对各个位置的函数写参数，可以很轻松的控制图片的裁切。

劣势

  1. 对于新做的主题首次访问，如果图片量太大，会造成服务器内存爆掉。
  2. 修改裁图的函数会新裁切出图片，旧图会占用空间。
  3. 换主题的时候，仍然存在多余图片不好清理的问题。

至今，Aqua Resizer是综合评价下来最合适的图像裁切插件。目前这个站点（dukeyin.com）以及Keepmins，都已经完成了从七牛转变成AquaResizer，它不像Timthumb一样强到自己全是缺陷，也不像Worddpress自身切图一样死板无可救药，比起七牛阿里云OSS又多一份保守和贤惠，在没有更好选择的时间，我想我会一直使用Aqua Resizer。

@科技

本作品采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)进行许可.

赞赏
donate
感谢您的赞赏
接受支付宝及微信支付。

您的捐赠事迹将被永远铭记在此网站的鸣谢页面。