优化

网站优化之图片格式权衡

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

  • 2024.8.30更新， iPhone 16 系列据报道将支持 JPEG-XL 格式的图片，体积是 JPEG 的三分之一。

时间线

对比

示例图片

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"

在线转换

相关