客户端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];

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

LaTex数理化公式展示方案简介

本文作者:IMWeb jerytang 原文出处:IMWeb社区 未经同意,禁止转载 LaTex 是什么 LaTex 是基于 Tex 的排版系统,常用...

89860
来自专栏技术记录

FFMPEG指令

FFmpeg是一个用于音视频处理的自由软件,被广泛用于音视频开发。FFmpeg功能强大,本文主要介绍如何使用FFmpeg命令行工具进行简单的视频处理。 安装FF...

1.9K170
来自专栏有趣的Python和你

Python爬虫之小猪短租房一、xpath爬取分析二、代码三、简单分析四、问题

18320
来自专栏理论坞

【教程】C4D制作Lowpoly风格

按键盘m键,再按c键,调出笔刷工具,将衰减值改成50%,模式改成表面,笔刷强度50%,半径60cm。然后开始在平面上绘制地形。

12720
来自专栏机器学习养成记

ggplot2:结合ggmap绘制地图

ggmap包整合了四种地图资源,分别是Google、OpenStreetMaps、Stamen和Cloudmade。可以方便的与ggplot进行涂层叠加,实现在...

43980
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (15)---报表换肤

在葡萄城ActiveReports报表中,可以设置报表中不同控件的样式,然后把这些样式保存到一个外部的XML文件当中,供其他报表使用。如果用户希望同一份报表以不...

22180
来自专栏日常学python

我爬取了37000条球迷评论,知道了这场比赛的重要信息

这两天看恰好有nba决赛,是球迷的你肯定不会错过的,更何况今年的西部决赛是火箭对战勇士,今年的火箭是很强的,因为没到关键时候总会有人站出来。当然,勇士也是挺强的...

12020
来自专栏QQ音乐技术团队的专栏

动态图片技术 : 历史、格式与性能

本文主要内容为动态图片的定义、发展历史与现状,动态图片相关的术语和概念,动态图片各主要格式,及简要对比,在 Android 平台对比 GIF 与 WebP 格式...

44600
来自专栏向治洪

移动客户端WebP 图片格式优化

前言 在移动端,图片一直是流量大头,一些商品列表和详情等页面,图片大小动不动就以几百K,当然在某些比较大的公司会根据具体情况去加载相应尺寸的图片,这就意味着服务...

33170
来自专栏MixLab科技+设计实验室

以图搜图技术栈

先看个案例: ? 这是什么动画 https://whatanime.ga/ 一个用于通过动画截图找出处的搜索引擎。可以找到跟动画截图相似的动画片截图,并找到动画...

70880

扫码关注云+社区

领取腾讯云代金券