Cloudinaryの画像変換パラメータまとめ 〜 リサイズと最適化

こんにちは！東京から伊藤です！

明日のCloudinaryハンズオンセミナーを控え、今回はCloudinaryで使用する配信URLとその画像変換パラメータについて説明します。基本的にはCloudinaryのドキュメントに沿ってまとめていきます。

画像変換パラメータのまとめ記事の一覧はこちら：

• 【今回】リサイズと最適化
• 形・スタイル
• オーバーレイ・アンダーレイ
• エフェクト

Cloudinaryの配信URL

Cloudinaryを使って画像や動画、その他アセットの配信ができますが、それらはHTTP/SのURLを使うことでCDNを経由して配信されます。そして、そのURL内でパラメータを指定することによって、画像や動画の動的な変換を行います。

その配信URLは、下記のように構成されています。

• https://res.cloudinary.com/[クラウド名]/[リソースタイプ]/[タイプ]/[署名]/[変換パラメータ]/[バージョン]/[パブリックID].[フォーマット]
  • [クラウド名]: Cloudinaryアカウント名
  • [リソースタイプ] (※任意): image(デフォルト)、raw、videoのいずれか
  • [タイプ] (※任意): upload(デフォルト)、private、authenticated、fetch、facebook、youtubeなど（詳細はDelivery types）
  • [署名] (任意): 署名付きURLの場合に/s--SIGNATURE--/形式で指定（詳細はSigned delivery URLs）
  • [変換パラメータ] (任意): カンマ区切りで指定（何も指定しないとオリジナルのファイルが配信される）
  • [バージョン] (任意): ファイルをバージョン管理する場合のバージョン指定で、デフォルトではvにアップロード時間のUNIXタイムスタンプの数字が続く（ストレージのファイルを更新しても、同じURLパスでアクセスすると明示的にCDNキャッシュを消さない限り古い状態のファイルが表示されるため、ファイル更新時にURLパスを変更するためにバージョンを含める）
  • [パブリックID]: アカウント内で一意の名前（ファイル名、またはアップロード時にCloudinaryによるランダムな文字列付与）で、フォルダ階層下にある場合はスラッシュ区切りでパスも含む
  • [フォーマット] (任意): ファイルの拡張子（オリジナルからフォーマットを変更しない場合は、省略可能）

※[リソースタイプ]と[タイプ]は、こちらのブログ内でも紹介されているルートパスURLという機能で、image/uploadの場合にのみ省略することができます。

[変換パラメータ]は、画像を変換し、さらにそこから変換、のように組み合わせることができます。この場合にはスラッシュ区切りで繋げます。例えば、 c_fill,h_400/l_logo,c_scale,h_100 では元の画像を高さ400へ変換し、さらにロゴを高さ100としてオーバーレイで組み合わせます。

画像の変換パラメータ

ここからは、[変換パラメータ]内で指定する画像の変換オプションについて説明します。

• 最適化
  • フォーマット
  • 品質（圧縮）
• リサイズ
  • 幅・高さサイズ
  • リサイズ・切り抜きモード
  • オプション: gravity
  • オプション: XY座標
  • オプション: background

最適化

フォーマット

ファイルを適切なフォーマットに変更することによりサイズを小さくすることが期待できます。特に、f_autoではブラウザに応じた適切なフォーマット選択が行われます。

■最適フォーマット選択: f_auto

f_autoを指定すると、圧縮が見込める際に対応ブラウザで自動的にフォーマット変換されます。現状、Chromeの場合はWebP、IEの場合はJPEG-XRが選択される可能性があります。

実際の使用例とこの機能のすごさはこちらのブログから確認できます。

■特定フォーマットへの変換

画像や動画を特定のフォーマットへ変換するには、URL末尾の[フォーマット]で指定するだけです。サポートされる画像フォーマットと動画フォーマットはドキュメントを参照してください。

例えば、[パブリックID]が "sample" のjpgファイル（またはアップロードしたファイル名が "sample.jpg")をGIFに変換して配信するには、下記のように末尾の拡張子を .gifに指定するだけです。

• 元のjpgファイル
  • https://res.cloudinary.com/demo/image/upload/sample.jpg
• 変換するgifファイル
  • https://res.cloudinary.com/demo/image/upload/sample.gif

■特定フォーマットへの変換(fetchの場合)

fetch を使って外部のURLから取り込む場合には、先の方法ではいけません。この場合は、変換パラメータ内にf_で拡張子を指定します。以下の例ではjpgをpngに変換しています。

https://res.cloudinary.com/demo/image/fetch/w_400,f_png/https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg

品質（圧縮）

画像の解像度とファイルサイズはトレードオフですが、適切な解像度にまで圧縮しても視覚的な見栄えはそんなに変わらないケースがあり、そのレベルを指定することができます。

各パラメータを指定したプレビューは、ドキュメントから確認してみてください。

■最適品質選択: q_auto

q_autoを指定すると、画像の内容と閲覧ブラウザに応じて最適な圧縮レベルをCloudinaryが判別して配信します。追加で:に続けて以下のようなオプションを付与できます。なお、autoのデフォルトはq_auto:goodで、ユーザが対応ブラウザ(現在ChromeとOpera)でデータ節約モードをONにしている場合、q_auto:echoが選択されます。

■特定圧縮レベルへの変換

q_に続けて1(最低)から100(最高品質)で圧縮レベルを指定します。なお、何らかの変換パラメータが指定されると、自動的にq_80が適用されて配信されます。

