图片格式千千万，希望看完后大家在 2024 年选择图片格式不再彷徨。
公众号：
JavaScript与编程艺术
TLDR
现代前端开发图片优选格式：WebP > PNG。为什么没有 GIF？因为这二者都支持动图（PNG 有 APNG 即 Animated PNG）。
现代是指不需要兼容 IE 浏览器。
为什么没有选择 AVIF？ 它的兼容性也足够，但是生态还不够完善，比如设计师的工具链、市面上的压缩工具都还不成熟。
当然如果你的设计师只能导出 PNG，那就优选 PNG。
选择 WebP 的原因
WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.
1. 能力 💪
WebP：动图 + 更极致的压缩
- PNG 支持透明度，支持动图，即 Animated PNG (APNG)，可压缩度好。
- WebP 作为 PNG JPEG GIF 的超越者，能力全支持的情况下体积能做到更小。
- 能力全支持：无损和有损压缩、动画、透明度
- 更好的压缩度：PNG 是 GIF 的 1/4，而 WebP 是 PNG 的 1/4
2. 兼容性 🧩
WebP：Chrome>=32
- PNG 没的说。IE7 都支持（IE>=7, Chrome>=4）。
- WebP / APNG 现代浏览器都兼容（WebP：Chrome>=32；APNG：Chrome>=59）。
- AVIF 比 前二者稍差，但现代浏览器都兼容。
- JPEG XL 目前只有 Safari 支持。
APNG 一个很有意思的点是可优雅降级，不支持 APNG 动图将展示静态 PNG。当然你可以通过一些库让其在不兼容的浏览器上动起来（原理是用 cavans 画图具体不展开了）。
之前以为 PNG 不支持动图，直到看到这篇好文 APNG在线制作、兼容、播放和暂停
其他知识
| 格式 | 描述 |
|---|---|
| PNG | Semi-transparent areas in PNG files |
| APNG | Like animated GIFs, but allowing 24-bit colors and alpha transparency |
| WebP | Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. |
| AVIF | A modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. |
| JPEG XL | A modern image format optimized for web environments. JPEG XL generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. |
AVIF 和 JPEG XL 区别：压缩体积差不多，但是功能比 JPEG XL 更丰富。
如何判断浏览器是否支持 png 动图？
/*
* apng-detect.js
* 2010-06-13
* By Eli Grey, http://eligrey.com
*
* Detects if a browser supports the APNG format and sets a
* global `APNG` boolean indicating if the browser supports APNG.
*
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
(function() {
"use strict";
var apngTest = new Image(),
ctx = document.createElement("canvas").getContext("2d");
apngTest.onload = function () {
ctx.drawImage(apngTest, 0, 0);
self.APNG = ( ctx.getImageData(0, 0, 1, 1).data[3] === 0 );
};
apngTest.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==";
// frame 1 (skipped on apng-supporting browsers): [0, 0, 0, 255]
// frame 2: [0, 0, 0, 0]
}());
压缩工具
- WebP, PNG & JPEG: tinypng.com/
大家常用的工具有哪些？欢迎留言告知。
