画像のフォーマットなどを色々調整するとしたら 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 環境で試した。
プラグインを追加・インストールする
まずはプラグインの追加&インストールをする
これでインストールは完了。
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 に変換された画像も確認することができた。