Craft CMS の画像の変形を試す（確認用画像多め） #craftcms

Craft CMS の画像の Transform をちゃんと試していなかったので試してみる。

日本語ドキュメントを読めばだいたいわかると思うのだけど、自分で設定していなかったので。

画像の変形 | Craft 3 ドキュメント
https://docs.craftcms.com/v3/j…

処理のイメージとしては、設定のところのイメージがわかりやすい気はする。

切り抜きはイメージがすぐわくけど、フィットとストレッチがちょっと判断難しいところもありそうなので。

こんなかんじで画像を挿入するときにあらかじめ用意したtransformを選んで画像を挿入していく。

サンプルとしてぱくたその画像を使わせてもらいました。

ガスの合間から見える白馬岳と白馬大雪渓｜無料の写真素材はフリー素材のぱくたそ
https://www.pakutaso.com/20181…
登山道から見上げるウィンディキャニオンの巨岩（ニュージーランド）｜無料の写真素材はフリー素材のぱくたそ
https://www.pakutaso.com/20190…

画像のアップロードサイズの設定をしておかないと大きな画像はアップできない場合もあるので、これは設定を確認しておく。

maxUploadFileSize
https://docs.craftcms.com/v3/j…

縦、横の画像を変形して様子をみてみる。

サイズ：6000x4000

そのまま選択

幅2000pxにフィットで変形した物を選択

幅1000pxにストレッチで変形した物を選択

1600x1200でフィット

400-300にストレッチで変形

400-300にフィットで変形

画像パス

画像サイズ

ファイルサイズ

そのまま選択

/asset/20190526_6000_4000.jpg

6000x4000

12.679MB

幅2000pxにフィット

/asset/_testTransform/20190526_6000_4000.jpg

2000x1333

178KB

幅1000pxにストレッチ

/_testTransform2/20190526_6000_4000.jpg

1000x667

52.3KB

1600x1200でフィット

/asset/_testTransform3/20190526_6000_4000.jpg

1600x1067

203KB

400x300でストレッチ

/asset/_testTransform4/20190526_6000_4000.jpg

400x300

12KB

400x300でフィット

/asset/_testTransform5/20190526_6000_4000.jpg

400x267

10.9KB

大きい横画像については基本的にはどれでも問題なさそう。

サイズ：800x533

そのまま選択

幅2000pxにフィットで変形した物を選択

幅1000pxにストレッチで変形した物を選択

1600x1200でフィット

400-300にストレッチで変形

400-300にフィットで変形

画像パス

画像サイズ

ファイルサイズ

そのまま選択

/asset/20190526_800_533.jpg

800x533

83KB

幅2000pxにフィット

/asset/_testTransform/20190526_800_533.jpg

2000x1333

157KB

幅1000pxにストレッチ

/asset/_testTransform2/20190526_800_533.jpg

1000x667

50.7KB

1600x1200でフィット

/asset/_testTransform3/20190526_800_533.jpg

1600x1066

176KB

400x300でストレッチ

/asset/_testTransform4/20190526_800_533.jpg

400x300

12KB

400x300でフィット

/asset/_testTransform5/20190526_800_533.jpg

400x267

10.9KB

小さめの画像についてはそもそもリサイズする必要はないかもしれないけれども、大きいtransformが用意されてるとそれが適用されてしまうので、そこは運用で気をつける必要がありそう。

基本的にはフィットでtransformは用意しておくのが良さそう。

サイズ：4016x6016

そのまま選択

幅2000pxにフィットで変形した物を選択

幅1000pxにストレッチで変形した物を選択

1600x1200でフィット

400-300にストレッチで変形

400-300にフィットで変形

画像パス

画像サイズ

ファイルサイズ

そのまま選択

/asset/20190526_4016_6016.jpg

4016x6016

18.317MB

幅2000pxにフィット

/asset/_testTransform/20190526_4016_6016.jpg

2000x2996

949KB

幅1000pxにストレッチ

/asset/_testTransform2/20190526_4016_6016.jpg

1000x1499

258KB

1600x1200でフィット

/asset/_testTransform3/20190526_4016_6016.jpg

801x1200

280KB

400x300でストレッチ

/asset/_testTransform4/20190526_4016_6016.jpg

400x300

23.5KB

400x300でフィット

/asset/_testTransform5/20190526_4016_6016.jpg

200x300

12.9KB

縦位置の画像も基本的には大きいものは問題なさそう。

400x300のストレッチがどんな感じの処理をしているのかちょっとわからないけど、これを考えるとフィットで用意しておくのがよさそう。

サイズ：800x1198

そのまま選択

幅2000pxにフィットで変形した物を選択

幅1000pxにストレッチで変形した物を選択

1600x1200でフィット

400-300にストレッチで変形

400-300にフィットで変形

画像パス

画像サイズ

ファイルサイズ

そのまま選択

/asset/20190526_800_1198.jpg

800x1198

516KB

幅2000pxにフィット

/asset/_testTransform/20190526_800_1198.jpg

2000x2995

753KB

幅1000pxにストレッチ

/asset/_testTransform2/20190526_800_1198.jpg

1000x1498

228KB

1600x1200でフィット

/asset/_testTransform3/20190526_800_1198.jpg

801x1200

248KB

400x300でストレッチ

/asset/_testTransform4/20190526_800_1198.jpg

400x300

23.5KB

400x300でフィット

/asset/_testTransform5/20190526_800_1198.jpg

200x300

12.5KB

縦位置の小さい画像も transform を適用するのであればフィットの方がよいのかな。

---

ストレッチの使い方についてはサムネイルとかの使い方で決まったエリアにぴったりした画像をつかいたいときに使うのがいいのかな。
今度 @BUN にきいてみよう。

Transform の hundle が画像のURLにも使われるので、そこは気をつけておく必要がありそう。

/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム

/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム
/asset/_testTransform4/20190526_800_1198.jpg
↓
/<$ボリューム#####replaceparse26#####gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg

gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg

あとはこのリサイズした画像がどのタイミングで生成されているのか、を確認しておく必要はありそう。