关闭

Android端 WebP图片压缩与传输的一点探索

标签: WebP
2089人阅读 评论(0) 收藏 举报
分类:

简介

直到4g时代,流量依然是宝贵的东西。而移动网络传输中,最占流量的一种载体:图片,成为了我们移动开发者不得不关注的一个问题。
我们关注的问题,无非是图片体积和质量如何达到一个比较和谐的平衡,希望得到质量不错的图片同时体积还不能太大。
走在时代前列的谷歌给出了一个不错的答案——WebP。
WebP是一种图片文件格式,在相同的压缩指标下,webp的有损压缩能比jpg小 25-34%。而在我自己的测试里,有时候能小50%。

大企业背书

WebP在2010年发布第一个版本,到现在已经6年了,谷歌旗下的各种网站G+、以及非常有代表性的YouTube,他的视频文件格式WebM就是基于WebP构造的。
据说腾讯、淘宝、美团也有部分应用。

Android 端 JPG 转换 WebP

RxJava线程转换:

String[] imgs = new String[]{"1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"};
    String path = Environment.getExternalStorageDirectory().getAbsolutePath() + "/Pictures/test/";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//      test = Api.getBuilder().create(Test.class);
        String[] permissions = {Manifest.permission.WRITE_EXTERNAL_STORAGE
                , Manifest.permission.READ_PHONE_STATE
                , Manifest.permission.CAMERA};
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            requestPermissions(permissions, 0);
        }
        compress();
    }
    private void compress() {
        Observable.from(imgs)
                .subscribeOn(Schedulers.io())
                .doOnNext(new Action1<String>() {
                    @Override
                    public void call(String imgName) {
                        compress(imgName);
                    }
                })
                .subscribe();
    }
    private void compress(String imgName) {
        try {
            File file = new File(path, imgName);
            Log.i("compress", "jpg start");
            byte[] bytes = BitmapUtil.compressBitmapToBytes(file.getPath(), 600, 0, 60, Bitmap.CompressFormat.JPEG);
            File jpg = new File(path, imgName + "compress.jpg");
            FileUtils.writeByteArrayToFile(jpg, bytes);
            Log.i("compress", "jpg finish");
            Log.i("compress", "----------------------------------------------------");
            Log.i("compress", "webp start");
            byte[] bytes1 = BitmapUtil.compressBitmapToBytes(file.getPath(), 600, 0, 60, Bitmap.CompressFormat.WEBP);//分别是图片路径,宽度高度,质量,和图片类型,重点在这里。
            File webp = new File(path, imgName + "compress.webp");
            FileUtils.writeByteArrayToFile(webp, bytes1);
            Log.i("compress", "webp finish");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

我的测试机器也是Oneplus 1 ,CM13,所以需要获取相应的权限。
利用RxJava来做线程操作,在io线程里做了耗时操作。

public static byte[] compressBitmapToBytes(String filePath, int reqWidth, int reqHeight, int quality, Bitmap.CompressFormat format) {
        Bitmap bitmap = getSmallBitmap(filePath, reqWidth, reqHeight);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        bitmap.compress(format, quality, baos);
        byte[] bytes = baos.toByteArray();
        bitmap.recycle();
        Log.i(TAG, "Bitmap compressed success, size: " + bytes.length);
        return bytes;
    }


    public static Bitmap getSmallBitmap(String filePath, int reqWidth, int reqHeight) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeFile(filePath, options);
        options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);
        options.inJustDecodeBounds = false;
//      options.inPreferQualityOverSpeed = true;
        return BitmapFactory.decodeFile(filePath, options);
    }   

    public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
        int h = options.outHeight;
        int w = options.outWidth;
        int inSampleSize = 0;
        if (h > reqHeight || w > reqWidth) {
            float ratioW = (float) w / reqWidth;
            float ratioH = (float) h / reqHeight;
            inSampleSize = (int) Math.min(ratioH, ratioW);
        }
        inSampleSize = Math.max(1, inSampleSize);
        return inSampleSize;
    } 

根据输入的宽高值计算分辨率的缩小比例,再根据输入的压缩质量数值,压缩图片,获得压缩后bitmap,然后再将其保存成本地文件。
这是非常常见的图片压缩手段。

WebP对比

我用我日常生活里拍下的照片来做简单的对比测试,不是特别严谨,仅供简单的参考。
拍照设备是刷了CM13的 一加 1 。拍照场景都是日常生活特别常见的。

以下是原图预览,就不一个个放出来了,太大。
这里写图片描述

缩小分辨率,同时压缩质量

