WebP画像を自動生成する「WebPfy for Movable Type」

このブログは「Movable Type Advent Calendar 2021」18日目の記事です。

最近のcherry-pickでは、Core Web VitalsのSEO評価への恩恵も有り、表示速度改善のご相談いただく機会が増えてきました。

その中でも画像の軽量化が比較的アクションしやすいところなのですが、WebP形式に変換する機能を提供するプラグイン「WebPfy」を開発したのでご紹介させていただきます。

このコーポレートサイトのサービス・製品紹介ページでも先行利用しており、WebP画像に自動変換して表示しております。

WebP画像とは

ご存じない方は、「(アレクサ|OK Google|Hey Siri)、WebP画像ってなに？」と、スマホに向かって唱えてみましょう。(あいうえお順です)

魔法のような「WebPfy(ウェッピファイ)」

もちろんソフトウェアですが、名前はなんとなく魔法っぽくしてみました。「-fy」は動詞に使われる接尾詞なので、動詞的な名称にしています。

WebPfyの主な機能

具体的には次のような機能を実現します。

WebP自動変換...管理画面からアップロードした画像をWebPに自動変換し、アセットとして登録されます。
一括WebP変換...既存MTへの導入でも、過去の画像を一括でWebP形式に変換できます。
変換元画像呼び出し...WebP画像の変換元のアセットを呼び出しができます。
変換後WebP画像呼び出し...記事、ウェブページ、コンテンツデータに登録済みの画像から、変換したWebP画像をテンプレートで呼び出せます。
テンプレート改修でWebP画像生成...MTタグを使用すると再構築時に登録アセットからWebP画像を生成し、そのWebPアセットを呼び出すことができます。
MTクラウド対応...MTクラウドでも利用可能です。
Uploader連携(予定)...自動ファイル同期機能を提供するUploaderの、おまかせ予約によりコンテンツに直接関連付けられてないWebP画像も同期が可能です。

ポイントをかいつまんで、使い方をご説明していきます。

WebPfyの使い方

サーバ環境構築

ご利用いただくにはcwebp+ImageMagick、またはGraphicsMagickのいずれかで、かつWebP画像に対応したバージョンがインストールされている必要があります。MTでは他にも使用可能な画像ライブラリがありますが、2021年12月現在ではCPANモジュールの非対応などもあり機能を実現できませんでした。

一番かんたんなのはMTクラウドでご利用いただくことです。MTクラウド以外の場合は、サーバ環境を整えていただく必要があります。

それができれば、プラグインをインストールするだけでご利用いただけます。

テンプレートの画像出力箇所を改修

前述の再構築と同時にWebP画像を生成するMTタグをテンプレートに追記いただくことで、すぐにでもWebPをご利用いただけます。

<mt:ContentField content_field="ビジュアル画像alt"><mt:ContentFieldValue setvar="alt" /></mt:ContentField>
<mt:ContentField content_field="ビジュアル画像">
<picture>
  <mt:WebPAsset force="1">
  <source srcset="<mt:AssetURL />" size="560px" type="image/webp">
  </mt:WebPAsset>
  <img src="<mt:AssetThumbnailURL width="560" />" width="560" height="560" alt="<mt:Var name="alt" remove_html="1" />">
</picture>
</mt:ContentField>

登録画像がWebPの場合は親画像を呼び出して、非対応ブラウザ対応も可能です。

<mt:ContentField content_field="ビジュアル画像alt"><mt:ContentFieldValue setvar="alt" /></mt:ContentField>
<mt:ContentField content_field="ビジュアル画像">
<picture>
  <mt:WebPAsset force="1">
  <source srcset="<mt:AssetURL />" size="560px" type="image/webp">
  </mt:WebPAsset>
  <mt:IsWebP>
    <mt:WebPParentAsset>
      <img src="<mt:AssetThumbnailURL width="560" />" width="560" height="560" alt="<mt:Var name="alt" remove_html="1" />">
    </mt:WebPParentAsset>
  <mt:Else>
      <img src="<mt:AssetThumbnailURL width="560" />" width="560" height="560" alt="<mt:Var name="alt" remove_html="1" />">
  </mt:IsWebP>
</picture>
</mt:ContentField>

テンプレートを改修しないWebP画像の使い方

先の説明ではhtmlソースの改修を前提としたご説明になりましたが、サイトによっては例えばmod_rewriteなどで対応ブラウザ向けにリダイレクトをかけるなどあるので、対応方針はサイトごとに検討が必要です。

そういう場合、テンプレート改修はせず、WebP画像の生成ができればよいというケースもあるので、一括置換機能でWebP画像の生成機能のみでご対応いただけます。

設定方法は、他サイトでも説明が多くあるので参考ください。マニュアルには設定例なども記載してご提供する予定です。

WebPfyは来年発売予定！先行導入をご希望の方、募集中

ご紹介したWebPfyは遅くとも年度内の発売を予定しています！試用期間60日あるため、購入前にたっぷりお試しいただけます。

ライセンスの販売日の確約はできませんが、先行導入をご希望の方は、「WebPfy先行導入希望」と記載の上、下記よりお問い合わせください。

お問い合わせ

cherry-pick BLOG