見出し画像

noteでのアニメーション画像の取り扱いテスト

rijk

記事を書く時、アニメーション画像を使いたいときがあります。
アニメーション画像の種類には gif、apng、webpなどがあります。

現状 note では gifを使うのがお手軽のようです。
202507時点


noteでのアニメーション画像

APNG

APNGアニメーションを、リンクとして埋め込みましたが、アニメーション表示されないようです。興味のある方は以下APNG画像をダウンロードしてブラウザなどで表示してみてください。アニメーションするはずです。

例えば、GIZMODEに APNGの記事が載っています。

GIF#1

ffmpegで作成したアニメーションgifを、画像として取り込みました。アニメーション表示されていると思います。背景画像は透過風にしていますが、実際は透過していません。

gif#1

GIF#2

convertで作成したアニメーションgifを、画像として取り込みました。
上記gif#1よりサイズが小さく作成されます。素材が単純なので画像の粗さは気にならないと思います。

gif#2

WEBP

webpアニメーションのリンクを埋め込んだ例です。note上でアニメーション表示されると思います。

以下、上記と同じwebpを画像として取り込んだ例です。
静止画として表示され、アニメーションされないと思います。

webpを画像として取り込んだ例

アニメーション画像の種類

今回テストしたアニメーション画像のフォーマットの種類は以下です。

GIF: Animated GIF

  • GIF（Graphics Interchange Format）

  • 古くからの規格で1990年ごろからアニメーションに対応

  • noteで画像として扱うことができる

  • 最大256色で透過に制限がある

  • アニメーションが粗くなりがち

  • すべてのブラウザ・ビューアでサポートされている

APNG: Animated PNG

  • PNG (Portable Network Graphics)

  • 今回のテストではファイルサイズが一番小さくなった

  • 外部サイトAPNGのリンクを埋め込んだが、note上ではアニメーションされないようである

  • 1677万色で、背景の透過処理が可能

  • アニメーションが滑らか

  • 2010年以降アニメーション拡張が普及し始めた

webp

  • "weppy" (Web Picture)

  • 米Googleが開発している画像フォーマット

  • noteでアニメーション使用する際には、外部サイトへのリンクとして表示する必要がある

  • 1677万色で背景の透過処理が可能

  • モバイル環境や広告バナーなどで使用機会が広がっている

  • アニメーションが滑らか

アニメーション作成ツール

上記のアニメーション画像は、解像度 1280x720の pngファイル約40枚 を使って、以下のツールを使って作成しました。

  1.  ffmpeg version 6.1.1-3ubuntu5

  2.  convert version: ImageMagick 6.9.12-98

プラットフォームは Ubuntu 24.04.2 LTS

gifは ffmpegと convert で2種類(gif#1, gif#2)を作成しました。
apngと webpは、 ffmepgを使って作成しました。
作成時のオプションは以下です

apng 

ffmpeg [-framerate 10 -i frame_%d.png -c:v apng -pix_fmt rgba -plays 0 -vf scale="$res":-1:flags=lanczos output.apng]
gif#1 

ffmpeg [-framerate 10 -i frame_%d.png -gifflags -transdiff -vf scale="$res":-1:flags=lanczos output.gif]
gif#2

convert [-delay 10 -loop 0 *.png -coalesce -layers Dispose -resize "$res"x output.gif]
webp 

ffmpeg [-framerate 10 -i frame_%d.png -vcodec libwebp -loop 0 -vf scale="$res":-1:flags=lanczos output.webp]

解像度は $res = resolution で調整できます。

出力画像の解像度 $res を 640 (640x360) としたときのアニメーション画像のサイズは以下のとおりになりました。


アニメーション画像のサイズ比較

apngのサイズはとてもコンパクトになりますが、noteでアニメーション表示されないのが残念です。
gifを作成する場合、ffmpegより convertで 作成するとサイズを小さくすることが出来ました。オプションの指定を変更すれば出力サイズは調整することができるかもしれませんが、今回は深堀りしませんでした。

まとめ

noteでアニメーション画像を使用する際は、やはり取り扱いがしやすいgifフォーマットを使うのが良さそうです。
gifを作成する際は、サイズをコンパクトにできるので convert を使うのが良さそうです。
透過を使用する必要がある場合や、アニメーションの滑らかさが必要になる場合は webpの使用を検討する必要があります。現状 noteで webpのアニメーション画像を使用するには、外部サイトを使用する必要があります。(今回はGoogleDrive)を使用しています。
apngのサイズはとてもコンパクトになり画質も良いので、noteでの将来の対応が期待されます。

いいなと思ったら応援しよう！