WebPは画像サイズを縮小できる画像形式としてブログ等で利用されます。このWebP形式でアニメーション再生できる画像ファイルの作成とブラウザで動作確認した際のメモです。
アニメーション画像形式のWebPの作成
アニメーション画像ファイルの素材には、iPhoneカメラで撮った写真画像から「iOS16の背景からの対象物の抜き出し機能」で切り出したPNG画像ファイルを５個使いました。
アニメーションWebPの作成には、「アニメ画像に変換する君」をMicrosoft Store (Windows用)からダウンロードして利用させていただきました。
GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。
https://ics.media/entry/12746/
(1) PNG画像ファイルを用意して、連番のファイル名をつけます。今回は5コマのPNG画像ファイルで試しましたが、PNG画像ファイルを増やせばより滑らかな動きになります。
ブログ用のアニメーションWebPファイルを作成するので、下記で設定しました。
- 用途
「Webページ用アニメーション」 - アニメーション設定
フレームレートは（FPS）を「1」、「無限ループ」にチェック - 画質設定
「WebPファイル出力」、「容量最適化」にチェック
(2) 5コマのPNG画像ファイルを「アニメ画像に変換する君」の右画面に一括ペーストすると、アニメーションが表示されて、仕上がり具合を事前確認できます。動きを見ながらフレームレートを調整します。
(3)「アニメ画像を保存する」をクリックしてPCに保存します。
「容量最適化」にチェックつけると、画像ファイルを圧縮して最適化したアニメーションwebpファイル（約110kB）ができます。チェックなしの場合は約1.2MBでした。オリジナルのPNGファイルは約360kB X 5コマです。
本サイトに掲載したアニメーションwebp画像からは圧縮による画質劣化は気にならないレベルでした。「容量最適化」にチェックして常用しています。
ブログサイト（WordPress + SWELL）で動作確認
本サイトは、WordPress + SWELLテーマで作成しています。webpでアニメーション表示できたSWELLテーマのブロックとWebブラウザについて動作確認しました。
webpでアニメーション表示できたSWELLのブロック
下記の内部リンクのブログカードのwebp画像は編集時点ではアニメーション表示していましたが、ページ更新後は300×225ピクセルの別ファイルに変換されておりアニメーションできませんでした、それ以外の投稿ページの画像リンクでは問題なく表示できました。
| # | SWELLのブロック | webpアニメーション動作 |
| 1 | 投稿ページ | 〇 |
| 2 | 記事一覧リスト ＋タブ切り替え設定 （トップページ） ・新着記事タブ ・人気記事タブ | 〇 |
| 3 | ウィジェット ＋共通サイドバー ＋[SWELL]新着記事 | 〇 |
| 4 | ブログカード (内部リンク) | ※画像表示のみ |
webpでアニメーション表示できたWebブラウザ
手持ちのPC、スマートフォンのブラウザで動作確認しました。最近のブラウザであればプラットフォームによらず閲覧できます。
| # | OS | ブラウザの バージョン | webp アニメーション 動作 |
| 1 | Windows 11 | Google Chrome 105.0.5195.127 | 〇 |
| 2 | Windows 11 | Microsoft Edge 105.0.1343.42 | 〇 |
| 3 | Android 13 | Google Chrome 105.0.5195.136 | 〇 |
| 4 | iOS 16.0 | Google Chrome 105.0.5195.129 | 〇 |
| 5 | iOS 16.0 | Safari 16.0 | 〇 |
| 6 | iOS 15.7 | Safari 15.6,2 | 〇 |