webp使用前调研

加油加薪不加班
212 阅读7分钟

图片之WebP

一、引言

在今日这个数字化高速发展的时代，网站已成为企业展示形象、推广产品、服务用户的重要窗口。而在构成网站的众多元素中，图片无疑扮演着举足轻重的角色。它们不仅能为网站增添视觉吸引力，还能直观地传达信息，提升用户体验。然而，随着高清、大图等视觉需求的不断增长，图片也成为影响网站性能的关键因素之一。今天主要探讨的就是图片格式的优化。

二、图片格式的发展历史

图片格式的发展历史是一个漫长而充满创新的过程，各种图片格式在不同时期被提出，以满足不同的需求和标准。以下是几种主要图片格式的发展历史 webpShareimghistory.png

概念介绍

💡 无损、有损压缩：无损、有损压缩，是一个计算机术语，指数码图像文件压缩的两种类型。

无损压缩是对文件本身的压缩，和其它数据文件的压缩一样，是对文件的数据存储方式进行优化，采用某种算法表示重复的数据信息，文件可以完全还原，不会影响文件内容，对于数码图像而言，也就不会使图像细节有任何损失。

有损压缩是对图像本身的改变，在保存图像时保留了较多的亮度信息，而将色相和色纯度的信息和周围的像素进行合并，合并的比例不同，压缩的比例也不同，由于信息量减少了，所以压缩比可以很高，图像质量也会相应的下降。

💡 透明：

索引透明：及布尔透明，某一像素只有全透明或者全不透明两总效果，不能对透明度进行调整

alpha透明：可选透明度

  1. GIF (Graphics Interchange Format)
    • 提出公司：CompuServe
    • 提出时间：1987年
    • 最先支持的浏览器：早期浏览器，如Mosaic（1993年发布，但GIF在此之前已存在）
    • 特点：支持256种颜色，透明通道只有1 bit，文件压缩比不高，但支持多帧动画。
    • 优点：压缩率高，支持动画效果，支持无损压缩。
    • 缺点：颜色数量有限，不支持半透明效果。
  2. JPEG (Joint Photographic Experts Group)
    • 提出组织：Joint Photographic Experts Group（JPEG小组）
    • 提出时间：1992年
    • 最先支持的浏览器：早期浏览器，如Mosaic（但JPEG的具体浏览器支持时间可能因浏览器版本而异）
    • 特点：最常见的图片格式之一，支持有损压缩，以图像质量换取存储空间。
    • 优点：支持多种颜色模式，压缩率高，支持有损压缩。
    • 缺点：在压缩过程中会丢失部分信息，导致图像质量下降。
  3. PNG (Portable Network Graphics)
    • 提出组织：PNG Development Group
    • 提出时间：1995年（作为公开标准发布）
    • 最先支持的浏览器：早期浏览器开始逐步支持，如Netscape Navigator（但具体支持时间可能因版本而异）
    • 特点：无损压缩，支持完整的透明通道，旨在替代GIF。
    • 优点：支持高质量压缩，支持透明度和alpha通道，支持多种颜色模式。
    • 缺点：相对于JPEG格式，PNG文件的压缩率较低。
  4. SVG (Scalable Vector Graphics)
    • 提出组织：W3C (World Wide Web Consortium)
    • 提出时间：1999年
    • 最先支持的浏览器：Mozilla的Firefox（以及其他一些浏览器，但Firefox是早期的主要支持者）
    • 特点：基于矢量的图像格式，可以无限放大而不失真。
  5. WebP
    • 提出公司：Google
    • 提出时间：2010年
    • 最先支持的浏览器：Google的Chrome（随后其他浏览器也开始支持）
    • 特点：以VP8视频帧内编码为基础，提供更高效的压缩，旨在替代JPEG。
    • 优点：相对于JPEG和PNG格式，WebP在相同质量下具有更高的压缩率。
    • 缺点：目前部分浏览器和图像编辑软件可能不支持WebP格式。

webpShareimg1.jpg

webpShareimg2.jpg

webpShareimg4.jpg

文件类型存储的颜色值点阵（像素）有损/无损透明
GIF256点阵图无损不支持半透明
JPEG2^24点阵图有损不支持透明
PNG2^24点阵图无损支持半透明
SVG不受限矢量图无损支持半透明
WebP2^24点阵图无损、有损支持半透明

三、Webp使用优势

WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。

从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

四、可行性-案例

淘宝

webpShareimgexp2.png转存失败，建议直接上传图片文件

花瓣网

webpShareimgexp1.png转存失败，建议直接上传图片文件

五、Webp使用

问题–浏览器兼容性

目前直销系统中需要支持的版本：安卓>=5.0,ios>=9.0

兼容性：caniuse说明,点击查看详情

webpShareimg1.png转存失败，建议直接上传图片文件

结论:

安卓符合预期，可直接使用

IOS14以上才支持，需要有降级方案

浏览器Safari不支持，纯h5也需要有降级方案

兼容方案

纯前端判断是否支持webp：

  • javascript方案
   /**   * 判断浏览器是否支持 webp   */   // 方法1: 通过尝试加载一张 webp 格式的图片来判断   function isSupportWebp() {
       const imgUrl = 'https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp';       const image = new Image();       image.src = imgUrl;       image.onload = function() {
           // 加载成功，说明支持 webp           return true;       }
       image.onerror = function() {
           // 加载失败，说明不支持 webp           return false;       }
   }
   // 方法2: 通过判断 HTMLCanvasElement.toDataURL() 返回的 dataURI 来判断   function isSupportWebp() {
       const str = document.createElement('canvas').toDataURL('image/webp');       // 如果支持则会返回传入的类型 image/webp --> data:image/webp;base64,UklGRtgCAABXRUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgSAAAAAQcQEREQkCT+/x9F9D/tf0MAVlA4IIAAAABwDQCdASosAZYAPm02mUmkIyKhICgAgA2JaW7hdrEbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfasAAD+/9YAAAAAAAAAAA==       // 如果不支持则会返回默认值 image/png --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADGSURBVHhe7cExAQAAAMKg9U9tCF8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAONUAv9QAAcDhjokAAAAASUVORK5CYII       return str.indexOf('image/webp') > -1;   }
   /**   * 选择浏览器支持的图片格式   */   function getImg(compressedImg, originalImg) {
       const isSupport = isSupportWeb();       return isSupport ? compressedImg : originalImg;   }
  • html方案 <picture> 元素
  利用浏览器会选择 `<picture>` 元素中最匹配的子 `<source>` 元素，如果没有匹配的，就选择 `<img>` 元素的 src 属性中的 URL 这一特点。如果浏览器支持 image/webp 类型的图片，则加载 `<source>` 元素中 srcset 属性指向的资源，如果不支持则跳过 `<source>` 元素，加载 `<img>` 元素。
  • ios方案：
SDWebImage提供的WebP插件：SDWebImageWebPCoder；

YYImage提供的插件；

其他方案:

根据http响应头accept的值内是否包含webp格式判断浏览器是否支持webp格式

将其他图片格式转webp的方案

avatar
文章
阅读
粉丝