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

こないだの叙々苑で食した特選カルビ焼をご覧いただこう。 なんと一人前 5,184円。一枚1,000円w時給かなww とんでもなく美味でした。また食べに行けるように頑張るんだ。 #叙々苑

ツイッターメディア

四街道ふるさとまつりで高校同級生をたまたま発見!! 18年ぶりだってのに全員あんま変わってないw

ツイッターメディア

セカンドストリートでX-girlのワンピが350円だったので、すかさず買ってしまった。次女、なかなか似合うやん!?

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

こないだの叙々苑で食した特選カルビ焼をご覧いただこう。 なんと一人前 5,184円。一枚1,000円w時給かなww とんでもなく美味でした。また食べに行けるように頑張るんだ。 #叙々苑

ツイッターメディア

四街道ふるさとまつりで高校同級生をたまたま発見!! 18年ぶりだってのに全員あんま変わってないw

ツイッターメディア

セカンドストリートでX-girlのワンピが350円だったので、すかさず買ってしまった。次女、なかなか似合うやん!?

ツイッターメディア