PHOTOSHOPでWEBPアニメーション作成方法 | 株式会社マージェリック

WEBPショップとは

https://developers.google.com/speed/webp?hl=ja

WebP は、最新の画像形式で、ウェブ上の画像に対して優れたロスレスかつロスレスな圧縮を実現します。WebP を使用すると、ウェブマスターやウェブ デベロッパーは、小さくてリッチな画像を作成してウェブの高速化を実現できます。

WebP のロスレス画像については、PNG と比較して 26% 縮小されています。WebP のロッシー画像は、同等の SSIM 品質インデックスで、同等の JPEG 画像より 25 ～ 34% 小さくなります。

可逆圧縮 WebP では、透明度（アルファ チャンネルとも呼ばれます）が発生します。ただし、費用はわずか 22% の追加になります。ロッシー RGB 圧縮が許容される場合は、ロッシー WebP も透明度をサポートします。通常、PNG と比較してファイルサイズは 3 倍小さくなります。

アニメーション WebP 画像では、可逆、可逆、透明性がすべてサポートされており、GIF や APNG よりもサイズを小さくできます。

Macでアニメーション登録方法

大前提として、Photoshop2022/2023の最新バージョンで「別名で保存」から、フォーマット「WEBP」で保存が可能。

ただし、「アニメーション」での保存には、Photoshopのプラグイン「webpshop」を入れる必要がある。

Photoshopに「webpshop」のプラグインを入れる
1. 下記URLクリックでダウンロード（Macのみ）
2. https://github.com/webmproject/WebPShop/releases/download/v0.4.2/WebPShop_0_4_2_Mac_Universal.zip
3. アプリケーション > Photoshop2023 > Plug-ins > ダウンロードファイル（WebPShop.plugin）を入れる
4. Photoshopを再起動
5. 適当な画像を用意し、名前を付けて保存（command+shift+S）
6. フォーマットで、「WebPShop」を選択し、保存
7. エラーが出たら、「システム設定」→「プライバシーとセキュリティ」
  - 「WebPShop.pluginは開発元を確認できないため、使用がブロックされました。」の横の「ここのまま許可」をクリック
Photoshopでアニメーションを作成
左下「ビデオをレンダリング」で画像書き出し
- プルダウン「Photoshop画像シーケンス」、形式:「PNG」
- フレームレート「10」くらい（フレームレート：1秒間で表示される画像枚数）
- レンダリングオプションのプルダウン「アルファチャンネル: ストレート- マットなし」
- チェックボックス「新規サブフォルダを作成」にチェックを入れ、「レンダリング」
書き出された画像ファイルの一括名称変更
- Finder内で画像を全選択 > 右クリックで「名称変更…」を選択
- プルダウン「テキストを置き換える」
- 検索文字列：「.png」
- 置換文字列：「 (120 ms).png」※10ms→0.01秒
Photoshopで、レイヤーの秒数指定でアニメーションを作成
- 画像を1枚だけ、Photoshopで開く
- 同じドキュメント内で、すべての画像を開く（レイヤーで分かれている状態）
- 最初に開いた画像（背景）を削除
- 全レイヤーを選択 > 右クリックで「ラスタライズ」する
- レイヤー名が、「Frame001 (120 ms)」のような形になっていることを確認する
別名で保存 > プルダウン「WebPShop」を選択
- Qualityを調整（80くらいが無難）
「保存」して、アニメーションになっていることを確認