【ウェブ制作】画像の書き出し形式について

ウェブサイトのコーディングをする際に、何の形式でデザインデータから画像を書き出せば良いのかをまとめています。特徴をおさえて、適切な画像形式を選択してコーディングができるようになりましょう。

JPEG

写真や水彩画など複雑な画像を軽量に書き出すのに向いている形式です。非可逆圧縮形式という保存するたびに画質が劣化してしまう形式なので、なるべくデザインデータや元画像から書き出したままの画像を使用しましょう。

透明な画像がつくれないので、透明度のある画像はPNGやSVGで書き出しましょう。

PNG

イラストなどの塗りつぶしの多い画像だと軽くなります。JPEGと違い可逆圧縮の画像形式なので何度保存しても画質が劣化することはありません。色の透過ができるので、透明度を残しておきたい画像は、PNGで書き出しましょう。

写真のような画像は、JPEGよりもデータ容量が大きくなってしまうので、使い分けが重要です。

SVG

ロゴやフォント画像など、単純な図形の組み合わせでできているものについてはSVGで書き出すのが向いています。

SVG画像は、JPEGやPNGと違いベクター形式の画像なので拡大縮小しても画像がくっきりと鮮明にみえるので、どんなデバイスでみても綺麗に見えるのが長所です。

GIF

256色で表される軽量な画像形式です。色数が少ない画像で書き出すと容量を削減した軽いWEBサイトをつくることができます。昔のWEBサイトでは細かな装飾画像がGIFでつくられていました。

TIFF

WEB制作では使わない画像形式です。PNGやJPEGなどに変換してつかいましょう。

BMP

同じくWEB制作では使わない画像形式です。PNGやJPEGなどに変換してつかいましょう。