WordPressサイトの画像を軽量なAVIFに変換できるプラグイン「ShortPixel Image Optimizer」

サイト軽量化の鍵となる画像のフォーマット（拡張子）。

JPGやPNGのほか、WebPなどの軽量なものも登場していますが、最新かつ最も軽量な「AVIF」というフォーマットがあります。

そこで今回は、WordPressサイトの画像をAVIFに変換するプラグイン「ShortPixel Image Optimizer」をご紹介いたします。

AVIFとは

AVIFとは、次世代拡張子のひとつでWebPに続いて誕生しました。主な特徴は以下の通りです。

• WebPよりも軽量で高画質
• 可逆圧縮と非可逆圧縮の両方に対応
• JPGなら80%以上も圧縮可
• アニメーションに対応
• 透過処理が可能
• HDRカラーに対応（深度や色域の表現が豊か）

AVIFは、古いバージョンを除く、ほぼすべての主要ブラウザに対応しています。
>> 対応ブラウザ一覧

ShortPixel Image Optimizer の機能概要

ShortPixel Image Optimizerとは、WordPressサイト内の画像の拡張子ワンタッチでAVIFに変換できるプラグインです。サイトの軽量化に繋がります。

主な機能や仕様は次の通りです。

• 利用するにはAPIキーの取得が必要（メールアドレスの入力のみ）
• 圧縮強度を選べる（3段階から）
• 元画像のバックアップ&復元機能あり
• EXIFデータ（写真の撮影日時や場所などの情報）の削除機能
• 無料プランで変換できる枚数は100枚/月まで

サムネイルも含めて月に100枚ですので足りないケースがほとんどかと思いますが、有料プランを使う価値が十分あるプラグインです。

WebPに変換できるプラグインはこちらの記事でご紹介しています。このプラグインもPRO（有料）版でAVIFへ変換できるようです。

プラグインのインストール

管理画面から「ShortPixel Image Optimizer」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

ShortPixel Image Optimizer

プラグインのインストールにつきましてはこちらで詳しく解説しています。

ShortPixel Image Optimizerの使い方・設定方法

プラグインをインストールしたら、初期設定が必要ですので、こちらで解説いたします。

APIキーを取得する

まずは、ダッシュボードの設定 > ShortPixelよりプラグインの設定画面を開き、APIキーを取得します。APIキーは、メールアドレスを入力するだけで数秒で取得できます。

下記箇所にメールアドレスを入力して、規約同意のチェックボックスにチェックを入れます。

リクエストキーを押すと、即時APIキーが発行されます。

「APIキーは有効です」と表示されていればOKです。

ここで紐づけられたメールアドレスごとにクレジット（無料版では変換枚数100枚/月まで）が発行される仕組みのようです。

設定を変更する

続いて初期設定を行います。お好みで数箇所変更するだけでOKです。タブごとに説明いたします。

一般設定

一般設定タブでは、次の4箇所を確認します。

• 圧縮タイプ
• Thumbnail compression（サムネイルも圧縮対象に含む）
• バックアップ
• EXIF を削除（写真の撮影日時や場所などの情報の削除する）

基本的には初期値から変更不要ですが、圧縮タイプ（圧縮強度）による画質や容量の違いは確認しておいた方がいいです。

プラグインの推奨設定は、最も圧縮率の高い「不可逆な」と書かれている左端の設定ですが、画質か軽量化のどちらを優先するかによって決めましょう。後述する弊社検証時の比較を参考にしてみてください。

上級者向け

上級者向けのタブでは、次の3箇所を確認します。

• Create AVIF versions of the images. Each image/thumbnail will use an additional credit.
• Deliver the next generation versions of the images in the front-end:
  • ページコードの変更なしで（.htaccess経由）

今回は、AVIFに変換したいので、「Create AVIF versions of the images. Each image/thumbnail will use an additional credit.」を有効化します。

また、サイトのフロントにAVIFが出力されるように「Deliver the next generation versions of the images in the front-end:」も有効化します。下部に展開する選択肢では「 ページコードの変更なしで（.htaccess経由）」を選んでおきましょう。

次のように緑色の文字で「CAN」と表示されていれば、問題ありません。

その他の設定は、初期値のままでも問題ありません。

最後に「変更を保存」を押して設定完了です。

変換を開始する

初期設定が終わったら、変換してみましょう。変換方法は2つあります。

個別変換

メディア内にアップされている画像ごとに「Optimize Now」というボタンが出現するので、そこからワンタッチで個別変換可能です。

先ほどの設定で決めた圧縮タイプで変換されます。

上記は最も強力な「不可逆な」タイプで圧縮した際の例で、右側の「≡」からいつでも元画像に復元可能です。元画像のサイズや色数にもよりますが、80%以上の圧縮率を確認できます。

一括変換

一括変換は、設定 > ShortPixelに戻り、最下部の「保存して一括処理に進む」を押せばOKです。

画面を進んでいくと、何枚の画像を変換するのか、クレジットがいくつ残っているのかが表示されます。

問題なければ、最下部の「Start Bulk Optimization」を押して一括変換をスタートします。この変換枚数は、オプションによって変わります。検証時などは、上級者向けのタブにある「サムネイルサイズを除外」を使うといいかもしれません。クレジットを節約できます。

圧縮タイプ別の画像の比較

ShortPixel Image Optimizerには、圧縮タイプ（圧縮強度）が3種あるので、画質と容量の違いを比較していきます。すべてオリジナル画像（136KB）を基準に比較しています。

元からそこまで大きくない画像であれば、どの圧縮タイプでも差は少ないかもしれないですが、サイトのヘッダーなどに設置する大きな画像などの場合、差が目立ってきます。1740px幅の画像で検証時の圧縮率も参考に残しておきます。

不可逆な（Lossy）：強

• 790px幅画像（上記例）の圧縮率：136KB → 25KB
• 1740px幅画像の圧縮率：469 KB→ 68KB

画質にこだわる場合は、かなり差が気になるかもしれません。

光沢（Glossy）：中

• 790px幅画像（上記例）の圧縮率：136KB → 30KB
• 1740px幅画像の圧縮率：469 KB→ 82KB

不可逆と比べると、滲み具合がややましです。

可逆圧縮（Lossless）：弱

• 790px幅画像（上記例）の圧縮率：136KB → 32KB
• 1740px幅画像の圧縮率：469 KB→ 88KB

完全に同じではありませんが、画質の劣化は比較的ましです。

どのタイプでも70%以上も軽量化できていますので、可逆圧縮（Lossless）でも十分かもしれません。求める画質と容量を天秤にかけて圧縮タイプを変更してみてください。色数や表示サイズによって見え方が変わるので、圧縮前後で比較して判断するのが一番です。

有料プランについて

ShortPixel Image Optimizerの無料プランでは、変換できる上限は100枚/月です。すぐに上限に達してしまう場合は、有料プランもありです。2024年4月現在は、サブスク型と買い切り型が用意されているようです。

サブスク型

月額約1,500円程度。年間支払いで15,000円程度です。
>> 公式ページ

買い切り型

一番安いので約3,000円からなので、サブスクで短期的に試すのがいいかもしれないですね。
>> 公式ページ

まとめ

WordPressサイトの画像を軽量なAVIFに変換できるプラグイン「ShortPixel Image Optimizer」をご紹介いたしました。

無料で使える変換枚数は少ないですが、有料プランもお手頃で、画像の軽量化には強くお勧めできます。導入と画像変換、バックアップから復元まで簡単にできるので、ぜひチェックしてみてください。

画像フォーマットの関連記事