pathを追加する

環境変数にffmpeg.exeの入っているフォルダー場所を追加します。

C:\ffmpeg

パスの追加方法の詳細はここを参照してください。

ffmpegの起動を確認する

1. 1.ウィンドウズキーを押して「cmd」と入力し、コマンドプロンプトを起動します。

2. 2.ffmpegと入力して画像のようにに表示されたら正常に環境変数が追加でき、ffmpegが起動できる状態になりました。

batファイルを用意する

cd/d %~p1
:FILEDROP
ECHO ファイル受け取り

:REPEAT
ffmpeg -i %1 -vcodec libwebp -lossless 0 "%~n1.webp"
if "%~2"=="" GOTO EXIT
shift
GOTO REPEAT
:EXIT

1. 1.メモ帳を開いてコマンドをコピぺする

2. 2.bat形式で保存する

• ファイル名の最後に「.bat」と入力する。
• ファイルの種類は「すべてのファイル」する。
• 文字コードはANSIにする。

変換する

あとは画像ファイルを選んでドラッグアンドドロップで変換がされます。

検証

ファイルサイズ

画像のファイルサイズは312KBから25.3KBになりました。
およそ12分の１まで小さくなりました。

画質について

元の画像もあまりよくありませんが、劣化もあまり感じられない。

apngについて

apngはアニメーションpngです。webpと同様gifアニメーションの上位互換です。 以下のコマンドで良いクオリティで出現できると思います。

ffmpeg -i %1 -vcodec libwebp -lossless 0 -qscale 5 -vf fps=8,scale=640:-1,format=pal8 -pix_fmt yuv420p -preset default -y -loop 0 -b:v 100k "%~n1.webp"

apngとwebp avifどれがいいのか？　

よく webp vs apng vs avif。何が優れている、どっちを使えばいいのか。と言う議論があるが、今のところどちらでも良い、大差無しと感じます。
私は諸事情によりapngではなく、webpを使っています。そろそろavifに切り替えを検討中。

個人的意見

webp apngどちらを使うべきか、ズバリwebpを使う方が良いと考えます。
理由としては汎用性、端末、ブラウザの対応状況がwebpがほんの少し優れているからです。
また、apngがオプションの指定が少し複雑なためです。適切にパラメーターを調整できればapngの方が優れている。動画によるので本当にケースバイケースになる。
そのため、汎用性が高いwebpを使うべきだと考える。

apng

apngが良いと思える部分

• 画質が良い
• ファイルサイズが小さい

不満がある部分

• apng拡張子を認識しないサービス、端末等がある。
• 拡張子がpngでも可能だが、png形式というのが普及しているため混在してしまうできるだけapngにしたい。
• 変換時のオプションの設定がめんどくさい
• 動画毎にパラメーターを調整しないと恩恵が受けれない。

webp

webpが良いと思える部分

• 変換のオプションが簡単
• ほぼ全てのサービス、端末がwebpを対応しているので 迷ったらwebpに変換しておけば解決する。

不満がある部分

• 画質が荒い,ファイルサイズが大きくなる

avif

正直avifがかなり良い。品質良いし、ファイルサイズ小さい。のだた、まだブラウザー側が対応していないところもあるので...
と言ってもほとんど対応しているので、webpからavifに切り替えてしまおうか迷っている...

ffmpeg -i %1 -c:v libaom-av1 -b:v 80k -vf scale=640:-1,framerate=8 -pix_fmt yuv420p -aom-params lossless=0 -movflags faststart -g 80 -cpu-used 8 -y  "%~n1.avif"

avifのオプション

上記のコマンドで私の場合満足しているが、人によって欲しい結果が異なるので、どこを変更すればいいのか

#映像クオリティ
-b:v 80k
変更例:80k -> 1M 500k
#フレームレート
-framerate=8 -g 80
両方を合わせるべき
変更例:framerate=8 -g 80 -> framerate=15 -g 150  
#画像サイズ
-vf scale=640:-1
変更例:-vf scale=1080:-1

参考までに40秒の動画を変換したところ

画質に関しては動画でご確認ください。

どれが映像がどの拡張子なのか

まとめ

ウェブページで動く画像は何がいいのかは、現時点ではwebpが良いと思う。
やはり人によって表示されない状況は避けたい。
しかし、正直のところこの画像問題についてはcloudinaryを使っているため、何も考えずに済んでいる

もう少しでavifも全て対応されるのでavifを使うのも悪く無い選択肢。そろそろwebpからavifに切り替えようかな...