本博客列表缩略图在支持webp格式的浏览器下，使用的是webp格式图片，不支持webp图片下使用的是原图片（如png,gif,jpg等）

webp使用指南，请参考 https://www.imqianduan.com/browser/webp.html

如何转换webp?

google官方有推出工具cwebp用来转换webp，可以通过命令行的形式使用webp

cwebp官方文档： https://developers.google.com/speed/webp/download

这里我们使用另一个基于cwebp封装后的插件 web-converter，使用起来相对比较简单

安装webp-converter及使用

  1. // 安装
  2. npm install webp-converter --save
  1. // 使用
  2. var webp=require('webp-converter');
  4. //pass input image(.jpeg,.pnp .....) path ,output image(give path where to save and image file name with .webp extension)
  5. //pass option(read documentation for options)
  7. //cwebp(input,output,option,result_callback)
  9. webp.cwebp("input.jpg","output.webp","-q 80",function(status,error){
  10. //if conversion successful status will be '100'
  11. //if conversion fails status will be '101'
  12. console.log(status,error);
  13. });

问题

webp-converter在本地(windows 7)安装测试一点问题没有，传至服务器就报错了

错误：

  1. cwebp: error while loading shared libraries: libaio.so.6: cannot open shared object file: no such file or directory

一直以为是路径问题，后来发现是依赖包的问题，
解决:
安装linux缺失依赖,问题解决

  1. yum install libXext.x86_64
  2. yum install libXrender.x86_64
  3. yum install libXtst.x86_64

浏览器判断是否支持webp

通过http请求的accept字段，可以判断浏览器是否支持webp格式

本博客使用的是eggjs框架：

  1. // 是否支持webp
  2. const requestAccept = ctx.request.headers.accept;
  3. const isSuportWebP = /image\/webp/gi.test(requestAccept);

eggjs使用Nunjucks作为模板，在模板中判断isSuportWebP是否为true，是则输出webp格式的URL，否则输出默认图片格式URL

最新文章

  1. install scrapy-redis on centos
  2. 【转载】在IT界取得成功应该知道的10件事
  3. scrollview 嵌套 折叠效果
  4. vs2015 现用插件
  5. Android应用程序消息处理机制
  6. nginx 负载均衡策略
  7. 在myeclipse文件中如何创建properties类型的文件，从而连接数据库
  8. Android的Task和Activity相关
  9. loadView 与 ViewDidLoad
  10. IOS学习：常用第三方库（GDataXMLNode：xml解析库）
  11. 在WPF中自定义你的绘制（三）
  12. 【CTO辩论】移动创业大军：谁斗争or变更代理
  13. 使用LFM（Latent factor model）隐语义模型进行Top-N推荐
  14. 在UE4中使用SVN作为source control工具
  15. [Java自学第二天]
  16. PCI9054芯片的型号说明及购买建议
  17. nodejs核心技术
  18. Android Environment.getExternalStorageDirectory() 获取的是内部存储还是外部存储？ - z
  19. bzoj千题计划291：bzoj3640: JC的小苹果
  20. UVa 11491 Erasing and Winning （贪心，单调队列或暴力）

热门文章

  1. 洛谷 P816 忠诚 题解
  2. asp.net大文件分块上传断点续传demo
  3. 洛谷P2312解方程题解
  4. package.json 版本号解释
  5. const关键字与数组、指针
  6. namenode 性能优化 RPC队列拆分
  7. [Shell]利用JS文件反弹Shell
  8. Perl快速查找素数
  9. Nginx日志按日切分及清理超期的日志文件
  10. Problems with Localtime