eclairのブログ ウェブ制作のコーディングで画像を使う時にどんな形式（拡張子）にすれば良いか使い分け方を紹介しています。それぞれの画像形式の特徴をおさえて、適切な画像形式を選択できるようになります。HTMLのimgタグやCSSのbackground-imageに指定する画像をデザインデータから書き出す時に拡張子に気をつけてみましょう。
JPEG画像の特徴と使い分け（.jpeg、.jpg）
JPEG(ジェーペグ）画像は写真や水彩画など複雑な画像を軽量に書き出すのに向いている形式です。
非可逆圧縮といって、保存するたびに画質が劣化してしまう形式なので、なるべくデザインデータや元画像から書き出したままの画像を使用しましょう。
また、透明な画像がつくれないので、透明度のある画像はPNGやSVGで書き出しましょう。
PNG画像の特徴と使い分け（.png）
PNG（ピング）画像はイラスト、図形などに向いている形式です。塗りつぶしが多いと容量が軽くなるためです。
JPEGと違い可逆圧縮の画像形式なので何度保存しても画質が劣化することはありません。
また、透明な画像がつくれるので、色の透過によって透明度を残しておきたい画像は、PNGで書き出しましょう。
写真のような画像はJPEGよりもデータ容量が大きくなってしまうことがあるので、使い分けが重要です。
SVG画像の特徴と使い分け（.svg）
SVG（エスブイジー）画像はロゴやフォント画像など、単純な図形の組み合わせでできているものについてはSVGで書き出すのが向いています。
SVG画像は、JPEGやPNGと違いベクター形式の画像なので拡大縮小しても画像がくっきりと鮮明にみえます。スマホやパソコン関係なくどんなデバイスでみても綺麗に見えるのが長所です。
また、透明な画像もつくれますし、容量も上記の向いている種類の画像であれば軽くなることが多いです。
GIF画像の特徴と使い分け（.gif）
GIF（ジフ）画像は２５６色で表される軽量な画像形式です。色数が少ない画像で書き出すと容量を削減した軽いWEBサイトをつくることができます。昔のWEBサイトでは細かな装飾画像はGIFでつくられていることが多かったですが、今は利用頻度は減っています。
また、アニメーションGIFというパラパラ漫画のような画像にも使えます。GIPHY（https://giphy.com/）などのサービスも有名ですね。
TIFF画像の特徴と使い分け（.tiff）
WEB制作では使わない画像形式です。PNGやJPEGなどに変換してつかいましょう。
BMP画像の特徴と使い分け（.bmp）
同じくWEB制作では使わない画像形式です。PNGやJPEGなどに変換してつかいましょう。
画像形式（拡張子）ごとの使い分け一覧表
| 画像形式 | 拡張子 | 使うシチュエーション |
| JPG画像 | .jpg、.jpeg | 写真（細かな色味にこだわりたい複雑な風景や人などの画像） |
| PNG画像 | .png | イラストや図形やグラフなど |
| SVG画像 | .svg | ロゴやアウトライン化した文字など（少ない図形の組み合わせでてきたもの） |
| GIF画像 | .gif | 色数の少ない軽くしたい画像、アニメーションGIF |
| TIFF画像 | .tiff | |
| BMP画像 | .bmp |
