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

画像や動画を最適化できるSaaS・Cloudinaryでは様々な画像変換パラメータが提供されています。今回はそのうち、最適化（フォーマット・品質）とリサイズ（切り抜き、配置、背景など）についてまとめていきます。

#デザイン

#Cloudinary

Ito ma

2019.10.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

明日の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としてオーバーレイで組み合わせます。

画像の変換パラメータ

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

最適化
- フォーマット
- 品質（圧縮）
リサイズ

最適化

フォーマット

ファイルを適切なフォーマットに変更することによりサイズを小さくすることが期待できます。特に、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が選択されます。

パラメータ	説明
best	圧縮は控えめで高品質を保つ
good	比較的小さいファイルサイズで良品質にする
eco	強めに圧縮し、やや見栄えを損なう可能性がある
low	最も強い圧縮で、見栄えの品質も下がる

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

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

リサイズ

幅・高さサイズ

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

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

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

パラメータ	説明	オプション
scale	指定サイズの通りにスケール；指定によっては比率が崩れる	-
fit	アスペクト比を維持したまま指定サイズ内に収めるようリサイズ	-
limit	fitと同様だが、オリジナル以下のサイズにする場合のみ	-
minimum fit (mfit)	fitと同様だが、オリジナル以上のサイズにする場合のみ	-
fill	指定サイズを満たすようスケール後、余った部分を切り取り；gravityで残す範囲を指定	gravity
limited fill (lfill)	fillと同様だが、オリジナルが指定サイズより大きい場合のみ	gravity
crop	元のスケールを維持したまま、指定のサイズに切り取り；gravityで切り取り範囲を指定	gravity, xy
thumb	サムネイル向けで、顔やカスタム範囲を含めつつ指定サイズにスケール&切り取り	gravity
pad	アスペクト比を維持したまま指定サイズ内に収めるようリサイズし、余白は背景とする；backgroundで背景、gravityで(余白に対する)画像の位置を指定	background, gravity
limit & pad (lpad)	padと同様だが、オリジナル以下のサイズにする場合のみ	background, gravity
minimum pad (mpad)	padと同様だが、オリジナル以上のサイズにする場合のみ	background, gravity

変換パラメータを適用した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 (南西=左下)といった指定の仕方もできます。

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

パラメータ	説明
face	自動的に最大の'顔'を見つけ、焦点を当てる；顔が自動検知されない場合、デフォルトはnorth、`g_face:auto`はauto、`g_face:center`はcenterとなる；手動で顔の範囲を指定すると自動検知から上書き
faces	faceと同様だが、すべての顔を含めようとする
custom	指定されたカスタムの範囲に焦点を当てる；カスタム範囲がない場合、centerとなる
custom:face(s)	customと同様だが、カスタム範囲がない場合、face(s)となる
xy_center	XY座標で指定した点に焦点を当てる(指定方法は後述のXY座標)
adv_face(s)	アドオンで高度な顔検知により自動的に'顔'を見つけ、焦点を当てる
adv_eyes	アドオンで高度な顔検知により自動的にすべての目を見つけ、焦点を当てる
custom:adv_face(s)	customと同様だが、カスタム範囲がない場合、adv_face(s)となる
ocr_text	アドオンでOCR認識によりテキスト要素を検知し、焦点を当てる
auto	インテリジェントなアルゴリズムで分析して大事そうな要素を枠に含める

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です。

パラメータ	説明
border	画像の境界の主要な色を選択
predominant	画像内の主要な色を選択
border_contrast	画像の境界の色からコントラストカラーを選択
predominant_contrast	画像内の主要な色からコントラストカラーを選択

以下の画像の例では、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辺でグラデーションになっています。