1. home
  2. /tutorial
  3. /image optimize

画像最適化について

Tips

当サービスで行う画像最適化について

※本ドキュメントの内容は本サービス向けの内容になります。

画像最適化をご希望する場合

デフォルトでは画像最適化が適用されます。

主に下記の最適化が行われます。

  • JPG/PNG画像のwebp変換
  • CLS対策
  • loading属性の追加
  • decoding属性の追加

最適化における注意点

画像最適化を行うことで、ご自身での画像ファイルの差し替えが困難になります。(元画像は失われません)

画像の差し替えを行いたい場合は都度ご連絡いただくようお願い致します。

画像最適化ご希望されない場合

画像最適化をしない場合、下記のみ適用されます

  • loading属性の追加
  • decoding属性の追加

Pictureタグ化について

※中級者向けの内容です

本サービスでは画像のレスポンシブ対応をdisplay:none;にて行います。

近年のマークアップシーンでは画像のレスポンシブ対応ではPictureタグによる切り替えが推奨され、display:none;による切り替えよりもパフォーマンス向上が期待できます。

ただし、Pictureタグによる切り替えはPC/SPの画像が一致している場合に有効であり、例えば画像枚数がPCとSPで異なる場合や画像以外のセクションが出現する場合に適用することは困難です。

例えばPC表示ではPictureタグ、SP表示ではアニメーション・背景付きのCTAを表示させる等が当てはまります。

個別に対応する場合はPictureタグによる実装の方がパフォーマンスに優れますが、制作フローとパフォーマンスを天秤にかけ、通常display:none;による切り替えを適用させています。

背景画像の最適化について

背景画像は基本的にwebp画像変換を行いません。最適化を希望の場合は事前にwebp形式への変換した上でご依頼ください。