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

2022.01.28

ヘッドレス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 : 最大の縦幅

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

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

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

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

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

  • centertoprightleftbottom
    • 例: ?w=300&h=300&fit=crop&f=right
  • top_righttop_leftbottom_rightbottom_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 とともに wh で同じ値を指定し、かつ fitfillcrop などを指定し、画像の縦横比を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/