利用七牛使用jpg或webp图片格式

WordPress

利用七牛使用jpg或webp图片格式
一般来讲,jpg 格式在图像压缩上会比 png 好一些,利用图片显示,所以一般在使用七牛时都会使用format/jpg,同时 jpg 支持渐进显示/interface/1,所以一般来说我在用七牛时的参数如下:

?imageView2/0/format/jpg/interlace/1/q/100|imageslim

webp 格式是谷歌开发的一种更小的图片格式,体积大概为 jpg 格式的 2/3。但是实际使用中,一般人的图片并不是压缩过的,所以实际体积大约只有原图的 1/3 甚至更少。但是这种格式仅仅支持 Chrome 浏览器,iOS 下的 Safari 甚至都不支持,不过现在 Chrome 的用户越来越多,所以完全可以根据此类用户利用七牛将图片转换成 webp 的格式。
原理很简单,根据 HTTP 头中的 accept 是否包含 image/webp 来判断浏览器是否支持 webp 格式,如果包含,那么就format/webp,如果没有,就format/jpg。正则替换图片来实现七牛处理图片的代码网上很多,这里我就将自己用的贴出来。

实现代码

下面的代码直接加到 functions.php 中即可

/*chrome 七牛使用 Webp 图片格式*/
/* ------------------- */
function converse_webp($matches)
{
return $matches[1] . $matches['2'] . '?imageView2/0/format/webp/interlace/1/q/100|imageslim';
}
function converse_webp_filter($content)
{
    global $post;
    $content = preg_replace_callback("/(<img[^>]*src *= *[\"']?)([^\"']*)/i", 'converse_webp', $content);
    return $content;
}
function converse_jpg($matches)
{
    return $matches[1] . $matches['2'] . '?imageView2/0/format/jpg/interlace/1/q/100|imageslim';
}
function converse_jpg_filter($content)
{
    global $post;
    $content = preg_replace_callback("/(<img[^>]*src *= *[\"']?)([^\"']*)/i", 'converse_jpg', $content);
    return $content;
}
function is_support_webp()
{
    return strstr($_SERVER['HTTP_ACCEPT'], 'image/webp');
}
if (is_support_webp()) {
    add_filter('the_content', 'converse_webp_filter');
}
else {
    add_filter('the_content', 'converse_jpg_filter');
}
/* ------------------- */
/*chrome 七牛使用 Webp 图片格式*/

全文完。

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:11次,页面生成时间:0.029秒。