2022-07-26

Craft CMS の Imager X プラグインで画像を WebP に変換する #craftcms

画像のフォーマットなどを色々調整するとしたら Craft CMS の場合は Imager X か ImageOptimize を使うのが良さそう。

Imager X
https://plugins.craftcms.com/i...
ImageOptimize
https://plugins.craftcms.com/i...

どちらのプラグインも有名そうだけどちゃんと使ったことが無かったので、とりあえず Imager X を触ってみた。

Craft 3 環境で CLI インストールしようとしたらなんかエラーになったので、 Craft 4 環境で試した。

プラグインを追加・インストールする

まずはプラグインの追加＆インストールをする

composer require spacecatninja/imager-x && php craft plugin/install imager-x

これでインストールは完了。

webp用の設定

config/imager-x.php ファイルを用意する。
ドキュメントにあるように設定を追加する。

WebP, AVIF, and JPEG XL support | Imager X 4.0
https://imager-x.spacecat.ninj...
<?php
return [
    'customEncoders' => [
	    'webp' => [
	        'path' => '/home/hogehoge/bin/cwebp',
	        'options' => [
	            'quality' => 80,
	            'effort' => 4,
	        ],
	        'paramsString' => '-q {quality} -m {effort} {src} -o {dest}'
	    ]
    ]
];

mixhost に cwebp をインストールするのは過去試していた。

GraphQLで確認

今回は GraphQLで使ってみたかったので、とりあえず GraphiQL で試してみる。

Query

query{
  entries(section:"testStructure"){
    title
    ... on testStructure_default_Entry{
      testAsset{
      	id
        transformDef: url @imagerTransform (format: "jpg"),
        transformWebp: url @imagerTransform (format: "webp")
      }
    }
  }
}

レスポンス

{
  "data": {
    "entries": [
      {
        "title": "aaa",
        "testAsset": [
          {
            "id": "18",
            "transformDef": "/imager/testvolume/18/redstyakiA029_TP_V_d41d8cd98f00b204e9800998ecf8427e.jpg",
            "transformWebp": "/imager/testvolume/18/redstyakiA029_TP_V_2615addf7111d83624b7a7a5f3466fb3.webp"
          }
        ]
      }
    ]
  }
}

とりあえずこれで WebP に変換された画像も確認することができた。