ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

では、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 の透明度を処理するとグレーで表示されることに注意してください。関連する例については、 sitepointを参照してください。

一般的に、PNG-8 として保存された画像は、同じ品質の GIF よりも小さくなり、完全に透明な画像の場合は現在 PNG-24 のみを使用できます。ただし、画像を PNG-8 で保存して GIF と比較する場合は注意してください。法則が常に正しいとは限らないためです。

画像

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

上記の概要を読んだ後、どの画像を保存するのにどの形式を使用するかについて、大まかな理解が得られるはずです。要約すると、次のようになります。

要点:小さな画像や基本的な Web ページ要素 (ボタンなど) の場合は、PNG-8 または GIF を検討してください。写真の場合は、JPG を検討してください。