WebP 解决方案

收藏492

阅读10985

更新时间2022-04-11

启用 webp:

1. 打开 .tmtworkflowrc, 开启配置:

{  "supportWebp": true}

2. 执行 gulp build_dist 即可

webp 的实现流程

  1. 将 sprite 和 img 目录下的图片转换成 .webp 格式
  2. 将转换后的 .webp 文件和原文件作比较,找出最小文件(有些转换后比原文件大)
  3. 生成 .webp.css 文件,里面调用的都是最小文件
  4. 将 html 引用的 css 地址缓存,并插入 webp 相关的 JS,浏览器加载的时候,这段 JS 会预先判断浏览器是否支持 webp,是的话再将 css 地址切换成对应的 .css 或 .webp.css

此为 webp 在前端应用中的常见解决方案,个人可以根据实际情况作相应调整。

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.9万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.4万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.1万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.8万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号