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

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

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

JPEG
色数が多い写真など。
JPEGの画像の例
PNG-32
背景を透明にしなくてはいけない画像。もしくはイラスト。ただ、ファイルサイズが大きくなるため、むやみにPNGを使用しないでください。
透明PNGの画像の例
PNG-8
256色に収まる、色数の少ないイラストやアイコンなど。
PNGの画像の例
GIF
GIFアニメーション
アニメーションgif
SVG
ベクターファイルなので画像を大きくしても荒くならない。シンプルなパスのロゴなどで使用。
当サイトの以下のロゴもSVGを使用
スタジオコンチーゴ株式会社

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

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

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

画像ファイルの保存名称

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

ページURLが、.com/coding/guide/saveimgの場合

imagesimgcoding
    -guide
     --- ├ saveimg_01.jpg
     --- └ saveimg_02.png

ページURLが、.com/aboutの場合

imagesimg
    ├ about_01.jpg
    └ about_02.svg

NGな例

  • 日本語のファイル名。会社概要_01.jpg
  • ファイル名にスペースがあるファイル名。about this_01.jpg
  • 連番前のハイフン。history-01.jpg

画像ファイルの圧縮

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