SITECORE MANIA 開発者向け技術ブログ

その他

劉

Sitecore(サイトコア)に「.webp」画像を挿入する方法

SEOスコアを上げるため、LCP問題を解消するのはよくあげられています。
LCP問題を解決するには画像を「.webp」化することが有効です。
しかし、現行のSitecoreでは「.webp」形式の画像を対応していません。

画像を挿入時のエラー

  • Image Fieldに挿入するときに「.webp」画像はMediaLibraryに表示されません。
    webp画像がMedialibraryに表示されていない画像
  • Rich Text Fieldに「.webp」画像リンクを挿入するときに以下のエラーが表示されます。
    Rich Text Fieldにwebp画像を挿入するときに表示されたエラーの画像

解決方法

  1. Image Fieldに挿入する場合
    • 「VIEW」の中の「Raw values」にチェックを入れます。
    • 下記の例に「.webp」画像のMedia Item Idを入れ替え、Image Fieldに入力し、Itemを保存します。
    • サンプルコード
      <image mediaid="{2F8A61F9-3B37-4B5A-8140-FD8F36FD66D6}" />
              
      Image Fieldにwebp画像を入れる画像
  2. Rich Text Fieldに挿入する場合
    • Rich Text FieldのHTMLを編集します。
    • 「.webp」画像のItemIDもしくはパスを下記のimageタグに入れ替えて、Rich Text Fieldに入力し、Itemを保存します。
    • ※ItemIDを使用する場合、中の「-」を消す必要があります。

      サンプルコード
      <img alt="" src="-/media/2F8A61F93B374B5A8140FD8F36FD66D6.ashx" />
      <img alt="" src="-/media/Images/Sample_Image_webp.ashx" />
              
      Rich Text Fieldにwebp画像を入れる画像


※エントリーの内容・画像等は、公開時点での情報に基づきます。
※Sitecoreのバージョンによって実装されている機能が異なります。

この記事を読んだ人はこちらの記事も読んでます

Sitecore導入に関するご相談・資料ダウンロード

導入をご検討・ご依頼の方や、サービスについてご不明点がございましたらお気軽にお問い合わせください。

Sitecoreの運用問題を解決する

既にSitecoreを導入しているお客様向けサービス