客户端WebP 图片格式优化
前言
在移动端,图片一直是流量大头,一些商品列表和详情等页面,图片大小动不动就以几百K,当然在某些比较大的公司会根据具体情况去加载相应尺寸的图片,这就意味着服务器必须提供多套尺寸的图片。而对传统的JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致,而 Google在这个时候给了开发者一个新选择:WebP。在Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用,如腾讯新闻客户端、腾讯网、QQ空间等。在2015年的时候,笔者曾经工作过的公司开始大规模使用WebP。 目前浏览器支持情况:
webP
WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。据谷歌官方的介绍:
- WebP 无损压缩的图片可以比同样大小的 PNG 小 26%;
- WebP 有损压缩的图片可以比同样大小的 JPEG 小 25-34%;
- WebP 支持无损的透明图层通道,代价只需增加 22% 的字节存储空间;
- WebP 有损透明图像可以比同样大小的 PNG 图像小3倍。
WebP使用
目前前端客户端基本都支持WebP图片格式,关于WebP格式的图片和其他图片格式的比较,直接看图例介绍:https://isparta.github.io/compare-webp/index.html#12345 下面分别介绍使用方法。
html
<body>
<img src="" alt="" data-url="11.jpg" data-original="11.webp"/>
<img src="" alt="" data-url="21.jpg" data-original="21.webp"/>
</body>
js
var userAgent = navigator.userAgent;
var Android = userAgent.indexOf("Android");
var AppleWebKit=userAgent.indexOf('AppleWebKit');
var androidVersion = parseFloat(userAgent.slice(Android+8));
var $img=document.getElementsByTagName('img');
window.onload= function () {
if(Android >= 0 && AppleWebKit>=0&&androidVersion>=4){
forImg('data-original');
}else{
forImg('data-url');
}
}
function forImg(data){
for(var i=0;i<$img.length;i++){
$img[i].setAttribute('src',$img[i].getAttribute(data));
}
}
Android
Android很早之前就支持WebP图片格式,可以直接使用ImageView组件即可加载。
iOS
今天重点要说的就是iOS平台怎么添加加载WebP格式的图片。由于OS X不支持原生WebP解码,所以,可以先安装一个工具。打开Homebrew,输入如下命令:
brew install webp
目前iOS的图片加载框架SDWebImage里面有个webP 框架,可以支持WebP的图片格式。SDWebImage 可以直接转换为UIImage 即可使用。
google webP官网下载最新webP代码选择其中的iOS开头的文件,mac的话需要自己生成framewok,找到对应的版本下载即可; 1. SDWebImage中加载webp格式的图片时需要定义SD_WEBP=1的宏,为了方便,我直接将SDWebImage库拖到项目中。 2. target->build setting->搜索preprocessor 添加SD_WEBP=1
添加后整体项目结构如下:
3. 使用UIImageView加载网络WebP格式图片,并在info.list中增加网络访问的权限(依次选择App Transport Security Settings 增加 Allow Arbitrary Loads即可); 相关代码如下:
UIImageView * testImage = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
[testImage sd_setImageWithURL:[NSURL URLWithString:@"https://isparta.github.io/compare-webp/image/png_webp/webp_lossless/1.webp"]];
// testImage.backgroundColor = [UIColor orangeColor];
[self.view addSubview:testImage];
运行效果:
- Spring Cloud(十)高可用的分布式配置中心 Spring Cloud Config 中使用 Refresh
- Hibernate 的性能优化的时候碰到了"抓取策略",有四种
- 基于 Spring Cloud 完整的微服务架构实战
- maven build时报错Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test
- Spring Cloud(九)高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务
- Spring Cloud(八)高可用的分布式配置中心 Spring Cloud Config
- 用Raspberry Pi Zero打造「即插即用」的Web服务器
- Spring Cloud(七)服务网关 Zuul Filter 使用
- 基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
- Spring Cloud(六)服务网关 zuul 快速入门
- Docker Registry Server 搭建,配置免费HTTPS证书,及拥有权限认证、TLS 的私有仓库
- Ubuntu 17.04 编译安装 Nginx 1.9.9 配置 https 免费证书
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- Docker Image 解决镜像无法删除的问题
- 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 数组属性和方法
- 继续上一次的遥感影像镶嵌,这次使用gdal_merge.py
- R海拾遗-apply家族学习
- R海拾遗--data.table初级学习
- 读一篇meta
- meta图表解读
- R海拾遗-森林图绘制
- R海拾遗---热图绘制-pheatmap
- R-随笔-from homework
- The world loves you
- dplyr_new version-across
- dplyr_下篇
- 技术无罪or技术原罪?爬图小心查水表
- scihub? no!
- Elasticsearch:top_hits aggregation
- Elasticsearch:Elasticsearch 中的 refresh 和 flush 操作指南