webp 项目总结以及思考

最新推荐文章于 2025-08-19 16:03:58 发布

weixin_34293059

最新推荐文章于 2025-08-19 16:03:58 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/raymondbyc/p/5042634.html

本文探讨了WebP图片格式的应用及其对公司流量节省和用户体验提升的作用。通过多种方案尝试，解决了浏览器兼容性问题，并详细记录了项目实施过程中的挑战与解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webp 项目总结以及思考

webp 是一种新兴的图片格式，压缩率更高，图片体积更小，但是会有兼容性问题。

项目初衷：

从公司角度讲，可以帮助公司大幅度减少流量
从用户角度讲，可以更快的加载界面

最初想法，以及遇到的问题

【方案】：全部图片使用 webp 格式，将兼容较好格式（jpg,png）的链接放在自定义属性中。
【问题】：在不支持 webp 格式的浏览器中，判断浏览器并将替换为jpg图片有较长时间的空白时间。
【方案】：在未支持 webp 格式的浏览器中将图片转换为 flash。【问题】：flash 太重，代价过大。
【方案】：在未支持 webp 格式的浏览器中用官方解析库来解析。
【问题】：解析库解析速率过慢，可以考虑在移动端中使用，。

公司环境以及具体操作层面要考虑的因素

图片放在某云公司上，普通图片转换为 webp，只需要在请求路径后加一个 querystring.
项目有一部分中使用了 lazyload.
首屏加载要快，不能出现严重影响用户体验的白屏
70% 用户的浏览器支持 webp.

最后落实的方案

1.0版本

此版本属于实验版本，主要用来看图片升级后的流量减少数据。故未未进行首屏的图片升级，只在 lazyload 的图片中进行了图片格式升级。

具体方案如下：
先进行浏览器的判断，若浏览器支持 webp 格式，在 lazyload 将 data-original 替换为 src 过程中，将图片路径后加入 querystring.

2.0版本【未升级】

开发 get_img php 插件，将img原生标签替换。
后台判断浏览器版本，若用户浏览器支持webp，php插件会输出加了querystring 的 img 标签。

缺点：需要维护支持 webp 浏览器白名单。
优点：开发人员时引用 get_img 插件时不需要考虑是否属于首屏。直接引用即可。

踩过的坑

判断浏览器是否支持 webp 格式
原方案为：

if(!sWebP){
    var img = new Image();
    img.onload = img.onerror = function () {
        Info.sWebP = (img.width > 0) && (img.height > 0);
    };
    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
}

在 ie 下，当出现 img.error 的情况时，得到的 img.width 以及 img.height 是大于0的【宽为28，高为40】，因此，这样会导致 sWebP 的结果为 true.这样是有问题的.因此，更好的判断方式如下：

if(!sWebP){
    var img = new Image();
    img.onload = function () {
        sWebP = (img.width > 0) && (img.height > 0);
    };
    img.onerror = function () {
        sWebP = false;
    }
    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
}