WebP是google推行的新的图片格式, 可以使用更小的空间,保存更清晰的图片, 但由于格式较新, Adobe Photoshop CC 2019 20.0.2版本都无法打开查看, 所以我们需要保存网页中的WebP图片为通用性较强png格式
我们可以使用一款扩展程序图片另存为JPG/PNG/WebP, 将WebP格式图片转换为png格式
我们以 谷歌艺术和文化 artsandculture.google.com/ 网站内的图片为例做一个示范


上图超清gif原图: user-images.githubusercontent.com/15868458/63…


上图抖音短视频链接: v.douyin.com/yd1P5L/

除了能将浏览器图片保存为png, 还可以保存为jpg和WebP格式
Chrome扩展图片另存为JPG/PNG/WebP 下载链接:
https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd
复制代码
Chrome扩展图片另存为JPG/PNG/WebP并不能自动批量转换大量图片的格式, 如果你有大量转换图片格式的需求, 可以尝试使用XnConvert这款软件,  官网下载地址: www.xnview.com/en/xnconver…
XnConvert使用示例: 使用XnConvert将png格式图片批量转换为WebP格式

上图超清gif原图: user-images.githubusercontent.com/15868458/63…
小结:
WebP是非常先进的格式, 但由于Photoshop这类元老级图像编辑软件不支持, 我们只能将图片为png格式,再进行编辑, 先进技术改变世界, 需要一个过程, 而在过程中提供一个折中的方案(把WebP装换为png, 再将png图片装换为WebP), 也是一件有价值的事~

转载于:https://juejin.im/post/5d590e036fb9a06add4e2acf

文章目录
一、测试 WebP 图片解码速度
二、测试 WebP 图片编码速度
三、参考资料





测试结果 : WebP 格式图片 , 解码快 , 编码慢 , 占用空间小 ;

在解码速度上 , WebP 格式要优于 png 格式 ;
在编码速度上 , png 格式优于 WebP 格式 ;









一、测试 WebP 图片解码速度



使用 【Android 安装包优化】WebP 图片格式 ( WebP 图片格式简介 | 使用 Android Studio 转换 WebP 图片格式 ) 二、使用 Android Studio 转换 WebP 图片格式 博客中的转换前后的图片 ;

这两张图片的像素值都是 2701 x 2702 像素 ;

icon_png.png 图片 , 大小 2.24MB ;
icon_webp.webp 图片, 大小 127.73 KB ;



解码速度测试方法 : 使用 BitmapFactory 加载这两张图片 , 查看耗时毫秒数 ;
import android.graphics.BitmapFactory
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    val TAG = "MainActivity"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 测试 WebP 解码速度
        decodeWebP()
    }

    fun decodeWebP(){
        var pngStart = System.currentTimeMillis()
        BitmapFactory.decodeResource(resources, R.mipmap.icon_png)
        Log.e(TAG, "解码 png 格式图片时间 : ${System.currentTimeMillis() - pngStart} ")

        var webPStart = System.currentTimeMillis()
        BitmapFactory.decodeResource(resources, R.mipmap.icon_webp)
        Log.e(TAG, "解码 WebP 格式图片时间 : ${System.currentTimeMillis() - webPStart} ")
    }
}



执行结果 : 解码 WebP 图片比 png 图片耗时要少 , 因此其在解码时 , 解码速度性能没有损失 , 反而加强了 ;
2021-04-24 19:57:19.994 2248-2248/kim.hsl.webp E/MainActivity: 解码 png 格式图片时间 : 285 
2021-04-24 19:57:20.204 2248-2248/kim.hsl.webp E/MainActivity: 解码 WebP 格式图片时间 : 210 










二、测试 WebP 图片编码速度



测试编码 WebP 格式图片 , 与编码 png 格式图片耗时 :
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import java.io.FileOutputStream

class MainActivity : AppCompatActivity() {
    val TAG = "MainActivity"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 测试 WebP 解码速度
        decodeWebP()

        // 测试 WebP 编码速度
        encodeWebP()
    }

    fun encodeWebP(){
        // 读取一张本地图片
        var bitmap = BitmapFactory.decodeResource(resources, R.mipmap.icon_png)

        var pngStart = System.currentTimeMillis()
        var fos = FileOutputStream("${cacheDir}/icon_png.png")
        bitmap.compress(Bitmap.CompressFormat.PNG, 75, fos)
        fos.close()
        Log.e(TAG, "编码 png 格式图片时间 : ${System.currentTimeMillis() - pngStart} ms , " +
                "输出文件 : ${cacheDir}/icon_png.png")

        var webPStart = System.currentTimeMillis()
        fos = FileOutputStream("${cacheDir}/icon_webp.webp")
        bitmap.compress(Bitmap.CompressFormat.WEBP, 75, fos)
        fos.close()
        Log.e(TAG, "编码 WebP 格式图片时间 : ${System.currentTimeMillis() - webPStart} ms , " +
                "输出文件 : ${cacheDir}/icon_webp.webp")
    }

    fun decodeWebP(){
        var pngStart = System.currentTimeMillis()
        BitmapFactory.decodeResource(resources, R.mipmap.icon_png)
        Log.e(TAG, "解码 png 格式图片时间 : ${System.currentTimeMillis() - pngStart} ")

        var webPStart = System.currentTimeMillis()
        BitmapFactory.decodeResource(resources, R.mipmap.icon_webp)
        Log.e(TAG, "解码 WebP 格式图片时间 : ${System.currentTimeMillis() - webPStart} ")
    }
}