リサイズ

幅・高さサイズ

幅はw_、高さはh_で、これらに続けて実際に指定するピクセルサイズ（w_150など）、または元からの割合（w_0.5など）でパラメータ指定します。幅と高さのいずれか、または両方を指定でき、片方を指定した場合はアスペクト比を保持してスケールされます。

リサイズ・切り抜きモード

指定した幅・高さサイズに対して、スケールや切り抜きの方法を指定します。パラメータはc_から始まり、ドキュメントでも例と共に確認できます。太字のパラメータは後述で例示します。

変換パラメータを適用したURLは、例えば下記のようになります。

• https://res.cloudinary.com/CLOUD-NAME/image/upload/c_fill,w_200/ito-test/Reichstag.jpg

ただし、このように幅または高さのどちらかだけを指定する場合、c_fillをc_scale、c_fit、c_padに置き換えても、同様の200x150の画像が返ってきます。一方、c_cropについては、200x150の画像ですが、元の画像からスケールせずに切り取られるため結果が異なります。

※これはイメージで、影は実際には付与されません。

一方、幅と高さの両方を指定すると結果が異なります。以下は200x200のc_fillです。

• https://res.cloudinary.com/CLOUD-NAME/image/upload/c_fill,w_200,h_200/ito-test/Reichstag.jpg

このc_fillを置き換えるとそれぞれ以下のようになります。

c_fillは200x200で余った横幅が切り取られていて、c_scaleはそのままスケールしていて写真が縦長になっており、c_fitは横幅に合わせていて200x150に、c_padはfitに似ていますが200x200で余白が塗られています。

■オプション: gravity

焦点を当てる位置を指定するもので、パラメータはg_から始まります。

デフォルトは center（中央）で、方角を使ってnorth (北=上)、north_east(北東=右上)、south_west (南西=左下)といった指定の仕方もできます。

他には下記のようなパラメータがあります。

g_autoについてはさらなる機能がありますが、詳細はドキュメントをご確認ください。

以下の例では、c_fill,w_200,h_300に加えて3つの異なるgravityパラメータを指定した違いです。g_faces:autoでは顔が判別されず、autoと同じ結果になっています。

■オプション: XY座標

c_cropと組み合わせ、指定したXY座標の地点から右下方向の指定サイズの範囲が切り取られます。左上の端からの距離をX(横)Y(縦)の値で示し、gravityの代わり、または組み合わせて使用できます。

以下の例では 幅 1000 にスケールした後（c_scale,w_1000/）、左上の端から右に250（x_250）、下に250（y_250）の地点から500x200で切り取っています。

■オプション: background

c_padと組み合わせ、背景色や背景画像を指定します。パラメータは b_ から始まり、大きく以下の3つの指定方法があります。

• 色: 色名（b_green、b_pinkなど）
• RGB: 6桁または3桁のRGBで、#は省略（b_rgb:3e2222など）
• 自動(b_auto): 画像の色に合わせて自動判別

b_auto は追加で:に続けて以下のようなオプションを付与できます。なお、autoのデフォルトはb_auto:borderです。

以下の画像の例では、c_pad,h_200,w_200に加えてb_auto:borderとb_auto:border_contrastをそれぞれ適用しています。なお、今回は画像の境界および画像内とも主要な色が空の水色と判断されたため、borderとpredominantは同じ結果となりました。逆も然りなので、contrastとpredominant_contrastとも同じでした。

また、ここでは前述のgravityとXYのオプションを組み合わせ、200x200の枠内で、上寄りから指定したY座標に画像が配置されていることが分かります。

さらに、b_auto では以下のように色をグラデーションにすることもできます。

• b_auto:[グラデーションタイプ]:[色数]:[方向]:[パレット]
  • [グラデーションタイプ]: グラデーションのベースとなる色で、border_gradient(画像の境界の主要な色)/predominant_gradient(画像内の主要な色)/border_gradient_contrast(画像の境界の色のコントラストカラー)/predominant_gradient_contrast(画像内の主要な色のコントラストカラー) のいずれか
  • [色数]: 2 または 4
  • [方向] (任意): 2色の場合に指定するフェードの方向で、horizontal(平行)(デフォルト)/vertical(垂直)/diagonal_desc(左上と右下の斜め)/diagonal_asc(右上と左下の斜め) のいずれか（4色の場合は4辺間が混ざるようにグラデーション）
  • [パレット] (任意): palette_に続け、グラデーションに使用する色をアンダースコアで区切って指定することで、画像内の主要な色に近い色が選択される（選択肢のうち同じ色が複数回使われる可能性もある）

以下の例ではc_pad,h_200,w_200に加えてb_autoでグラデーションのパラメータをそれぞれ適用しています。左上の画像では、主要な2色として深緑と明るい緑が選択されているようで、左上から右下にかけて色が変わっています。右上の画像では主要な4色として3種の緑と赤が判断され、4辺に向かって各色が濃くなっています。左下の画像では赤・緑・オレンジから2色選びますが、赤・オレンジは該当せず、緑一色です。右下の画像では青を加えて4色ですが、緑が3度選択されて青が1辺でグラデーションになっています。

まとめ

いかがでしたでしょうか？

Cloudinaryの画像変換パラメータは、URL内のパラメータ名で比較的分かりやすくなってはいるものの、オプションがあまりにたくさんあるので、今回はリサイズと最適化に関するものをまとめてみました。

クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。