2019-05-31
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 ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム<pre>/asset/_testTransform4/20190526_800_1198.jpg ↓ /<$ボリューム#####replaceparse26#####gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg</pre>gt;/<$TransFormのハンドル#####replaceparse26#####gt;/<$元画像のファイル名#####replaceparse26#####gt;.jpg
あとはこのリサイズした画像がどのタイミングで生成されているのか、を確認しておく必要はありそう。