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

cloudinary
スポンサーリンク

はじめに

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 namebonyou不可
resource typeimagetype と合わせて省略可
typeuploadresource type と合わせて省略可
signatures–SMawThWt–セキュリティ設定でStrictをEnabledにしていて、transform指定がある場合は省略不可
(signatureがない場合は参照できない)
transformf_auto,q_auto可(変換不要な場合)
versionv1594216596
folderblog/236不可
public idfeste不可

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が生成できます

第1パラメータにリソースのパス、第2パラメータにオプションを指定します
前述の短縮された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" が生成されます

おわりに

変換後の画像を見比べてみます
順に元の画像、q_auto のみ、f_auto のみ、f_auto,q_auto の変換した画像を並べます

変換なし
q_auto
f_auto
f_auto,q_auto

ChromeのDevToolsでレスポンスヘッダのcontent-lengthを確認したところ、以下の通りでした

変換content-length
なし1843307
q_auto617746
f_auto115146
f_auto,q_auto115146

見た目にはあまり違いがわからなかったのですが、かなりサイズが抑えられていました
(f_auto と f_auto,q_auto が同じサイズだった理由は分かりませんでした)

f_auto,q_auto の変換はデフォルトで使用したいと思える結果でした

コメント

タイトルとURLをコピーしました