文件名 照片原图 压缩后jpg 压缩后webp 压缩比
1.jpg 5760 kb 98 kb 74 kb 24.49%
2.jpg 4534 kb 64 kb 35 kb 45.31%
3.jpg 4751 kb 93 kb 68 kb 26.88%
4.jpg 7002 kb 121 kb 95 kb 21.49%
5.jpg 5493 kb 111 kb 91 kb 18.02%


平均压缩比是:27.24%
按照原图大小,不缩小分辨率,仅压缩质量。

文件名 照片原图 压缩后jpg 压缩后webp 压缩比
3.jpg 4751 kb 796 kb 426 kb 46.48%


至此,我们就非常方便的使用了webp来对图片进行更加极致的压缩,兼顾了图片体积和质量。

睁大眼睛对比一下有啥区别,不缩小分辨率,仅压缩质量,这个3.jpg可是有46.48%的压缩比噢。
这个场景是晚上在灯光充足的室内吃饭拍的。
这里写图片描述

这里写图片描述

用Gzip再压缩

刚刚是针对本地图片的压缩,接下来,我们需要将图片传输到服务器。这个过程依然有优化空间,就是利用Gzip。

Gzip的作用对象是整个请求体,具体来说是对请求体中的内容进行可逆的压缩,类似pc上zip的那种。

Gzip压缩的请求体,需要加入相应的header: 「Content-Encoding:gzip」。
这事情Retrofit会帮你做好。

后台服务器接收到在此类型的请求,就会对请求体解压,因此需要后端的支持。

另外要注意的是,Gzip针对比较大的请求体压缩效果不错,尤其是未经过压缩的纯文本类型。

如果请求本来就很小,那么就不要使用gzip压缩了,压缩包自己的元数据可能比你的请求体还大,得不偿失。你可以自己测试一下,我估计zip和gzip的压缩字典比较类似,可以直接在pc上做测试。

Retrofit对请求Gzip压缩

网络请求方面,我项目里使用Retrofit (OKHttp) + RxJava。

Retrofit的Gzip压缩,本质上是通过OKHttp的拦截器来完成的。
0拦截请求
1加入header
2压缩请求
3发送出去

搞定,方便。

https://github.com/square/okhttp/wiki/Interceptors

/** This interceptor compresses the HTTP request body. Many webservers can't handle this! */
final class GzipRequestInterceptor implements Interceptor {
  @Override public Response intercept(Interceptor.Chain chain) throws IOException {
    Request originalRequest = chain.request();
    if (originalRequest.body() == null || originalRequest.header("Content-Encoding") != null) {
      return chain.proceed(originalRequest);
    }
    Request compressedRequest = originalRequest.newBuilder()
        .header("Content-Encoding", "gzip")
        .method(originalRequest.method(), gzip(originalRequest.body()))
        .build();
    return chain.proceed(compressedRequest);
  }
  private RequestBody gzip(final RequestBody body) {
    return new RequestBody() {
      @Override public MediaType contentType() {
        return body.contentType();
      }
      @Override public long contentLength() {
        return -1; // We don't know the compressed length in advance!
      }
      @Override public void writeTo(BufferedSink sink) throws IOException {
        BufferedSink gzipSink = Okio.buffer(new GzipSink(sink));
        body.writeTo(gzipSink);
        gzipSink.close();
      }
    };
  }
}

请求体抓包对比

我会用Fiddler4 监测整个请求过程,以方便我们得知实际传输了多大的数据。

上传的具体代码就不发了,这个不是重点。
我把请求抓包之后,把request这个保存下来。
这里写图片描述

这是同时上传两张图片的大小

文件名 请求体大小
WebP+Gzip 169kb
WebP 222kb


用Gzip压缩 比不加Gzip 又小 23% ! jpg我就不发了,可以按照前面的估算一下~

WebP比Jpg小27%,然后gzip+webp又比单纯的webp小23%,节省下来的流量多可观啊!

最后

WebP默认只支持Android 4.0以上,现在项目最低支持的版本是16,所以没什么问题。如果你的项目最低要支持到2.0,好像也有第三方支持,但是我建议你抓产品出去打一顿。

根据下面的参考链接的数据以及我本人测试数据来看,WebP不仅大大的节省了用户的流量,同时还可以加速图片传输速度。就照片传输的角度来看,是非常有利的。

相关参考:

http://isux.tencent.com/introduction-of-webp.html(产品经理看这个)

http://blog.csdn.net/GeekLei/article/details/41147479 (后台需要看这个)

https://developers.google.com/speed/webp/
http://www.infoq.com/cn/articles/sdk-optimazation?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term (他们表示IOS也没有用上)
http://blog.csdn.net/mingchunhu/article/details/8155742

