WebP形式のアニメーション画像ファイルの作成と動作確認(WordPress + SWELL)

WebPは画像サイズを縮小できる画像形式としてブログ等で利用されます。このWebP形式でアニメーション再生できる画像ファイルの作成とブラウザで動作確認した際のメモです。

目次

アニメーション画像形式のWebPの作成

アニメーションWebPの作成には、「アニメ画像に変換する君」をMicrosoft Store (Windows用)からダウンロードして利用させていただきました。

アニメ画像に変換する君

GIF画像に変わり得る新世代のアニメーション画像形式として、APNG(エーピング)とWebP(ウェッピー)があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。

https://ics.media/entry/12746/

(1) 5コマのPNG画像ファイルを用意して、連番のファイル名をつけます。

ブログ用のアニメーションWebPファイルを作成するので、下記で設定しました。
        用途:「Webページ用アニメーション」
 アニメーション設定:フレームレートは(FPS)を「1」、「無限ループ」にチェック
      画質設定:「WebPファイル出力」、「容量最適化」にチェック

(2) 5コマのPNG画像ファイルを「アニメ画像に変換する君」の右画面に一括ペーストすると、アニメーションが表示されて、仕上がり具合を事前確認できます。動きを見ながらフレームレートを調整します。

(3)「アニメ画像を保存する」をクリックしてPCに保存します。

アニメ画像に変換する君
アニメ画像に変換する君

「容量最適化」にチェックつけると、画像ファイルを圧縮して最適化したアニメーションwebpファイル(約110kB)ができます。チェックなしの場合は約1.2MBでした。オリジナルのPNGファイルは約360kB X 5コマです。

本サイトに掲載したアニメーションwebp画像からは圧縮による画質劣化は気にならないレベルでした。「容量最適化」にチェックして常用しています。

圧縮して最適化したのアニメーションwebp
「容量最適化」にチェックしたアニメーションwebp(約110kB)
圧縮無しのアニメーションwebp
チェックなしで作成したアニメーションwebp(約1.2MB)

ブログサイト(WordPress + SWELL)で動作確認

本サイトは、WordPress + SWELLテーマで作成しています。webpでアニメーション表示できたSWELLテーマのブロックとWebブラウザについて動作確認しました。

webpでアニメーション表示できたSWELLのブロック

下記の内部リンクのブログカードのwebp画像は編集時点ではアニメーション表示していましたが、ページ更新後は300×225ピクセルの別ファイルに変換されておりアニメーションできませんでした、それ以外の投稿ページの画像リンクでは問題なく表示できました。

あわせて読みたい
WebP形式のアニメーション画像ファイルの作成と動作確認(WordPress + SWELL) WebPは画像サイズを縮小できる画像形式としてブログ等で利用されます。このWebP形式でアニメーション再生できる画像ファイルの作成とブラウザで動作確認した際のメモで...
#SWELLブロックwebpアニメーション動作
1投稿ページ 
2記事一覧リスト
 +タブ切り替え設定
  (トップページ)
   ・新着記事タブ
   人気記事タブ
3ウィジェット
 +共通サイドバー
  +[SWELL]新着記事
4内部リンクのブログカード※画像表示のみ

webpでアニメーション表示できたWebブラウザ

手持ちのPC、スマートフォンのブラウザで動作確認しました。最近のブラウザであればプラットフォームによらず閲覧できます。

#OSブラウザの
バージョン
webp
アニメーション動作
1Windows 11 Google Chrome
105.0.5195.127
2Windows 11 Microsoft Edge
105.0.1343.42
3Android 13Google Chrome
105.0.5195.136
4iOS 16.0Google Chrome
105.0.5195.129
5iOS 16.0Safari
16.0
6iOS 15.7Safari
15.6,2
よかったらシェアしてね!
  • URLをコピーしました!
目次