メインコンテンツまでスキップ

書き出し設定

用途によって適切な画像形式を選択し書き出しを行うようにしてください。

高解像度ディスプレイ対応について​

  • ロゴやアイコンなどのSVGで書き出すようにしてください
    • デザイン上がパスになっていない場合はデザイナーに連絡してください
    • パスデータが存在しない場合は2倍のサイズで書き出すようにしてください
  • 600px以内の画像は2倍サイズで書き出すようにしてください
  • PCとSPで画像比率が同じ場合は同じ画像を表示させるようにしてください
  • PCとSPで異なる画像を表示する場合は<picture>タグを利用する様にしてください

画像形式の特徴と判断基準について​

JPEG (.jpg)​

  • JPEG形式は不可逆な圧縮形式で、透明色を含めることができません
  • 写真など多彩な色を含んでいる場合は、PNG画像だとサイズが膨大になってしまうため、JPG画像を選択してください
  • 特に指定がない限り品質は80%(0.8)で書き出すようにしてください

PNG (.png)​

半透明な表現が必要な場合に選択してください

  • PNG形式は可逆な圧縮形式で、透明色を含めることができます
  • アニメーションを含んだ形式(APNG)も提供されていますが、一部のブラウザが対応していません（IE11め…）

SVG (.svg)​

ロゴ・アイコンなどの単純なパスの組み合わせで作成している場合に選択してください

  • SVG形式は上記3種の画像形式とは異なり、ベクタデータでの形式のため、どれだけ拡大・縮小しても劣化しません
  • グラデーションなどはブラウザによって表現されないことがあるので要注意
  • 複雑なパスが含まれている場合、ページのパフォーマンスに影響することがあるため要注意
警告

SVG画像を書き出す際にはテキスト要素が含まれていないか注意してください。もし含まれている場合は、パスに変換を行ってから書き出してください。

Webp (.webp)​

  • WebPはWeb用に可逆/非可逆圧縮をサポートしている新しい圧縮形式です
  • XDからは直接書き出すことが出来ないため、JPEG/PNG/GIF形式からWebP形式にconvert:webpタスクランナーを利用して変換をしてください
補足

WebP形式の画像表示は、.htaccessによって実現します。そのため、<picture>タグによる画像表示分けは行う必要はありません。

その他形式​

GIF (.gif)​

  • GIF形式は同じ様に可逆な圧縮形式で、透明色を含めることができます
  • GIF形式の場合は透明色は透明/不透明の2択のみで、半透明の色を含めることができません
  • 基本的には利用するシーンはありませんが、GIFアニメーションが必要な場合に選択してください