网站优化之图片格式权衡

逛论坛的时候发现看不到别人发的图片,我第一反应是他的图床挂了,结果是高贵的Chrome不支持heic格式,It's only apple can do了属于是。

时间线

对比

示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
❯ exiftool /Volumes/TOSHIBA/tg/59190594_p0.jpg 
ExifTool Version Number : 12.76
File Name : 59190594_p0.jpg
Directory : /Volumes/TOSHIBA/tg
File Size : 1759 kB
File Modification Date/Time : 2024:06:22 13:56:05+08:00
File Access Date/Time : 2024:06:22 13:56:08+08:00
File Inode Change Date/Time : 2024:06:22 13:56:05+08:00
File Permissions : -rwx------
File Type : JPEG
File Type Extension : jpg
MIME Type : image/jpeg
JFIF Version : 1.01
Resolution Unit : None
X Resolution : 1
Y Resolution : 1
Image Width : 1920
Image Height : 1080
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:4:4 (1 1)
Image Size : 1920x1080
Megapixels : 2.1

阿里OSS图片转换结果

示例图片

1
image/auto-orient,1/quality,q_100/format,{jpg|jpeg|png|webp|avif|heic}
原图 jpg jpeg png webp avif heic
1759 kB 407 kB 407 kB 472 kB 454 kB 不支持 不支持
-77% -77% -73% -74%
  • 在大部分情况下,都是用图片的更低的兼容性换更小的体积
  • 阿里云等对象存储厂商提供了直接添加参数完成图片转换的功能
  • 以下对比都是将图片相对质量设置为100%,真实场景下一定会更小
  • 不同图片适合的压缩率不同,此处图片仅做参考

ffmpeg批量转换

FFmpeg 是一个可以处理音视频的软件,功能非常强大,主要包括,编解码转换,封装格式转换,滤镜特效。同时也支持 各种网络协议,支持多种高层协议的推拉流,也支持更底层一点的TCP/UDP 协议推拉流。

在多平台系统方面,FFmpeg 的兼容性也优势显著,FFmpeg 可以在 windows,Linux,Mac,ios,android 等等操作系统上运行。

下面通过 ffmpeg + zsh 批处理,而不是通过 Node.js 之类自动压缩。原因其一,前者比后者性能更高,C 和 JavaScript 不用多说;原因其二,前者比后者相对简单点。

安装 ffmpeg

1
brew install ffmpeg

查看支持的格式

1
ffmpeg -formats

批量转换

  • 转换为webp
1
2
3
4
[[ ! -d ./webp ]] && mkdir ./blog/webp
for f (*.(bmp|jpg|jpeg|png)) {
ffmpeg -i $f -c:v libwebp -lossless 1 -quality 100 -compression_level 6 ./blog/webp/${f%.*}.webp
}
  • 转换为avif
1
for %%i in ("./blog/png/*.png") do ffmpeg -i "%%i" -c:v av1 -strict experimental -b:v 0 -crf 30 "./blog/avif/%%~ni.avif"

在线转换

相关