画像の保存方法マニュアル・ガイド

WebP・JPEG・PNG・GIF・SVGの使い分け

書き出す画像によって、それぞれの特性があります。その特性をしっかりと理解をして、適切な拡張子で書き出してください。適切な書き出しをしていないと、画像が荒くなったり（サイトの品質低下）、画像が重くなったり、悪影響が出てしまいます。

WebP

写真・イラストの標準。JPEGやPNGより軽く、透過も扱える。特別な理由がなければ写真はWebPで書き出す。
Photoshop 2022以降は「別名で保存」からプラグインなしで書き出せる。

JPEG

色数が多い写真など。

PNG-32

背景を透明にしなくてはいけない画像。もしくはイラスト。ただ、ファイルサイズが大きくなるため、むやみにPNGを使用しないでください。

PNG-8

256色に収まる、色数の少ないイラストやアイコンなど。（基本は使用しない）

GIF

GIFアニメーション

SVG

ベクターファイルなので画像を大きくしても荒くならない。シンプルなパスのロゴなどで使用。
当サイトの以下のロゴもSVGを使用

画像ファイルの横幅・縦幅

基本的にはPC、SPのサイトで使用する画像を切り替えることはせずに同じ写真を使用します。そのことも考慮して画像を書き出してください。

書き出しサイズ

必要以上に大きなサイズで画像を保存しない。SPは、実寸の200%（retinaディスプレイを考慮）

横幅・縦幅の数値

数値は基本偶数にする（200%での利用時、50%の利用時を考慮）。奇数だと表示サイズ（1/2）が小数になり、輪郭がにじむことがある。例：474×168で書き出し → 表示237×84。

画像ファイルの保存名称

画像ファイル名は以下を参照にして下さい。（参考：ディレクトリー構造と各フォルダー毎の役割）

images
  └ img
    └ coding
    - └ guide
     --- ├ saveimg_01.jpg
     --- └ saveimg_02.png

images
  └ img
    ├ about_01.jpg
    └ about_02.svg

画像ファイルの圧縮

少しでも、閲覧者の負荷を下げるためにも、画像を最適に圧縮して書き出しをしてください。Photoshop 2022以降であれば、プラグインを入れなくても「別名で保存」からWebP形式で書き出せます。品質は90を目安にしてください。

透過画像とFigmaからの書き出し

WebPは透過（アルファチャンネル）に対応しています。切り抜き画像は透過を保ったままWebPで書き出してください。背景を特定の色で塗り固めると、セクションの背景色を変えたときに輪郭へ縁取りが出たり、四角い箱が見えたりします。デザインの色が確定する前に書き出した画像は、色を決めた時点で全点書き出し直しになります。

ファイルサイズは2割ほど増えます。1360×906の切り抜きで実測したところ、背景を塗りつぶすと124,540バイト、透過を保つと151,298バイトでした。それでも色に縛られない利点のほうが上回ります。

ロゴ・アイコン・線画のイラストなど、元がベクターのものはWebPではなくSVGで書き出してください。1点あたり1KB前後で済み、どんな拡大率でも輪郭が滲みません。2倍で書き出すルールの対象外です。

<svg width="237" height="84" viewBox="0 0 237 84">
<rect width="237" height="84" fill="#E5E5E5"/>                                      Figmaのページ背景
<g id="LP / ページ名">
<rect width="1280" height="9460" transform="translate(-70 -1748)" fill="#F3EEE3"/>  LP全体の背景