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.jpg6000x400012.679MB
幅2000pxにフィット/asset/_testTransform/20190526_6000_4000.jpg2000x1333178KB
幅1000pxにストレッチ/_testTransform2/20190526_6000_4000.jpg1000x66752.3KB
1600x1200でフィット/asset/_testTransform3/20190526_6000_4000.jpg1600x1067203KB
400x300でストレッチ/asset/_testTransform4/20190526_6000_4000.jpg400x30012KB
400x300でフィット/asset/_testTransform5/20190526_6000_4000.jpg400x26710.9KB

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

サイズ:800x533

そのまま選択

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

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

1600x1200でフィット

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

400-300にフィットで変形

画像パス画像サイズファイルサイズ
そのまま選択/asset/20190526_800_533.jpg800x53383KB
幅2000pxにフィット/asset/_testTransform/20190526_800_533.jpg2000x1333157KB
幅1000pxにストレッチ/asset/_testTransform2/20190526_800_533.jpg1000x66750.7KB
1600x1200でフィット/asset/_testTransform3/20190526_800_533.jpg1600x1066176KB
400x300でストレッチ/asset/_testTransform4/20190526_800_533.jpg400x30012KB
400x300でフィット/asset/_testTransform5/20190526_800_533.jpg400x26710.9KB

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

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

サイズ:4016x6016

そのまま選択

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

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

1600x1200でフィット

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

400-300にフィットで変形

画像パス画像サイズファイルサイズ
そのまま選択/asset/20190526_4016_6016.jpg4016x601618.317MB
幅2000pxにフィット/asset/_testTransform/20190526_4016_6016.jpg2000x2996949KB
幅1000pxにストレッチ/asset/_testTransform2/20190526_4016_6016.jpg1000x1499258KB
1600x1200でフィット/asset/_testTransform3/20190526_4016_6016.jpg801x1200280KB
400x300でストレッチ/asset/_testTransform4/20190526_4016_6016.jpg400x30023.5KB
400x300でフィット/asset/_testTransform5/20190526_4016_6016.jpg200x30012.9KB

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

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

サイズ:800x1198

そのまま選択

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

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

1600x1200でフィット

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

400-300にフィットで変形

画像パス画像サイズファイルサイズ
そのまま選択/asset/20190526_800_1198.jpg800x1198516KB
幅2000pxにフィット/asset/_testTransform/20190526_800_1198.jpg2000x2995753KB
幅1000pxにストレッチ/asset/_testTransform2/20190526_800_1198.jpg1000x1498228KB
1600x1200でフィット/asset/_testTransform3/20190526_800_1198.jpg801x1200248KB
400x300でストレッチ/asset/_testTransform4/20190526_800_1198.jpg400x30023.5KB
400x300でフィット/asset/_testTransform5/20190526_800_1198.jpg200x30012.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

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