痛点：

很多网站和app有高清图片展示的需求，前后端交互时有很大的流量，在线用户量大时带宽压力随之增大。目前针对图片服务的第三方，有阿里云的oss图片存储服务器，七牛云和又拍云，价格都不便宜。怎样能够少流量又高效地服务用户呢？webp图片编码技术应运而生（可能google根本没考虑这点，只是为了提高网络图片传输速度，哈哈）。

技术栈：

1.前端基于dart的flutter框架，主要用于构建android和ios移动应用软件；
2.后端基于golang的gin开发框架，负责提供webp静态资源图片。

解决方案：

1.客户端向服务器请求图片时，获取webp格式的图片，这里我请求一张大小为76kb的高清图片。

2.在flutter端展示时，我们使用CachedNetworkImage这个组件将其缓存。所见即所得，用户看到的图片都不用二次请求，直接从缓存写入相册中。这里注意一下cacheManager的用法，是一个单例对象。

abstract class BaseCacheManager {/// Creates a new instance of a cache manager. This can be used to retrieve/// files from the cache or download them online. The http headers are used/// for the maximum age of the files. The BaseCacheManager should only be/// used in singleton patterns.

flutter端webp图片展示如下：

3.然后我们在手机缓存中找到webp图片文件，通过dart的image库将其转换为png、jpg或者其他图片格式，保存至相册。

import 'package:image/image.dart' as DownloadImage;

这里我们储存为png格式，效果如下图，大小为745kb：

小结：webp图片传输大小为76kb，从手机缓存中恢复到相册.png形式，大小为745kb，节约了89.8%的流量费用，也降低了带宽压力。

示例源码：

flutter客户端

import 'dart:io';import 'package:image/image.dart' as DownloadImage;import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';void main() => runApp(EpubWidget());class EpubWidget extends StatefulWidget {@overrideState<StatefulWidget> createState() {return new EpubState();}
}class EpubState extends State<EpubWidget> {final BaseCacheManager _cacheManager = DefaultCacheManager();final String _imgUrl = 'http://192.168.0.113:8888/image/model.webp';File _file;@overrideWidget build(BuildContext context) {//动态申请储存权限PermissionHandler().checkPermissionStatus(PermissionGroup.storage).then((pStatus){if(pStatus == PermissionStatus.granted){debugPrint("already get the right to save image on the phone");return;}else{PermissionHandler().requestPermissions(<PermissionGroup>[PermissionGroup.storage, // 在这里添加需要的权限]);}});return MaterialApp(debugShowCheckedModeBanner: false,title: "Fetch Epub Example",home: new Material(child: Scaffold(body: Column(children: <Widget>[
//                    Image.asset('assets/img0.webp'),CachedNetworkImage(imageUrl: _imgUrl,),Padding(padding: const EdgeInsets.only(top: 60),child: RaisedButton(onPressed: () async{FileInfo _fromMemory = _cacheManager.getFileFromMemory(_imgUrl);DownloadImage.Image image = DownloadImage.decodeImage(File(_fromMemory.file.path).readAsBytesSync());// Resize the image to a 120x? thumbnail (maintaining the aspect ratio).DownloadImage.Image thumbnail = DownloadImage.copyResize(image, width: 120);// Save the thumbnail as a JPG.final dir = await getApplicationDocumentsDirectory();
//                         _file = File('${dir.path}/thumbnail.png')..writeAsBytesSync(DownloadImage.encodePng(thumbnail));_file = File('${dir.path}/thumbnail.png')..writeAsBytesSync(DownloadImage.encodePng(image));final result = await ImageGallerySaver.saveFile(_file.path);print('result is $result');setState(() { });},child: Text('download image'),),),if(_file!=null)Image.file(_file)],),)));}
}

golang服务端

package mainimport ("net/http""github.com/gin-gonic/gin"
)func main() {router := gin.Default()router.StaticFS("/image", http.Dir("./image")) //图片model.webp保存在image文件夹下router.Run(":8888")
}

舔狗被骗了一万零八百，实在没钱吃饭了，兄弟们如果都看到这里了，麻烦打赏个10块钱，让我吃个蛋炒饭吧，球球啦~

附言

webp转储jpg、png等任意格式图片在前端完成；而任意格式图片重新编码为webp的时间消耗较大，最好放在后台，这里借鉴一下别人的golang处理办法

golang后台任意图片转储为webp格式

改变世界的webp图片技术，节约你的流量和带宽相关推荐

实战技术：提升网站用户体验—WebP 图片的高效使用
个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈一.WebP 的由来现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设 ...
「前端」webp图片适配流量优化
本文来自尚妆前端团队南洋发表于尚妆博客,欢迎订阅. 图片流量优化刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片.一张图片动辄几十kb,想尽办法优化样式.脚本文件所优化的图片流量其 ...
「前端」webp图片适配流量优化 1
本文来自尚妆前端团队南洋发表于尚妆博客,欢迎订阅. 图片流量优化刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片.一张图片动辄几十kb,想尽办法优化样式.脚本文件所优化的图片流量其 ...
webp图片适配流量优化
转自这里写链接内容图片流量优化刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片.一张图片动辄几十kb,想尽办法优化样式.脚本文件所优化的图片流量其实还不如一张图片大. 本文从两个角 ...
DPG图片压缩技术和webp图片格式
DPG图片压缩技术和webp图片格式一.DPG图片压缩技术京东自主研发推出的DPG图片压缩技术,经测试该技术,可以直接节省用户近50%的浏览量,极大地提升了用户的网页打开的速度.能够兼容JPEG, ...
iOS 客户端基于 WebP 图片格式的流量优化（下）
在iOS 客户端基于 WebP 图片格式的流量优化(上)这篇文章中,已经介绍了WebP格式图片的下载使用,仅仅只有这样还远远不够,还需要对已经下载的图片数据进行缓存. 曾经有句名言『计算机世界有两大难 ...
助力全站WebP ，阿里云云上FPGA 团队发布 WebP图片解决方案
摘要: 阿里云 WebP 图片解决方案的软件部分由联捷计算科技(CTAccel)提供,再整合上阿里云自身的FaaS (FPGA as a Service) 弹性计算平台,形成了完整的阿里云 WebP ...
关于webp图片格式初探
前言不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
如何让Ubuntu系统支持WebP图片格式
如何让Ubuntu系统支持WebP图片格式本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP ...
异构计算助力客户春节webp图片编码
摘要: 背景与挑战技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%:谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以 ...

改变世界的webp图片技术，节约你的流量和带宽

痛点：