威言威语

Gravatar头像被墙或者打开缓慢已经是一个老问题了，网上也有各式各样的方法去解决这个问题。通过之前替换secure.gravatar.com的方式使得头像扩大了一倍。从WordPress4.2版开始，引入了scrset，但是原来代码没有考虑这个问题，导致的。srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。

Gravatar头像被墙或者打开缓慢已经是一个老问题了，网上也有各式各样的方法去解决这个问题。

目前流行的：1、使用官方https的头像链接，目前这个https方式没被墙，速度也还不错。2、使用多说的头像缓存服务，但是目前发现这个不是很稳定，要么加载慢，要么直接加载不出来。3、使用七牛缓存方案，这个好像使用要注册账号，安装插件什么的，不是那么方面，主要也没有试用过，稳定性未知。

我一直使用的是第一种方式，应该说使用了很久了，一直都算比较正常的。网上的代码是这样的：

function get_ssl_avatar($avatar) {
   $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2&d=mm" class="avatar avatar-$2" height="$2" width="$2">',$avatar);
   return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');

但是从WordPress 4.2版开始，这种方式就会出现一个问题，就头像好像比以前大了一倍。当然我也没有细看，只是通过CSS对头像大小做了限制，但是后台的头像不可能每次升级都改下后台的css代码，那样也太麻烦了，于是研究下，发现从WordPress4.2版开始，引入了scrset，srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。也就是可以根据屏幕密度显示对应尺寸的图片，比如正常的PC显示器默认设备像素比都是1，iphone6是2，iphone6 plus就是3。

WordPress4.2+的scrset定义的2x的，之前的代码获取出来的图片大小是50，但是之后就获取到scrset里面的图片大小100上了，这就导致了为什么后来图片扩大一倍的缘故。

于是我就重写了下代码，解决了这个问题。

//替换Gavatar头像地址
function get_ssl_avatar($avatar) {
    if (preg_match_all(
        '/(src|srcset)=["\']https?.*?\/avatar\/([^?]*)\?s=([\d]+)&([^"\']*)?["\']/i',
        $avatar,
        $matches
    ) > 0) {
        $url = 'https://secure.gravatar.com';
        $size = $matches[3][0];
        $vargs = array_pad(array(), count($matches[0]), array());
        for ($i = 1; $i < count($matches); $i++) {
            for ($j = 0; $j < count($matches[$i]); $j++) {
                $tmp = strtolower($matches[$i][$j]);
                $vargs[$j][] = $tmp;
                if ($tmp == 'src') {
                    $size = $matches[3][$j];
                }
            }
        }
        $buffers = array();
        foreach ($vargs as $varg) {
            $buffers[] = vsprintf(
            '%s="%s/avatar/%s?s=%s&%s"',
            array($varg[0], $url, $varg[1], $varg[2], $varg[3])
           );
        }
        return sprintf(
                '<img alt="avatar" %s class="avatar avatar-%s" height="%s" width="%s" />',
                implode(' ', $buffers), $size, $size, $size
            );
    } else {
        return false;
    }
}
add_filter('get_avatar', 'get_ssl_avatar');