【Tint-K主题教程】优化修改timthumb缩略图脚本缩略图质量策略提高加载速度 Tint-K/Cute主题教程 第1张

简介

TimThumb 是一个非常简洁方便用于剪裁图片生成缩略图的PHP程序,只要给它设置一些参数,它就可以生成缩略图。现在很多WordPress主题中,都使用TimThumb这个PHP类库进行缩略图的处理。

那如何知道主题是否使用了自动缩略图TimThumb.php脚本?我们可以打开所使用主题目录,查看是否有名称为TimThumb.php或TimThumb.php文件及图片缓存文件夹cache,如果有,说明你所用的主题加载了该脚本。

在确认了当前主题使用了 TimThumb 脚本后,我们就可以修改 TimThumb 脚本的参数和策略降低所生成的缩略图片质量来提高网站文章列表页的载入速度。

优化过程

下面以Tint-K主题为例(主题不同可能所需修改的代码位置文件也会不同,但具体的参数代码应该都是一样的)分享给大家具体的修改方法。

首先需要打开主题根目录下Tint/core/library/timthumb/Timthumb.php文件,搜索到 DEFAULT_Q 这个参数,这个值是缩略图片质量的意思,如下图所示:

【Tint-K主题教程】优化修改timthumb缩略图脚本缩略图质量策略提高加载速度 Tint-K/Cute主题教程 第2张

上述截图大家可以看到TimThumb脚本默认的缩略图片质量是90,这里的数值是在缩略图请求未添加参数的情况下生效的,什么是参数?缩略图链接后缀有 &q=70&w=300&h=150&zc=1的就是链接中附加的参数,缩略图链接直接为图片后缀结尾的,就是使用脚本的默认参数。

重点优化

现在的主题调用TimThumb获取缩略图的非常多,但很少有主题是直接用默认参数生成缩略图的,因为不同的版块需要的缩略图大小不一样,所以都是在链接后面加后缀参数,这样一来,直接改TimThumb脚本里的默认参数没有任何作用,需要改的是链接后缀,这里提供Tint-K主题的后缀参数优化和策略优化。

首先打开Tint/core/classes/class.PostImage.php,此文件配置全局图片,包括文章的随机图片等。
约172行,这里是默认的:

    public static function getTimthumbImage($url, $size = 'thumbnail'){
        $timthumb = THEME_URI . '/core/library/timthumb/Timthumb.php';

        // 不裁剪Gif,因为生成黑色无效图片
        $imgtype = strtolower(substr($url, strrpos($url, '.')));// 获取文件后缀
        if($imgtype === 'gif') return $url; 

        $size = self::getFormatedSize($size);//获取各版块缩略图大小参数

        return $timthumb . '?src=' . $url . '&q=90&w=' . $size['width'] . '&h=' . $size['height'] . '&zc=1';//输出缩略图链接
    }

这里有一个bug,判断gif那里写错了,正确写法上面有提示,但gif不剪裁有个缺陷,就是图片高度不一致,页面会错乱,如果指定高度又无法做到各分辨率自适应,所以我这里也还是暂时关闭这个功能,找到解决办法再说。

图片质量数值对各后缀图片的影响

这里就不上图了,各用一张png和jpg图片测试,这里指定的缩略图比较小,所以最后生成的缩略图页小,最后写下结论:

质量数值 png文件大小 png文件质量评分 jpg文件大小 jpg文件质量评分
50 19.2k 100 5.2k 50
60 18.4k 90 5.8k 60
70 16.3k 80 6.7k 70
80 14.9k 70 8.1k 80
90 13.4k 60 11.4k 90
100 13.3k 50 29.3k 100

结果显而易见,png和jpg的图片,不同数值生成的文件大小和图片质量,规律居然是相反的!由此可见,并不是质量数值越低,图片就越小,而是要针对不同的后缀去设置数值,这样得到的缩略图才能更小。

完美优化策略

将以上默认代码修改为如下:

public static function getTimthumbImage($url, $size = 'thumbnail'){
        $timthumb = THEME_URI . '/core/library/timthumb/Timthumb.php';

        // 不裁剪Gif,因为生成黑色无效图片
        $imgtype = strtolower(substr($url, strrpos($url, '.')));// 获取文件后缀
        if($imgtype === 'gif') return $url;https://.gif不剪裁,直接输出原链接,这里作者写错了,引号内为.gif才能生效

        $size = self::getFormatedSize($size);//获取各版块缩略图大小参数
        if($imgtype === '.jpg') return $timthumb . '?src=' . $url . '&q=70&w=' . $size['width'] . '&h=' . $size['height'] . '&zc=1';// 针对jpg图片,设置图片质量值为70
        return $timthumb . '?src=' . $url . '&q=90&w=' . $size['width'] . '&h=' . $size['height'] . '&zc=1';// 针对png和其他图片,设置图片质量值为90
    }

这里的数值都是经过我反复测试,得出的,文件和显示效果都不错,和没优化的比,jpg图片的缩略图小了一半,加快了页面的速度。

温馨提示

本站Tint-K之后的版本都已经优化过,无需修改,享受优化后的畅快速度吧!

参与评论