最近产品经理一直抱怨图片加载慢,为此客户端开发这边也做了许多努力,比如重定向到CDN,使用webp减小图片大小,使用降低图片压缩质量,更换图片加载框架等等动作。现在讲一下webp格式图片这个方案。
WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
但WebP是一种有损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。
桌面版Chrome,Android4.0以上可打开WebP格式。 ——摘自百度百科
Picasso原生支持webp格式图片的加载
理论上说,不需要修改任何代码,只要服务器提供支持,Picasso就能像加载jpg一样加载webp格式的图片。那么现在问题来了
1、如何识别是个下载的文件是不是webp格式。
2、如何将webp解析成bitmap的,会不会出现内存上的问题
带着这两个问题,我仔细阅读了一下Picasso的源码,摸清Picasso加载webp文件的流程。首先看一下下载代码,以okhttp下载器为例
@Override public Response load(Uri uri, int networkPolicy) throws IOException {
CacheControl cacheControl = null;
//...省略一部分缓存控制代码
Request.Builder builder = new Request.Builder().url(uri.toString());
if (cacheControl != null) {
builder.cacheControl(cacheControl);
}
com.squareup.okhttp.Response response = client.newCall(builder.build()).execute();//发起一次新的网络请求
int responseCode = response.code();
if (responseCode >= 300) {//如果遇到网络错误
response.body().close();
throw new ResponseException(responseCode + " " + response.message(), networkPolicy,
responseCode);
}
boolean fromCache = response.cacheResponse() != null;
ResponseBody responseBody = response.body();//取出http响应的body,这个body就是图片文件
return new Response(responseBody.byteStream(), fromCache, responseBody.contentLength());
}
从下载器中可以看出,okhttp交给Picasso的是一个InputStream,那么Picasso是怎样处理这个输入流的呢,于是继续读代码
Bitmap hunt() throws IOException {
Bitmap bitmap = null;
if (shouldReadFromMemoryCache(memoryPolicy)) {
//省略从本地LRU缓存获得bitmap的代码
}
data.networkPolicy = retryCount == 0 ? NetworkPolicy.OFFLINE.index : networkPolicy;
RequestHandler.Result result = requestHandler.load(data, networkPolicy);//通过downloader发起网络请求
if (result != null) {
loadedFrom = result.getLoadedFrom();//看看是不是来自磁盘缓存
exifRotation = result.getExifOrientation();//查看exif信息,主要是看旋转角度
bitmap = result.getBitmap();//尝试能否直接拿到bitmap
// If there was no Bitmap then we need to decode it from the stream.
if (bitmap == null) {//如果不能直接拿到bitmap,那么就需要从输入流中转换
InputStream is = result.getStream();//获取文件输入流,可能是网络流,也可能是磁盘缓存文件的流
try {
bitmap = decodeStream(is, data);//重要的方法,从输入流中解析出bitmap
} finally {
Utils.closeQuietly(is);
}
}
}
//...省略根据exif信息调整图片的代码
return bitmap;
}
以上代码来自BitmapHunter这个类
其中我们需要的就是decodeStream()这个方法,是这个方法将网络获得的输入流转换成bitmap的,那么这个方法怎么写的呢?
/**
* Decode a byte stream into a Bitmap. This method will take into account additional information
* about the supplied request in order to do the decoding efficiently (such as through leveraging
* {@code inSampleSize}).
*/
static Bitmap decodeStream(InputStream stream, Request request) throws IOException {
MarkableInputStream markStream = new MarkableInputStream(stream);
stream = markStream;
long mark = markStream.savePosition(65536); // TODO fix this crap.
final BitmapFactory.Options options = RequestHandler.createBitmapOptions(request);
final boolean calculateSize = RequestHandler.requiresInSampleSize(options);