画像に関するガイドライン

画像フォーマット

• 画像形式は .gif / .jpg / .png / .webp / .svg のみの使用としてください
• .jpeg は .jpg に統一してください
• .bmp / .tiff / .heic 等は使用しないでください。
• 次世代フォーマットの JPEG 2000 / JPEG-XR も使用をしないでください。

フォーマットの使い分け

下記を目安に画像フォーマットの使い分けをしてください。

• 写真素材は .jpg
• イラストや透過は.png
• アイコン素材は .svg
• アニメーションは .gif
• .jpg / .png は基本的に .webp に変換して用いる(必ず代替画像を設定する)

コーディング上の注意

• 背景画像など横幅の大きい画像でも最大の大きさは横幅1920pxとする
• コンテンツ内に使用する画像の横幅は基本600px
  (理想は表示サイズに合わせたサイズ調整。)
• コンテンツの要素にならない画像は基本的にCSSの背景画像として設定。
  （画像検索でも引っ掛けたいような要素となる画像は背景にしない。）
• 基本的に loading=”lazy” をデフォルトで挿入する
• メインビジュアルの画像は非同期の設定をする
  <link rel=”preload” as=”image” href=”first-view-bg-sp.webp” />