测试结果 : 编码速度上 , 编码 WebP 耗时更多 , 性能低于编码 png 格式图片 ;
2021-04-24 20:25:36.125 4483-4483/kim.hsl.webp E/MainActivity: 解码 png 格式图片时间 : 279 
2021-04-24 20:25:36.331 4483-4483/kim.hsl.webp E/MainActivity: 解码 WebP 格式图片时间 : 205 
2021-04-24 20:25:39.016 4483-4483/kim.hsl.webp E/MainActivity: 编码 png 格式图片时间 : 2416 ms , 输出文件 : /data/user/0/kim.hsl.webp/cache/icon_png.png
2021-04-24 20:25:42.113 4483-4483/kim.hsl.webp E/MainActivity: 编码 WebP 格式图片时间 : 3097 ms , 输出文件 : /data/user/0/kim.hsl.webp/cache/icon_webp.webp







查看生成的两张图片大小 : icon_png.png 图片 $2350413$ 字节 , icon_webp.webp 图片 $177410$ 字节 ;
C:\Users\octop>adb shell
walleye:/ $
2|walleye:/ $ su
walleye:/ # cd /data/user/0/kim.hsl.webp/cache/
walleye:/data/user/0/kim.hsl.webp/cache # ls -la
total 2496
drwxrws--x 2 u0_a394 u0_a394_cache    4096 2021-04-24 20:25 .
drwx------ 4 u0_a394 u0_a394          4096 2021-04-24 19:56 ..
-rw------- 1 u0_a394 u0_a394_cache 2350413 2021-04-24 20:25 icon_png.png
-rw------- 1 u0_a394 u0_a394_cache  177410 2021-04-24 20:25 icon_webp.webp
walleye:/data/user/0/kim.hsl.webp/cache #










三、参考资料



参考文档 :

创建 WebP 图片  : https://developer.android.google.cn/studio/write/convert-webp
Android 中支持的媒体格式 : https://developer.android.google.cn/guide/topics/media/media-formats
isparta 工具官网 : http://isparta.github.io/
isparta 工具 GitHub 地址 : https://github.com/iSparta/iSparta

博客资源 :

iSparta 工具 : https://download.csdn.net/download/han1202012/17496041
Google libwebp 库 : https://download.csdn.net/download/han1202012/17498155

博客源码 :

GitHub 地址 : https://github.com/han1202012/Webp
CSDN 下载地址 : https://download.csdn.net/download/han1202012/17574192

1.下载该静态库并导入
https://github.com/YouZhiZheShiJingCheng/YZwebp
2.配置工程
TARGETS->Build Settings->Other Linker Flags 添加一个  -ObjC
3.开始应用
    UIImageView* webp=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    //后缀为小写的时候可以省略
    webp.image=[UIImage imageWithWebP:@"a"];
    webp.backgroundColor=[UIColor redColor];
    webp.center=CGPointMake(self.view.center.x, self.view.center.y*0.5);
    [self.view addSubview:webp];

    UIImageView* webp1=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    webp1.image=[UIImage imageWithWebP:@"a.webp"];
    webp1.backgroundColor=[UIColor greenColor];
    webp1.center=self.view.center;
    [self.view addSubview:webp1];

    //名字大小写不对识别不了
    UIImageView* webp2=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    webp2.image=[UIImage imageWithWebP:@"a.WEBP"];
    webp2.center=CGPointMake(self.view.center.x, self.view.center.y*1.5);
    webp2.backgroundColor=[UIColor blueColor];
    [self.view addSubview:webp2];


Demo地址：
https://github.com/YouZhiZheShiJingCheng/WebpDemo

 

 本文目录：

        1、将本地的webp图片转换为jpg

        2、将下载的webp格式图片直接保存为jpg

代码如下：

1、将本地的webp图片转换为jpg

from PIL import Image


filename = 'xxxxxxxxxx.webp'
im = Image.open(filename)
if im.mode == "RGBA":
    im.load()  # required for png.split()
    background = Image.new("RGB", im.size, (255, 255, 255))
    background.paste(im, mask=im.split()[3])
save_name = filename.replace('webp', 'jpg')
im.save('{}'.format(save_name), 'JPEG')

  

2、将下载的webp格式图片直接保存为jpg

from io import BytesIO
from PIL import Image
import requests


url = 'http:xxxxx.JPG'  # 需要下载的图片地址
headers = {}  # 请求头，按需添加

resp = requests.get(url, headers=headers)
byte_stream = BytesIO(resp.content)
im = Image.open(byte_stream)

# im.show()
if im.mode == "RGBA":
    im.load()  # required for png.split()
    background = Image.new("RGB", im.size, (255, 255, 255))
    background.paste(im, mask=im.split()[3]) 
    

im.save('xxx.jpg', 'JPEG')