1. ホーム
  2. Web制作
  3. HTML/Xhtml

Web画像フォーマットPNG、JPG、GIFの選び方・使い方

2022-01-29 11:59:55

では、GIF、PNG、JPGのうち、どの形式を候補として選べばいいのか、どの画像形式なら画像は小さくなるけど画質はよくなるのか。

1. 画像フォーマット

GIF

GIFは、アニメーションをサポートし、またロスレス画像フォーマットであるため、画像を修正しても品質が損なわれないという点で優れている。さらに、GIFは半透明(完全な透明度または完全な不透明度)をサポートしています。
Googleによると、GIFは非常に小さい画像やシンプルな画像(10×10以下、3色以下)に適しているとのことです。

PNG

まず、PNGには PNG-8 トゥルーカラーPNG (PNG-24またはPNG-32)です。そうすると、GIFに対するPNGの最大のメリットは

  • 通常、サイズが小さい
  • アルファ(完全透過)対応

しかし、PNGはアニメーションに対応していないことが分かっています。

また、IE6ではPNG-8には対応できますが、PNG-24の透明度を扱うとグレーアウトしてしまうので注意してください。例として サイトポイント .

通常、画像をPNG-8で保存すると、同じ品質でGIFよりもサイズが小さくなり、完全透過画像ではPNG-24しか使えなくなりました。法則は常に正しいとは限らないからです。

JPG

JPGはGIF、PNGよりもはるかに多くの色を表示することができ、非常によく圧縮されているので、JPGはデジタル写真の保存に最適です。しかし、歪み圧縮であるため、画像を修正するたびにピクセルの歪みが発生することに注意してください。

どの画像をどのフォーマットで保存すればいいのか、よく理解できたはずです。簡単に言うと

<スパン 一文で言うと 小さな画像や基本的なWeb要素(ボタンなど)には、PNG-8またはGIFをご検討ください。写真には、JPGを検討してください。