Contentfulだけで画像変換が割と優秀。フォーマット変換・リサイズ・顔切り抜きなど試してみたよ

ヘッドレスCMSのContentfulにはアセット管理機能があり、投稿された画像や動画、各種ファイルを配信するエンドポイントを持っています。

例: https://images.ctfassets.net/e1p9n7i8vdx5/16c9dAKMoKF90j49d6mGmr/788636ce6b837cd8a6cc67a298011d7e/73047226-2a82-484d-8f08-7b7e1a28a2f8.JPG

実はこのURLでパラメーターによる画像変換や最適化が可能で、例えば画像フォーマットの変換やリサイズ、写真内の人物の顔を中心にした自動的な切り抜きなど、シンプルながら優秀な画像配信機能を持っています。

本記事ではその使い道をまとめてみます。

1. フォーマット変換

Contentfulに投稿された画像について、jpgやavifなどの別フォーマットに変換して配信が可能です。

フォーマットは fm= で指定でき、下記に対応しています。

• jpg
• png
• webp
• gif
• avif

URL形式:
https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?fm={image_format}

例えばJPEGとしてアップロードした画像を、下記のURLで取得することでwebpに変換できます。

https://images.ctfassets.net/e1p9n7i8vdx5/16c9dAKMoKF90j49d6mGmr/788636ce6b837cd8a6cc67a298011d7e/73047226-2a82-484d-8f08-7b7e1a28a2f8.JPG?fm=webp

Progressive JPEGs

JPEG画像はプログレッシブJPEG（一度低解像度で読み込み後、徐々にオリジナルの画質で読み込む））としてもリクエスト可能です。

例: ?fm=jpg&fl=progressive

8-bit PNGs（PNG-8）

PNG画像はPNG-8（8bit分のカラー=258色が扱えるPNGでファイルサイズも軽い）としてもリクエスト可能です。

例: ?fm=png&fl=png8

2. リサイズ

Contentful単体で画像のリサイズもかなり柔軟にできてしまいます。

基本パラメータは下記です。

• w : 最大の横幅
• h : 最大の縦幅

デフォルトでは画像の縦横比は維持するため、 w か h で指定されたどちらか大きい方にフィットして縮小されます。

URL形式:
https://images.ctfassets.net/e1p9n7i8vdx5/16c9dAKMoKF90j49d6mGmr/788636ce6b837cd8a6cc67a298011d7e/73047226-2a82-484d-8f08-7b7e1a28a2f8.JPG?w=100&h=100

また、リサイズパターンも fit= で指定できます。。

• pad: 画像の縦横比は維持しつつ、w か h で指定されたサイズに足りない部分は余白が挿入されます。
  • さらに余白の色は bg= で指定可能です。
    • 例: ?w=200&h=200&fit=pad&bg=rgb:ffffff
• fill: 画像の縦横比は維持しつつ w か h で指定された領域が埋まるようにリサイズし、はみ出す部分があれば切り取られます。
  • 例: ?w=200&h=200&fit=fill
• scale: 画像の縦横比は維持せずに（つまり画像が歪む可能性がある） w か h で指定された領域が埋まるようにリサイズします。
  • 例: ?w=200&h=200&fit=scale
• crop: オリジナル画像から、 w か h で指定された領域を切り取ります。
  • 例: ?w=200&h=200&fit=crop
• thumb: 指定されたサイズで、サムネイル画像を自動的に生成します。
  • 例: ?w=200&h=200&fit=thumb

さらに、上記でpad, fill, crop or thumbを指定した場合、 f= でどのように画像を切り取るかを指定できます（デフォルトはcenter）。

• center, top, right, left, bottom
  • 例: ?w=300&h=300&fit=crop&f=right
• top_right, top_left, bottom_right, bottom_left

顔の切り抜き

同じく f= による画像切り抜きオプションで、人物の顔を中心に切り取ることが可能です。

• face: 最も大きい顔を検出して、その中心を切り抜きます
  • 例: ?w=200&h=200&f=face&fit=thumb
• faces : 写真内の全ての顔を検出します
  • 例: ?w=300&h=300&f=faces&fit=thumb

丸く切り抜く

写真の四隅を丸くすることも可能です。

?r= でピクセルを指定するか、?r=max で最大の円形 or 楕円に切り取ります。

完全な真円形の画像にしたい場合、?r=max とともに　w と h で同じ値を指定し、かつ fit で fill や crop などを指定し、画像の縦横比を1:1にすることで可能になります。

またこの際、背景色も指定できます。

例: ?r=max&bg=rgb:000000

例:

• ?r=50 : 写真の四隅が50ピクセルだけカーブする
• ?r=max&w=100&h=100&fit=fill&bg=rgb:000000 : 縦横100pxの真円形の画像で、背景色が黒になる

3. 画像のクオリティ調整

画質について、 q= で 1 から100 の間で指定することで調整可能です。

1の最低画質↓

100の最高画質↓

URL形式:
https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?fm=jpg&q={quality}

※PNG-8に変換している場合は画質調整オプションが利用できません。

さいごに

以上で紹介したオプションは無料プランでも使える上に、URLパラメータのみで基本的な画像変換ができてしまうので、割と優秀なのでは？と思いました。

また、ContentfulのアセットCDNはバックエンドとしてCloudFrontが使われているため、安定性・表示速度も心配する必要はありません。

ClassmethodではContentfulの契約のご相談、構築支援をしています。ご興味のある方はぜひ弊社までお問い合わせください。

参考記事

https://www.contentful.com/developers/docs/references/images-api/