Cloudinaryの画像変換パラメータまとめ 〜 形とスタイル

Guten Abend、ベルリンから伊藤です。

画像や動画の最適化SaaSのCloudinaryで使用する画像変換パラメータについてまとめています。前回はフォーマット、品質、そしてリサイズに関するものを説明しました。今回はその続編で形やスタイルについて。今回もCloudinaryのドキュメントに沿ってまとめていきます。

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

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

Cloudinaryの配信URL（おさらい）

詳しくは前回のブログにありますが、Cloudinaryを使った画像や動画の最適化・変換は、そのURL内のパラメータによって、動的に行うことができます。

• https://res.cloudinary.com/[クラウド名]/[リソースタイプ]/[タイプ]/[変換パラメータ]/[バージョン]/[パブリックID].[フォーマット]

この [変換パラメータ] の中で、カンマ区切りで順不同でパラメータを指定でき、スラッシュ区切りで連続の変換を行うことができます。（※ただし、同じパラメータの組み合わせでも順序を変更して異なるパスとなると、異なるリクエストとしてCDNキャッシュからの配信がされません。）

画像の変換パラメータ

今回は以下の画像の変換オプションについて説明します。

• 形
  • 角丸・円形化（radius）
  • 歪み効果
• スタイル
  • 回転（angle）
  • 透過（opacity）
  • 枠線（border）

形

角丸・円形化（radius）

元の四角い画像を丸くするのはSNSアイコンなどでも人気で、CSSなどで適用させることも可能ですが、そういったプログラムの使用できないメールやPDFに埋め込むような場合にも、あらかじめ加工した画像が配信できるのは便利です。パラメータは r_ から始まり、以下のいずれかで指定できます。

• r_[数値]: 角を丸くするピクセル数を、左上から時計回りに1つから4つ、コロン区切りで指定（指定されない値は対角と同じになる）
• r_max: 長方形なら楕円、正方形なら真円

例えば、r_10:20:30:40 とすると、左上から時計回りで順に角の丸みが深くなります。r_0:20 とすると、r_0:20:0:20と同じとなり、r_10:20:30 とすると、r_10:20:30:20 と同じ結果となります。

以下の例では、h_200,w_200,c_fill で 200 x 200 のサイズにし、r_10:20:30:40 で左上から右回りに角の丸みの深度が大きくなっています。角の余白部分の背景は白です。

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

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

このように丸く切り取った角の余白スペースは、デフォルトでは白背景となりますが、前回登場した background オプションを使って任意の背景に変更でき、また PNG のように透過をサポートするフォーマットを指定すれば透明にすることができます。

次の図でいろいろな例を示します。

• (1) 200 x 200 の正方形に r_max を適用して真円となっています。
• (2) 縦 200 に合わせた長方形で同じく r_max を適用して楕円となっています。さらに、末尾の拡張子を png 指定して背景が透過されており、合わせて f_auto を指定することで必要に応じて圧縮効率の高いフォーマット(Webpなど)に変換されます。（※フォーマット変換については前回の記事から。）
• (3) h_200,c_scale に加えて、 r_50:0:0:0 で左上のみ角丸、背景に darkorangeを指定しています。
• (4) r_0:90 で右上と対角である左下が角丸、b_rgb:339999 でRGBにより背景色を指定しています。

歪み効果

エフェクトである distort を使って、画像の形を歪めることができます。これは、例えばスマートフォンの画面、DVDのカバー写真などをオーバーレイであてはめるようなケースで便利です。詳細はこちらのCloudinaryの記事で紹介されています。

指定は以下の2つの方法があります。

• e_distort:arc:[カーブの角度] (distort:arc:180 など)
• e_distort:[コロン区切りの四辺の座標] (e_distort:5:34:70:10:70:75:5:55 など)

次の例では c_scale,w_200 に加えてそれぞれの方法で歪み効果を適用しています。

スタイル

回転（angle）

■特定の角度への回転

a_ に続けて角度の数値を指定します。数を増やすと時計回り、マイナスで指定すると反時計回りとなります。90度の倍数ではない斜め角度の場合には余白を埋める四角の境界が追加されます。前項と同様、余白は、デフォルトでは白背景、サポートするフォーマットなら透過されます。

注意すべきは、下記の2つで異なる変換になるということです。

https://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill,a_45/sample.jpg
https://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill/a_45/sample.jpg

冒頭でも触れた通り、カンマ区切りで複数の変換パラメータを同時に適用させることができますが、スラッシュ区切りでは変換後にさらに変換を組み合わせる動きとなります。そのため、1つ目は 150 x 100 サイズの枠内に 45 度で画像をスケールして収めるのに対し、2つ目は 150 x 100 サイズの枠内にスケールして収めた後に、45 度に傾けます。以下の例で違いを確認してください。

■他の回転オプション

他に、a_に続けて以下のような回転オプションを指定できます。これらに加えてさらに角度を回転させる場合は、続けて.と角度の数値を指定することができます。

a_auto_right と a_auto_left は特定のアスペクト比に合わせて表示しなければならない時に便利です。例では、オリジナルが横長のアスペクト比の画像であるのに対し、w_150,h_200 で縦長のアスペクト比をリクエストしたことで、a_auto_right が有効となり時計回りに回転しています。これは w_200,h_150 の場合には横長のため回転は行われません。

hflip の例では、150 x 200 の画像に変換してから、水平方向に反転させて -30 度（反時計周りに30度）回転させ、背景を lightpink に指定しています。

透過（opacity）

o_に続けて0(完全透過)から100(完全不透過)で圧縮レベルを指定します。画像フォーマットがJPGなど透過をサポートしない場合、デフォルトの白背景をベースに透過されます。

透過はウォーターマークなど、画像をオーバーレイで重ねる場合に便利です。

枠線（border）

パラメータはbo_から始まり、CSS のよう に bo_[線幅]_[スタイル]_[色] を指定します。（例えば、bo_3px_solid_black） ※ただし、現時点では solid のみサポートされており、破線などその他のスタイルは使用不可。

色には以下2つの指定方法があります。

• 色: 色名（bo_2px_solid_violetなど）
• RGB: 6桁または3桁のRGBで、#は省略（bo_5px_solid_rgb:ee82eeなど）

こちらも画像を重ねる時に便利です。

まとめ

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

Cloudinaryの画像変換パラメータでは、様々な種類のパラメータで動的に画像の変換を行うことができます。今回は形とスタイルに関するまとめでした。

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