ContentulのImage APIはwebpへのコンバートもできるよ
本ブログの記事やメディアなどを管理しているContentfulのImage APIについて紹介します。
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
今回は本ブログの記事やメディアなどを管理しているContentfulのImage APIについて紹介します。
サイトのパフォーマンスを向上させたい場合、画像のサイズがネックになることがあります。そんな時にGoogleが提供している軽量な画像フォーマットのwebpを利用することがあるかと思いますが、ContentfulのImage APIでwebpに変換する方法を試していきたいと思います。
公式ドキュメントの↑の内容を参考します
Contentfulにアップロードした画像について
ベースURL
Contentfulにアップロードした画像は、images.ctfassets.netドメインからアクセスすることが可能です。
https://images.ctfassets.net/
アップロードした画像のURL
アップロードした画像のURLは以下のようになります。
■ アップロードした画像のURL
//images.ctfassets.net/httuqftbm1yv/2POTUqW9cZfG0YJBrZaQlP/70cb24436b25e7a218f3215e5528bf91/Nuxt.js____________________________________________________________.png
※ http or https のスキーマを省略することで、アクセスしたページのスキーマを利用する
■ アップロードした画像
■ URLの形式について
https://images.ctfassets.net/{space_id}/{asset_id}/{token}/{name}
- space_id: Contentfulのダッシュボードから"Create Space"で作成した際のID
- asset_id: Contentfulのダッシュボードの"Media"メニューから対象となる画像を選択するとURL or Infoからわかります。
https://app.contentful.com/spaces/httuqftbm1yv/assets/2POTUqW9cZfG0YJBrZaQlP
2POTUqW9cZfG0YJBrZaQlPの部分がasset_id
- name: アップロードした画像に設定したfilename（日本語などマルチバイトはURLエンコードしたもの）
- token: トークンについては見つけられませんでした！APIから画像URLを取得するか、記事に埋め込んだURLからtokenを確認するしか方法がないかもですね
Image APIを試す
それではImage APIを試してみましょう。本ブログで利用した機能を中心に確認していきます。
画像形式を変換する
以下の３つの形式が利用可能です。
- jpg
- png
- webp
画像URLのfmパラメータを利用してフォーマットを変換することができます。
■ URLの形式
https://{space_id}/{asset_id}/{token}/{name}?fm={image_format}
image_formatに、jpg or png or webpのいずれか変換したい形式を入れてください。
例えば、私のブログでは以下のように利用しています。
<picture class="block h-auto w-full">
<source type="image/webp" srcset="//images.ctfassets.net/httuqftbm1yv/40qRzOhTRZ1LCFPnaVwuFR/7ae4ddb73152865319f3aaaf01b38342/test.png?fm=webp">
<img
alt="テスト"
src="//images.ctfassets.net/httuqftbm1yv/40qRzOhTRZ1LCFPnaVwuFR/7ae4ddb73152865319f3aaaf01b38342/test.png"
>
</picture>
webpが表示できない場合、png画像が表示されるようにしています。
webpについては以下の記事も参考にしてみてください。
-今話題の記事を読んで気になった- 「WebP画像形式」とは??
画像のリサイズ
width, heightを指定してリサイズすることができます。
画像URLw, hパラメータを利用してサイズを変更することができます。
■ URLの形式
https://{space_id}/{asset_id}/{token}/{name}?w={width}&h={height}
※ サイズはpx(ピクセル)になります。
以下の画像は、width: 200px, height: 100pxに変換した画像です。
画像の角を丸くする
角を丸めたり、サークル画像を生成することも可能です。
画像URLのrパラメータを利用して角を丸めます。デフォルトは0で丸みがない状態です。サークル画像など最大限に丸めたい場合はmaxが指定できます。
■ URLの形式
https://{space_id}/{asset_id}/{token}/{name}?r={radius}
※ サイズはpx(ピクセル)になります。
以下の画像は、r=maxを指定した画像です。
画像の切り抜き（クロッピング）
指定したサイズで画像を切り抜くことも可能です。w, hと合わせてにfitパラメータを利用します。
■ URLの形式
https://{space_id}/{asset_id}/{token}/{name}?fit={type}&w={width}&h={height}
※ サイズはpx(ピクセル)になります。
以下の画像は、fit=crop&w=400&h=400を指定した画像です。
fitパラメータを利用するとサムネイル画像を生成することもできますし、f=faceで顔認識ができるようです。
その他にも機能があります。色々試してみたい方は、公式ドキュメントをご確認ください。
最後に
今回はContentfulの機能を少し深掘りする為に、Image APIを利用しました。
引き続き本ブログではContentfulを利用していきますので、他の機能についても学んでいきたいと思います。
