![\"\"](\"https://images.microcms-assets.io/assets/c606031872ff4f8ab77dda96695ec0d3/44309188dffb409ebb0b83e6a53e4e5a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-02%2017.24.49.gif\")
当ブログではヘッドレスCMSとしてmicroCMSを利用しています。
microCMSではコンテンツの管理の他、画像管理（画像のアップデート、エンドユーザーへの配信）を行うことができます。
microCMSの画像APIは画像処理にimgixというサービスの機能が利用可能です。
imgixのAPIは画像取得時のパラメータによって様々な処理が可能で、
画像サイズの調整や圧縮など多様な加工をすることができます。
その中でも特に強力なのがformat=autoです。これをURLパラメータにつけるだけで、
という挙動をしてくれます。AVIFやWebPはJPEGやPNGに比べてファイルサイズを小さくできるので、トラフィックの削減につながります。
ところが、microCMSの画像APIページを見ると、
Informationauto=formatについては現在非対応です。 開発検討中というステータスになります。
画像APIとは
とのことです。がっくし。
ただ、自動ではなく明示的な指定は必要なものの、AVIF, WebPの取得自体はfmパラメータひとつの指定で行うことができます。
となれば、format=auto相当の判定をHTML側でやってあげれば、同じようなことは実現できます。
元のパラメータ一つ付与だけで全てやってくれる感じからは遠のいてしまいますが...
また今回は、microCMSのリッチエディタ内のHTMLに対してformat=auto相当の動作を実現させます。
microCMSでメインのコンテンツ投稿はリッチエディタ要素の中で記載することが多いと思います。
リッチエディタではmicroCMSの画像を簡単に貼り付けることができますが、
ここでは画像APIのうち幅、高さの指定しか行うことができません。できればこちらもmicroCMSにはjpeg/pngとして登録した画像であっても、AVIF/WebPで取得できるようにしたいです。
そこで今回は
ようにします。
自分はGatsbyでブログを作成しているので、Gatsbyでの実装例です。
SSRの生成処理中にmicroCMSのコンテンツを取得するので、そこで取得したリッチエディタのHTMLを強引に書き換えて出力するようにします。
（別にGatsby/React依存しているコードはないので任意のJavascriptベースのプロジェクトで似たようなコードで動くと思います）
ひとまず動いた感じのナイーブで実装例ですので、各々の環境に応じて変更ください。
HTMLパーサーのCheerioでリッチエディタのHTMLをパースし、microcmsの画像を差し替えます。
Cheerioが入っていない場合はプロジェクト内で
yarn add cheerioなどしておいてください。
let body = blog.body //ブログの本文。(microCMSのリッチエディタから取得したもの)\n\n const cheerio = require('cheerio');\n\n //use avif/webp \n const contentBody = cheerio.load(body)\n contentBody(\"img\").each((_, elm) => {\n const src = contentBody(elm).attr(\"src\");\n //microCMSドメインでなければcontinue\n if(!src.startsWith(\"https://images.microcms-assets.io\")){\n return true;\n }\n\n //microCMSのリッチエディタのオプション設定で常にwidth, heightを返す設定をしている前提\n const width = contentBody(elm).attr(\"width\");\n const height = contentBody(elm).attr(\"height\");\n\n //make avif and webp url\n const avif_url = new URL(src)\n avif_url.searchParams.append(\"fm\", \"avif\");\n const avif_src = avif_url.toString();\n\n const webp_url = new URL(src)\n webp_url.searchParams.append(\"fm\", \"webp\");\n const webp_src = webp_url.toString();\n\n //pictureを追加してimgを削除\n //altは自分は使っていないので入れていません\n contentBody(elm).after(`<picture>\n <source srcSet=${avif_src} type=\"image/avif\" width=${width} height=${height}>\n <source srcSet=${webp_src} type=\"image/webp\" width=${width} height=${height}>\n <img src=${src} width=${width} height=${height}>\n </picture>`)\n contentBody(elm).remove()\n });\n\n //update body\n body = contentBody.html()試しにこのページのトラフィックのうち、画像を取得している箇所を見てみます。
![\"\"](\"https://images.microcms-assets.io/assets/c606031872ff4f8ab77dda96695ec0d3/52c1ddce667e47febdafaf66f6f2aa08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-02%2017.23.53.gif\")
ファイルによりますが、サイズは半分強にまで削減できました。
今回実装したのはpictureタグでの画像出し分けだけで、
本質的にやっていることとしては呼び出すURLにパラメータをつけるだけです。
これだけトラフィックを削減できるので、imgixは大変便利です！
できればmicroCMSさんにはformat=autoを実装して、リッチエディタ内でオプション指定できるようにしてくれればもっとうれしいんですが...