株式会社Urthの植野です。
今回は弊社Webサイトで使われているアニメーションpngを軽くしてみたいと思います。
Urthのロゴがくるくる回るアニメーションpngが今回のターゲットです。
Urthのロゴpng (ファイルサイズが大きいので注意)
非常におしゃれなアニメーションなのですが、容量が40MBと大きく皆さんの帯域を消費してしまうので、軽量化してみたいと思います。
ファイル情報を確認する
まずアニメーションpng(input.png)のファイル情報を確認します。
$ curl -o input.png https://u-rth.com/wp-content/themes/urth/assets/img/top/object-v5.png
$ ffprobe -v error -select_streams v:0 -count_frames -show_entries stream=codec_name,pix_fmt,width,height,r_frame_rate,nb_read_frames -of default=noprint_wrappers=1 input.png
codec_name=apng
width=1153
height=976
pix_fmt=rgba
r_frame_rate=100/3
nb_read_frames=240
$ ls -lh input.png
-rw-rw-r-- 1 akira akira 42M 7月 24 15:42 input.png
これより以下の情報が得られました。
| 項目 | 値 |
|---|---|
| コーデック | apng |
| アルファチャンネル | あり |
| 幅 | 1153 |
| 高さ | 976 |
| FPS | 33.3 |
| フレーム数 | 240 |
| ファイルサイズ | 42M |
webpに変換する
アニメーションpngからアニメーションwebpに変換してみます。
ffmpegを使って変換します。
$ ffmpeg -i input.png -loop 0 output.webp
結果を確認します。
$ ffprobe -v error -select_streams v:0 -count_frames -show_entries stream=codec_name,pix_fmt,width,height,r_frame_rate,nb_read_frames -of default=noprint_wrappers=1 output.webp
codec_name=webp
width=0
height=0
pix_fmt=unknown
r_frame_rate=25/1
nb_read_frames=N/A
$ ls -lh output.webp
-rw-rw-r-- 1 akira akira 3.3M 7月 24 16:13 output.webp
WebPのファイル情報は正しく取れていないですが、容量の削減には成功しています。
| 項目 | 値 |
|---|---|
| コーデック | webp |
| アルファチャンネル | なし |
| 幅 | 0（不明？） |
| 高さ | 0（不明？） |
| FPS | 25 |
| フレーム数 | 不明 |
| ファイルサイズ | 3.3M |
Claudeに聞いたところ、exiftoolで詳細な情報が取れるとのことなので、試してみました。
$ sudo apt install libimage-exiftool-perl
$ exiftool output.webp
ExifTool Version Number : 12.76
File Name : output.webp
Directory : .
File Size : 3.5 MB
File Modification Date/Time : 2024:07:24 16:13:04+09:00
File Access Date/Time : 2024:07:24 17:16:49+09:00
File Inode Change Date/Time : 2024:07:24 17:16:49+09:00
File Permissions : -rw-rw-r--
File Type : Extended WEBP
File Type Extension : webp
MIME Type : image/webp
WebP Flags : Animation, Alpha
Image Width : 1153
Image Height : 976
Background Color : 255 255 255 255
Animation Loop Count : inf
Duration : 7.20 s
Image Size : 1153x976
Megapixels : 1.1
フレームレートはわかりませんが、元のpngファイルが240フレーム、33.3fpsなので、1durationには7.2秒かかるのでおおよそ正しくWebP変換できていそうです。
変換後のファイル
まとめ
FFmpegでアニメーションpngをアニメーションwebpに変換してみました。
その結果ファイルサイズは1/12に削減できました。
exiftoolでファイル情報を確認してみたところ、おおよそ正しく変換できていそうです。
FFmpegもexiftoolも万能で便利ですね。
Discussion