blog5开发:增加对WEBP的支持

WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

WEBP浏览器的支持:
1473774273516002312.PNG

JS判断(http://stackoverflow.com/questions/5573096/detecting-webp-support)

var hasWebP = (function() {
    // some small (2x1 px) test images for each feature
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };

    return function(feature) {
        var deferred = $.Deferred();

        $("<img>").on("load", function() {
            // the images should have these dimensions
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);

        return deferred.promise();
    }
})();

var add = function(msg) {
    $("<p>").text(msg).appendTo("#x");
};

hasWebP().then(function() {
    add("Basic WebP available");
}, function() {
    add("Basic WebP *not* available");
});

hasWebP("lossless").then(function() {
    add("Lossless WebP available");
}, function() {
    add("Lossless WebP *not* available");
});

服务器端判断(http://stackoverflow.com/questions/18164070/detect-if-browser-supports-webp-format-server-side):

它是通过判断请求头Accpet是否包含image/webp来判断的。
1473775720573984217.PNG


用js来判断可能更加的灵活,但我对js的使用并不是很熟练,这里我采用了服务器端判断。

WEBP格式的转化

采用了GraphicsMagick+Im4java,一行命令就搞定。
gm convert a.jpeg a.webp

NGINX对webp访问的支持

参考:http://www.lazutkin.com/blog/2014/02/23/serve-files-with-nginx-conditionally/
我nginx的配置:
map $http_accept $webp_suffix {
	default   ".jpeg";
	"~*webp"  ".webp";
}

location ~ .*\.(gif|jpg|jpeg|png|GIF|JPEG|JPG|PNG)\.* {
	root /web/nginx/html/blog_file/image;
	limit_req zone=allips burst=5 nodelay;
	try_files  /thumb/$uri$webp_suffix  @doThumb;
	add_header Access-Control-Allow-Origin *;
	expires      30d; 
}