概述
在搭建网站时，常常会使用商品照片或免费商用图片来辅助文字，而图片又分为好几种档案类型，最常见的包含 JPG、PNG 档，近年还有一种新的图片格式，叫做 WebP。
你知道该选择哪一种图片格式吗？选对图片格式才能确保网页运作流畅，打造高品质、速度快的网页。
什么是WebP
WebP 是一个较新的档案格式，由 Google 开发，是一款以加快网页加载速度为目标的档案类型。
WebP 图片可以呈现高品质影像，同时档案大小远低于 JPG 和 PNG 等格式，因此非常适合使用于含大量图片的网页中。
WebP 格式特点
- 两种压缩模式： 失真、不失真两种压缩模式
- 支持透明度： 2011年新增了影像透明度功能
- 支持动画： 可以作为GIF的替代格式
- 浏览器支持： Chrome、Safari、Microsoft Edge、Firefox等主流浏览器都已支持
WebP 优点
- 网页加载速度快
- 档案小，可节省许多空间
- 失真、不失真两种压缩模式
- 高品质图片
- 支持透明度和动画呈现
WebP 缺点
- 在较早版本的浏览器中，可能无法正确显示
- 部分图片编辑软件不支持 WebP 格式
- 仍有些网页平台、应用程序不支持 WebP 格式
什么是JPG
JPG 又称 JPEG，是一种点阵影像档案，由联合图像专家组 JPEG（Joint Photographic Experts Group）这个国际组织开发。
从以前 JPG 就一直是数字影像的首选档案格式，许多摄影师都会选择将档案储存为 JPG 档案。
JPG 优点
- 加载速度较快
- 档案较小，可节省许多空间
- 为网站、摄影首选图片格式
- 几乎所有软件、浏览器和应用程序都支持
JPG 缺点
- 不支持透明背景
- 不支持动画
什么是PNG
PNG 是一种点阵影像档案，在1995年推出，一开始取名为 PING，之后缩短改为 PNG。PNG 常用于网页图片、图形、插图等地方。
PNG 特点
- 支持透明背景： 可以制作含透明背景的图片
- 色彩丰富： 可处理1,600万种色彩
- 不失真压缩： 图片品质不会受损
- 仅支持RGB： 主要用于数字媒体和屏幕
PNG 优点
- 支持透明背景
- 不失真压缩，图片质量高
- 适合专业设计师使用
PNG 缺点
- 档案较大，占用空间多
- 不适合在网页上大量使用
三者对比
| 特性 | WebP | JPG | PNG |
|---|---|---|---|
| 压缩方式 | 有损/无损 | 有损 | 无损 |
| 文件大小 | 最小 | 较小 | 较大 |
| 透明度 | 支持 | 不支持 | 支持 |
| 动画 | 支持 | 不支持 | 不支持 |
| 浏览器支持 | 主流浏览器 | 全面支持 | 全面支持 |
使用建议
- WebP： 推荐站长使用，可以加快网站速度，提升用户体验
- JPG： 适合在网站上使用，档案小，加载速度快
- PNG： 适合需要高质量图片和透明背景的场景