Contentfulから取得する画像の次世代画像フォーマット化

はじめに

本記事はHRBrain Advent Calendar 2023の24日目の記事です。

Contentfulとは

Headless CMSサービスであり、弊社では非エンジニアのチームからのデータの入稿において活用しています。
本記事は、既にContentfulを使用している人向けの記事になりますので、Cotentfulのデータの取得手順等は割愛させていただきます。

Contentfulからの画像取得について

弊社では主に、弊社サービスサイトでContentfulを使用しています。
バナー画像等の画像は大きくCVRに関わるため、様々な画像をエンジニアのリソースを割かずに、反映できるためとても重宝しています。

次世代画像フォーマット化

以下調査では、表示速度が1秒改善されると20%CVRが改善されることが見込めるとあります。

light houseの計測でも画像を次世代フォーマット化することで改善するとの警告もでていました。
そこで、画像の次世代フォーマット化をし、表示速度を改善することでCVRの向上を目指すことにしました。

幸いにもContentfulでは、画像取得の際にフォーマットを選べる様にクエリを用意してくれています。

今回はavifとwebpでの取得を目指します。
以下utilsを作成し、画像を取得します。

export function getImageUrl({ item, width, height, quality, type }) {
  try {
    let query = `?fit=fill&w=${width}`
    if (height) query += `&h=${height}`
    if (quality) query += `&q=${quality}`
    if (type) query += `&fm=${type}`
    const imageUrl = item.fields.file.url
    return `https:${imageUrl}${query}`
  } catch (e) {
    console.error(e)
  }
}

上記utilsを使い、画面側では以下の様に呼び出します。
itemはContentfulから取得した画像オブジェクトになります

 <picture>
    <source
     :srcset="
       getImageUrl({
         item: item,
         width: 500,
         height: 500,
         type: 'avif',
       })
     "
     type="image/avif"
   />
   <source
     :srcset="
       getImageUrl({
         item: item,
         width: 500,
         height: 500,
         type: 'webp',
       })
     "
     type="image/webp"
   />
   <img
     :src="
       getImageUrl({
         item: item,
         width: 500,
         height: 500,
       })
     "
     :alt="hoge"
     :width="500"
     :height="500"
   />
</picture>

上記sourceの分岐で、avif→webp→imgの順で評価されるため、各フォーマットが対応していないブラウザでも問題なく表示することができます。

実際に次世代フォーマット化した結果

弊社サービスサイトでの対応箇所は合計で46箇所。
light houseで計測し、平均 2.99 sec表示速度が改善され、体感でも少しわかるくらいに速くなりました。
light houseのスコアも大きく改善し、Serve Images In Next-Gen Formatsの警告はほとんど消えました。

おわりに

株式会社HRBrainではHRBrainで一緒に働いてくれる仲間を募集しています。
エントリーお待ちしています！