乙街道 > クリエイティブな情報 > webデザイン > jpg、png、gif・・・webの画像、どう使い分けるべき？

【jpg、png、gif・・・webの画像、どう使い分けるべき？】

2018年9月6日

jpg、png、gif、etc…好きなものを使えば良いじゃん！
確かにその通りなのですが、実はこれらを使い分けれるようになると画像のファイルサイズ(重さ)を減らしたり、単純に画像を綺麗に表示することが出来たりします。

今回はwebに使用できる【jpg】【png】【gif】のそれぞれの画像の形式についての特徴や作成、使用の際の注意点を紹介していきたいと思います。画像をデザインカンプなどからスライス（切り出し）するときや、ホームページに必要な画像を作成するとき等に、何かの参考にしていただければと思います。

jpgファイルの特徴とメリット＆デメリット
pngファイルの特徴とメリット＆デメリット
gifファイルの特徴とメリット＆デメリット
文字の入った画像で綺麗さと重さを比較
写真画像で綺麗さと重さを比較
まとめ

①jpgファイルの特徴とメリット＆デメリット

20180906_01
jpgファイルは正式にはJPEG (Joint Photograph Experts Group）と言い、1670万色での表現が可能です。
この膨大な色数を必要とする写真画像などの表現に最適です。
画質をある程度維持したまま、ファイル容量を小さく圧縮出来るので、ページ表示速度やファイル転送速度が速く、webサイトの基本の画像ファイルとして幅広く使用されています。

jpgファイルを使用するメリット

比較的高画質で、画像ファイルサイズを小さくできる点です。前述の通り、あらゆる場面で汎用性、優位性があります。

jpgファイルを使用するデメリット

画像のデータを破棄することで圧縮しているので画質が確実に劣化します。
圧縮により、図形や線、文字などには、ノイズ等、顕著に粗くなってしまいます。

②pngファイルの特徴とメリット＆デメリット

20180906_02
pngファイルは「Portable Network Graphic」の略称です。
基本的に画質を劣化させない画像形式です。
画質を重視する時や、色数の少ない画像に最適です。
jpgと違い圧縮によってデータが破棄されてしまうことがありません。
また、jpgには概念の無い「複数の透過箇所」を指定することが出来ます。

pngファイルを使用するメリット

画質が劣化しない。透明･半透明の画像が使えます。

pngファイルを使用するデメリット

フルカラーにした写真画像等、色数の多いデータはjpgファイルよりファイルサイズが大きくなってしまいます。

③gifファイルの特徴とメリット＆デメリット

gifファイルは「Graphics Interchange Format）の略称です。
最大8ビット（256色）までの色を扱うことが出来ます。256色以上必要ないロゴやバナー、リンクボタン、アイコン、アニメ調のイラストなど、特に単色ベタ面を多く含む平坦な画像の作成に最適です。
また、256色という制限はありますが、gifアニメーションという動画も作ることが出来ます。

gifファイルを使用するメリット

アニメーションファイルとして使用が可能です。
シンプルな画像を作成する場合、ファイルサイズを小さく出来ます。
pngのような透明な画素も使用できます。

gifファイルを使用するデメリット

最大256色しか使用できないので、グラデーション、写真など色数の多い画像には向いていません。

④文字の入った画像で綺麗さと重さを比較

以前書いたブログからキャプチャした文字の入った画像で綺麗さと重さを比較してみましょう。

【jpg形式サイズ: 863 × 154】ファイルサイズ 32 kb

【png形式サイズ: 863 × 154】ファイルサイズ 28 kb

【gif形式サイズ: 863 × 154】ファイルサイズ 17 kb

クリックしてみてください。いかがでしょう。
jpg形式は最高画質で出力していますが緑色や、赤色の文字部分が劣化して汚くなっているのがわかります。
しかも、pngファイルやgifファイルよりも、ファイルサイズが大きくなっています。
シンプルで色数が少ない画像の場合は、jpg形式を使用すべきでないことがわかります。
このような場合はpngファイルを使用するべきですね。綺麗で、かつ、サイズが軽い仕上がりです。