CloudinaryのURLと画像変換について解説（構成要素、パラメータなど）

はじめに
1. 使用する画像
Cloudinary の URL について
おわりに

はじめに

Cloudinaryについて、調べたこと、試したことのメモになります
間違っていたり、より良いアプローチがあったり、いろいろと至らない部分も多々あるかと思います

今回は、PHPでの例をあげつつ、CloudinaryのURLについて書いていきます
Cloudinary の PHP SDK の設定については以下を参照ください

使用する画像

フェステ（Blue Protocol）の画像を使って説明していきたいと思います
1920×1080, 1.8 MB PNG

Cloudinary の URL について

基本構成

メディアライブラリから、無変換の画像URLを取得（Copy URL）をした際、以下の形式で取得されます

https://res.cloudinary.com/bonyou/image/upload/v1594216596/blog/236/feste.png

Editメニューから次のように変換してみます
・Format → Auto を選択、No Extension を選択
・Quality → Auto を選択

以下のURLとなりました

https://res.cloudinary.com/bonyou/image/upload/s--SMawThWt--/f_auto,q_auto/v1594216596/blog/236/feste

https://res.cloudinary.com/ 以降を構成するパラメータは次のようになっていることが分かります

パラメータ	例	省略
cloud name	bonyou	不可
resource type	image	type と合わせて省略可
type	upload	resource type と合わせて省略可
signature	s–SMawThWt–	セキュリティ設定でStrictをEnabledにしていて、transform指定がある場合は省略不可（signatureがない場合は参照できない）
transform	f_auto,q_auto	可（変換不要な場合）
version	v1594216596	可
folder	blog/236	不可
public id	feste	不可

URLは短縮できる

メディアライブラリで取得できるURLですが、いくつかのパラメータは省略が可能です

https://res.cloudinary.com/bonyou/image/upload/v1594216596/blog/236/feste.png
https://res.cloudinary.com/bonyou/image/upload/blog/236/feste.png
https://res.cloudinary.com/bonyou/v1594216596/blog/236/feste.png
https://res.cloudinary.com/bonyou/blog/236/feste.png

これらは、すべて同じように表示されます

PHP ライブラリを使ったURLの生成

cloudinary_url 関数（Helper.phpのrequireが必要）を使うことで、リソースのURLが生成できます

第１パラメータにリソースのパス、第２パラメータにオプションを指定します
前述の短縮されたURLを生成する場合は次のようにします

cloudinary_url(
    'blog/236/feste.png',
    array(
        'force_version' => false,  // version 部分を省略
        'use_root_path' => true,   // image/upload 部分を省略
    )
);

// "http://res.cloudinary.com/bonyou/blog/236/feste.png" が生成されます

変換とsignatureを含めた場合は次のようになります

cloudinary_url(
    'blog/236/feste',
    array(
        'force_version' => false,
        'use_root_path' => true,
        'sign_url' => true,       // signatureを付ける
        'fetch_format' => 'auto', // フォーマット:auto
        'quality' => 'auto',      // 品質:auto
    )
);

// "https://res.cloudinary.com/bonyou/s--G3wU-dFj--/f_auto,q_auto/blog/236/feste" が生成されます