(Android全部都要看)

转自:http://blog.csdn.net/a405942873/article/details/51498833

0
0
查看评论

Android Webp 完全解析 快来缩小apk的大小吧

一、概述 最近项目准备尝试使用webp来缩小包的体积,于是抽空对相关知识进行了调研和学习。 至于什么是webp,使用webp有什么好处我就不赘述了,具体可以参考腾讯isux上的这篇文章WebP 探寻之路,大致了解下就ok了。 入手大致需要考虑以下几个问题: 如何将现有的jpeg/png等图...
  • lmj623565791
  • lmj623565791
  • 2016-11-21 08:46
  • 30978

Android中图片优化之WebP使用

一、什么是 WebP? WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少...
  • m13984458297
  • m13984458297
  • 2017-04-13 16:41
  • 4528

WebP 原理和 Android 支持现状介绍

1.背景 目前网络中图片仍然是占用流量较大的一部分,对于移动端更是如此,因此,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要。 然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致,因此Google于2010年提出了一种新的图片压缩格式 – We...
  • dj0379
  • dj0379
  • 2016-11-18 10:20
  • 846

Android端 WebP图片压缩与传输的一点探索

1. 简介 直到4g时代,流量依然是宝贵的东西。而移动网络传输中,最占流量的一种载体:图片,成为了我们移动开发者不得不关注的一个问题。 我们关注的问题,无非是图片体积和质量如何达到一个比较和谐的平衡,希望得到质量不错的图片同时体积还不能太大。 走在时代前列的谷歌给出了一个不错的答案—...
  • a405942873
  • a405942873
  • 2016-05-25 16:33
  • 5315

Android 动图 WebP Gif 的 播放 和 暂停

先说明一下:目前 支持 webp 动图 的 三方图片库,只有Fresco,想控制 动图 播放 和 暂停 的 也只有 Fresco (声明:博主并不是 Fresco 的 铁粉,其他的三方库也都用过,只不过本文标题的功能 目前只有 Fresco 能简单实现)先看一下效果:Gradle添加引用:comp...
  • qq_31387043
  • qq_31387043
  • 2017-07-17 17:52
  • 1562

Android studio 2.3 Webp使用

在新版本的Android studio 2.3中加入了对图片压缩的工具,可以直接将PNG,BMP,JPG和静态的Gif图片文件转成Webp格式,占用更少的空间资源,可以极大的缩小apk的大小。 在新版本如何使用: 1.选择你要修改格式的图片,然后右击,在列表的最下端有个Convert to WebP...
  • w_1463806723
  • w_1463806723
  • 2017-03-08 11:33
  • 2214

Android创建WebP图像

Android创建WebP图像创建WebP图像WebP是Google提供的有损压缩(如JPEG)以及透明度(如PNG)的图像文件格式,但可以提供比JPEG或PNG更好的压缩。 Android 4.0(API级别14)及更高版本支持有损WebP图像,Android 4.3(API级别18)及更高版本支...
  • u010321471
  • u010321471
  • 2017-09-05 00:22
  • 1321

android bitmap compress(图片压缩)

android bitmap compress android的照相功能随着手机硬件的发展,变得越来越强大,能够找出很高分辨率的图片。 有些场景中,需要照相并且上传到服务,但是由于图片的大小太大,那么就上传就会很慢(在有些网络情况下),而且很耗流量,要想速度快,那么就需要减小图片的大小。减少图片...
  • luhuajcdd
  • luhuajcdd
  • 2013-05-23 14:41
  • 127221

Android兼容性问题 -- WebP格式图片解码失败

WebP图片格式WebP是Google在2010推出的一种图片格式,此图片格式是从Android4.0版本开始支持的,但是对包含透明和无损压缩的WebP格式是从Android4.2才开始支持,此外还有部分特殊的机型不支持任何WebP格式的解码。
  • ccpat
  • ccpat
  • 2015-11-30 18:39
  • 6473

android webp格式图片使用DEMO

  • 2015-07-05 14:57
  • 5.27MB
  • 下载
    个人资料
    • 访问:11091534次
    • 积分:77345
    • 等级:
    • 排名:第24名
    • 原创:506篇
    • 转载:912篇
    • 译文:4篇
    • 评论:2263条
    打赏
    如果您认为本博客不错,读后觉得有收获,不妨打赏赞助我一下,让我有动力继续写出高质量的博客。



    赠人玫瑰,手有余香。分享技术,传递快乐。

    有心课堂,传递的不仅仅是技术!

    QQ交流群:250468947

    有心课堂会员,请加入VIP QQ交流群:213725333

    github
    我的视频
    博客专栏
    最新评论