APNG と GIF は「互換性・透明度・体積」で選ぶ。本稿は対照表、FPS 固定後の ffmpeg/gifsicle 例、リモート M4 の検収手順。連番との関係は Lottie→PNG 連番、混在語彙は WebP/AVIF/PNG に揃える。
シナリオと納品制約
メール・旧 CMS は GIF、モダンは APNG 可、厳密ピクセルは連番 PNG。アルファ付きループは多く APNG/GIF の二択。
- ループ:無限か
N回かを仕様に明記。 - FPS:
12/24/30に固定し、ceil(尺×fps)=連番枚数(連番マトリクスと同語彙)。 - 色彩/透明/体積:sRGB/P3、透明 FAQ、
max_bytesを README に数値で書く(PNG 最適化と接続可)。
APNG vs GIF 対照表(体積、互換性、透明度)
パレット GIF とフルカラー APNG ではバイト数と見え方が分岐する。
| 観点 | APNG | GIF |
|---|---|---|
| 体積の傾向 | フルカラー+フルアルファで連番 PNG に近い肥大化しやすい。フレーム差分で多少抑えられる | 256 色+パレット最適化で小さくなりやすいが、階調が粗い |
| 互換性 | 主要ブラウザは対応(仕様確認はターゲット端末で)。一部メール・旧ビューアは非対応 | 広い — ほぼ全表示環境 |
| 透明度 | フルアルファ。ソフトエッジのループに適する | 一般的に1 ビット透過。アンチエイリアスはフチ色かつら合わせが必要なことが多い |
| フレームレート | 可変ディレイ。ffmpeg で -framerate と整合 |
可変ディレイ。パレット生成とセットで再現性を README に残す |
| 選定の目安 | グラデーション・半透明・ブランド色厳守のループ | アイコン的単色、バナー簡易ループ、メール互換最優先 |
連番のみの案件はマニフェストが正。Figma/Sketch 透明比較で差分を先に潰す。
一括書き出しと検収ステップ
リモート M4 で inbox→work→out と quarantine を分離。自動化記事と同型のフォルダ契約が扱いやすい。
検収チェックリスト(バッチ想定)
- 形式:
file --mime - 寸法:
magick identifyまたはffprobeで ±0 px - バイト:
stat -f%z≤max_bytes - ループ:GIF
-loop 0/APNG-plays 0が README と一致 - 目視:Safari/Chrome 実ピクセル
コマンド例(コピペ用)
入力 in_%04d.png、FPS 例 12。
GIF(パレット・ディザ)
ffmpeg -y -framerate 12 -i "in_%04d.png" \
-vf "fps=12,split[s0][s1];[s0]palettegen=stats_mode=single:max_colors=256[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" \
-loop 0 "out.gif"
gifsicle -O3 --colors 256 -o "out_opt.gif" "out.gif"
APNG(無限ループ)
ffmpeg -y -framerate 12 -i "in_%04d.png" -plays 0 -f apng "out.apng"
バッチ走査(zsh/ImageMagick)
for f in out/*.@(gif|apng|png)(N); do
magick identify -format "%f %wx%h %[size]\n" "$f"
done
連番を oxipng してから APNG 再生成で容量を抑えられる場合あり。超過は quarantine/ へ退避し FPS/解像度を再交渉。
FAQ(色ずれ、体積超過)
色ずれ:GIF の 256 色量子化でバンディング。stats_mode=single でパレット固定、グラデ主体は APNG/連番を検討。色彩は静止画と同じ ICC 語彙で。
体積超過:FPS 低下→解像度見直し→GIF は gifsicle/色数削減、APNG はフレーム再圧縮。監視・ログで隔離と再試行を仕様化。
次のステップ:動画素材のバッチ検収をリモート Mac M4 へ
ホーム・購入・料金はログイン不要。ご利用ガイド。技術インサイトの納品・バッチ系を参照。
Apple Silicon レンダーワーカー
APNG/GIF 書き出しと検収を M4 にオフロード
ffmpeg ジョブとしきい値ゲートを リモート Mac mini M4 に集約し、ローカル端末の熱とディスク I/O を削る。