图片加速 WebP格式
时间:2022-05-06
本文章向大家介绍图片加速 WebP格式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
WebP是Google在2010年推出的图片技术,它可对图片进行有效压缩,不影响清晰度的同时,使图片体积更小
在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小将近40%
腾讯的智图平台就已经支持对WebP格式的转换,使用了一张大小为346KB的图片测试,选择图片目标品质为80,转换为WebP格式后,图片的大小仅为80KB
劣势是兼容性不好,google系的已经支持,但其他平台还没有很好的支持
兼容方案
JS
利用img标签加载一张base64的WebP图片,在img标签的onload事件中判断该图片是否具有宽高的属性,有表示支持webP,没有表示不支持webP
例如:
var img = new Image();
img.src = "data:image/webp;base64,......";
img.onload = function (){
// img.width, img.height
......
}
IOS
客户端加载WebP格式的图片,下载完成后在前端实时转码,将WebP图片转换为jpg或png图片,展示给用户的是普通图片,节省了网络加载时间
Android
4.0以上的系统已经原生支持WebP格式
用户下载
用户点击下载时,使用此图片相应的jpg版本
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java编程思想第四版第十三章字符串 总结
- LoRa节点开发——代码详解修改LoRaWAN相关参数
- 01 . Redis简介及部署主从复制
- 07 . Kubernetes之Service
- LoRa节点开发——代码详解如何修改发射和接收信道(频率)
- 06 . Kubernetes之Pod控制器详细介绍及应用
- Python面试题
- 08 . Kubernetes之 ingress及Ingress Controller
- cpu占用过高排查
- LoRa节点开发——代码详解LoRaWAN发送与接收数据
- java编程思想第四版第十四章 类型信息习题
- 聊一聊,如何解密、分析LoRaWAN数据包?
- java编程思想第四版第十四章 类型信息总结
- 10 . Python之面向对象
- 11 . Python3之异常,调试和测试