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

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

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

JPEG

色数が多い写真など。

PNG-32

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

PNG-8

256色に収まる、色数の少ないイラストやアイコンなど。

GIF

GIFアニメーション

SVG

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

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

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

PCサイト

実寸100%のサイズ

SPサイト

retinaディスプレイを考慮して実寸の200%のサイズ

画像ファイルの保存名称

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

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

images
  └ img
    ├ about_01.jpg
    └ about_02.svg

画像ファイルの圧縮

少しでも、閲覧者の負荷を下げるためにも、画像を最適に圧縮して書き出しをしてください。photoshopであれば、tinypngというプラグインを使用して画像を書き出すようにしてください。プラグインの導入が難しい場合は、オンラインで画像を圧縮することも可能です。