jpg、png、gif・・・webの画像、どう使い分けるべき? | 乙街道
乙技を求めて クリエイティブな情報

【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はあまり使わなく良いですね(ボソッ)。

乙街道 twitter

webライティング能力検定1級獲得の次は色彩検定2級。 またひとつ豊かになるために11日、学生たちに交じって受けてきました。 今のwebのお仕事は、資格がお金に直結するからねぇ。 さっき公式から配点付き解答速報出たので自己採点中。 合否の結果は来月。ここも外さず、年を終わらせたい。#色彩検定

ツイッターメディア

外苑前メンキャリ勢と、でっかいヤマ、オツカレサマ会!みんなキラッキラッ!ここ3ヶ月くらい朝から晩まで大変だったね!頑張ったね!お疲れ様でした!

ツイッターメディア

わかりやすいとのことで、何よりです! \(^o^)/ twitter.com/kyocolin148cm/…

そしてこないだは長女の誕生日。 いつの間にか7歳。あっという間な気もするけど、とってもとっても色々あった。一緒にできることも増えて父ちゃんは毎日楽しいよ。 毎週土日が楽しみだよ。その日のために毎日笑顔で頑張れる! さっ!明日も仕事頑張ろう(^q^)

ツイッターメディア

やっとケンタくんそろって、カントー図鑑埋まった! なんだかんだポケモンGOはじめて1年で良く歩いて12kg痩せたw 無課金でここまで遊べたゲームは他に無かった。とても優秀なスマホアプリ! #ポケモンGO

ツイッターメディア
希光デザイン事務所
乙街道の管理人はホームページとか作る仕事をしています。
制作依頼やご相談もお気軽にどうぞ。

webライティング能力検定1級獲得の次は色彩検定2級。 またひとつ豊かになるために11日、学生たちに交じって受けてきました。 今のwebのお仕事は、資格がお金に直結するからねぇ。 さっき公式から配点付き解答速報出たので自己採点中。 合否の結果は来月。ここも外さず、年を終わらせたい。#色彩検定

ツイッターメディア

外苑前メンキャリ勢と、でっかいヤマ、オツカレサマ会!みんなキラッキラッ!ここ3ヶ月くらい朝から晩まで大変だったね!頑張ったね!お疲れ様でした!

ツイッターメディア

わかりやすいとのことで、何よりです! \(^o^)/ twitter.com/kyocolin148cm/…

そしてこないだは長女の誕生日。 いつの間にか7歳。あっという間な気もするけど、とってもとっても色々あった。一緒にできることも増えて父ちゃんは毎日楽しいよ。 毎週土日が楽しみだよ。その日のために毎日笑顔で頑張れる! さっ!明日も仕事頑張ろう(^q^)

ツイッターメディア

やっとケンタくんそろって、カントー図鑑埋まった! なんだかんだポケモンGOはじめて1年で良く歩いて12kg痩せたw 無課金でここまで遊べたゲームは他に無かった。とても優秀なスマホアプリ! #ポケモンGO

ツイッターメディア