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

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

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

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

  1. jpgファイルの特徴とメリット&デメリット
  2. pngファイルの特徴とメリット&デメリット
  3. gifファイルの特徴とメリット&デメリット
  4. 文字の入った画像で綺麗さと重さを比較
  5. 写真画像で綺麗さと重さを比較
  6. まとめ

①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
captue

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

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

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

⑤写真画像で綺麗さと重さを比較

今度は色数がたくさんの写真で検証してみましょう。
今回トップに使わせていただいた画像をキャプチャ。

【jpg形式 サイズ: 455 × 353】ファイルサイズ 36 kb
20180906

【png形式 サイズ: 455 × 353】ファイルサイズ 281 kb
20180906

【gif形式 サイズ: 455 × 353】ファイルサイズ 64 kb
20180906

これは目に見えて面白い結果になりましたね。
jpgファイルが36キロバイトに対してpngファイルは約7倍の281kbになっています。
gifファイルは色数が追い付かずザラザラ感が出てしまいました。
このような場合はjpgファイルを使用するべきですね。

⑦まとめ

長々となってしまいましたがいかがでしたでしょうか。
ここでまとめさせていただきます。

①写真やグラデーションのある色数の多い画像など → jpg形式!!
②PC画面スクリーンショット、色数の少ない線画、図表など → png形式!!
③ファイルサイズを気にせず、画質のみ重視する場合 → png形式!!

この3つを意識して画像を切り出したり、作成してみると良いですね!
それともうひとつ・・・gifはあまり使わなく良いですね(ボソッ)。

この記事を読んだ人はこんな記事も読んでいます

20180827_00

今さら聞けなそうなptとかpx、画面サイズと解像度の話

普段何気なく、なんとなく使っているptやpx、そして画面サイズと解像度などの今更聞けない・・・!ってお話。

記事を読む

SHINE vol.1

[制作事例]S.E.R主催イベント「SHINE Vol.1」フライヤー

出演者、関係者も含めて皆活き活きしている人だらけです。この立ち上げに少しでも関われたことを光栄に思います。

記事を読む

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

webデザイナーさんに読んでもらいたい【スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング】とは・・・?

記事を読む

hinata フライヤー

[制作事例]Hinataさんのフライヤー

「YOU ARE THE SUNSHINE OF MY DAYS」「君想歌~キミオモイウタウウタ~」クレソル時代にループで聴いてました。

記事を読む

KI.ZU.NA46

[制作事例]Birthさん主催イベント「KI.ZU.NA Vol.46」フライヤー

KI.ZU.NAも今回で46回目なんですって!ブエノス土曜のレギュラーでこの回数ってやっぱすごいんだよね!

記事を読む

[制作事例]サンスポアイドルリポーター SIR ホームページリニューアル

2015年~16年にかけての5期生オーディション開催に合わせての大規模リニューアルでした。使用CMSはwordpress。

記事を読む

Rhyzz_mySpace

[制作事例]Rhyzz MySpaceデザイン

マイスペース。解析すればするほど面白い! アメブロと違い、プレイヤースキン以外は全て改造出来るかもしれない!!

記事を読む

乙街道 ver.2.1.0 アップデート!

気づいた人がいたかもしれませんが数日かけてちびちびやっておりましたw

記事を読む

NO IMAGE

最近「イイ!!」と参考にしたいと思ったWEBサイト その1

見て損はないと思うので気になった方はアクセスしてみてください。

記事を読む

NO IMAGE

Myspaceの配置やデザインの編集の研究

今某マイミクさんのMyspaceの配置やデザイン編集を研究中なんです。

記事を読む

2024年11月23日
2017年3月26日
2017年2月23日