Skip to content

请放弃使用JPEG、PNG、GIF格式图片,使用WebP格式图片!

发表: at 13:40

随着互联网的发展,图片作为最直观的内容展示方式逐渐在系统中占用越来越多的版面,但是随之而来的就是系统性能的大幅度下滑。传统的JPEG、PNG、GIF各有优点,也各有弊端,“大一统”的图片格式被需要,于是WebP诞生了。

需求

WebP格式文件产生的原因主要是源于对**「网络图像传输效率」的需求以及「现有图像格式在某些方面的局限性」**。

在现代互联网网站需要加载**「大量的高质量图像」,智能手机和平板电脑的普及推动了「移动互联网」**的快速发展。在移动设备上用户的流量是有限的。因此,如何在不影响图像质量的前提下减少图像文件大小,成为了一个重要的课题。

图片

传统的JPEG、PNG和GIF等传统图像格式各有其优点,但也存在不足之处。

例如,JPEG虽然非常适合照片,但仅支持有损压缩且不支持透明度;PNG支持透明度但文件大小通常较大;GIF支持动画但色彩范围有限,且文件体积相对较大。

产生

WebP是一种由Google开发的图像文件格式,旨在提供更高效的图片压缩,适用于网络图像传输和展示。

  1. 「高压缩效率」:WebP采用了先进的压缩算法,可以提供比JPEG更高的压缩率而不会明显损失图像质量。这意味着使用WebP格式可以在不牺牲视觉体验的情况下显著减少图片文件的大小,从而加快网页加载速度。

  2. 「支持透明度」:与JPEG不同,WebP支持alpha通道(即透明度),这使得它在需要背景透明效果的应用场景中成为PNG的一个有力替代者,同时还能以更低的文件大小实现这一功能。

    图片

  3. 「动画支持」:除了静态图像外,WebP还支持动画,作为一种更加有效的替代GIF的方案。相比GIF,WebP能够以更小的文件尺寸提供更高品质的动画效果和更多的色彩支持。

  4. 「广泛兼容性」:虽然WebP最初由Google推出,但它逐渐获得了广泛的浏览器和其他平台的支持,包括Chrome、Firefox、Edge、Safari等主流浏览器,以及各种操作系统和图像处理软件。

使用

「在线格式转换」

  1. SO JSON 在线格式转换 https://www.sojson.com/image/format.html

  2. Convertio https://convertio.co/zh/image-converter/

  3. ILoveImg https://www.iloveimg.com/zh-cn/features

  4. ALL TO ALL https://www.alltoall.net/

    图片

「程序格式转换」

Python:可以使用Pillow库(PIL的一个分支)结合webp的支持来进行转换。

// 安装 pip install Pillow

from PIL import Image
im = Image.open("input.png")
im.save("output.webp", "WEBP")

也可以使用Node.js来转换(在下面的篇幅中详细写个例子)

// 安装 npm install sharp

const sharp = require('sharp');
sharp('input.jpg')
    .webp({ quality: 90 })
    .toFile('output.webp')
    .then(info => { console.log(info); });

局限

  1. 「浏览器兼容性」:虽然大多数现代浏览器已经支持WebP格式,但仍有少数旧版浏览器可能不完全支持或根本不支持这种格式。在转换的同时也需要准备适当的回退方案(如提供JPEG或PNG版本的图像)。
  2. 「性能问题」:尽管WebP通常能提供更好的压缩率和质量比,但在某些情况下,转换过程可能会增加服务器负载,尤其是在需要实时生成WebP图像的情况下。
  3. 「特定需求和偏好」:一些网站可能基于设计、品牌或其他技术要求而选择特定的图像格式。例如,对于需要极高保真度的专业摄影展示,可能仍然倾向于使用TIFF或高质量JPEG格式。

上篇文章
独立站删掉的内容怎么办,都需要做301跳转吗?
下篇文章
产品经理狂喜!Figma MCP 帮我 3 分钟还原高颜值天气 App