ブログ運営

jpeg、pngその他よく使う画像ファイルの拡張子の特徴、違いについて

記事のタイトル

 

ネコ氏
ネコ氏
ブログでイラストや写真の画像をよく載せるが、その画像のファイル形式(拡張子)を意識したことがない。このまま何も考えずにやり続けたらこの先ヤバいことになるのだろうか?

 

はい😰とてつもなくヤバいことになります、上記内容が頭に浮かんでいる方是非読んで下さい!

 

こんにちはサイト管理人の畜リーチャン太郎(@chantaro0829)です。

今回は画像のファイル形式について説明していきます。☞○○○○.jpgとか○○○○.pngこんな感じのやつです。後ろのアルファベットが拡張子と言います。

結論から言うと、ファイル形式(拡張子)意識せず画像保存するのはダメです。

例えばこの画像はこの保存形式で最適な画質と容量になるとか、又使用用途によって透過処理をするから、この形式で保存しなくてはダメとかがあります。

チャン太郎もブログで画像を多用します。説明用のイラストであったり、文章途中の箸休めで風景画の写真を入れてみたりと、画像は無くてはならないものです。

多用するからこそ注意したいところ。最適な保存形式でないと容量(ファイルの重さ)が積み重なってきてPCの使用環境にも影響してきます。

私も最初何も分かっていない時は、すべてJPEGのファイル形式で画像保存してました。『画質が綺麗』、『容量が軽い』と勝手なイメージがあったからです。

上記認識は風景画等の写真については合ってますが、全てに当てはまる訳ではないのです。

っていうことで続きは本文で説明していきます。

 

この記事でお伝えしたい内容

  • 頻繁に使用する拡張子jpegとpngとgifの特徴
  • 上記拡張子jpegとpngとgifの違い、使い分け
  • フリーソフトによる拡張子の変換方法
  • その他SVG、EPS、TIFF拡張子の特徴まとめ

 

それでは一緒に進めていきましょう。

この記事を読んで曖昧な知識を、確かな知識に変えていこう(^^)/

 

使用頻度が高い画像拡張子『jpeg』『png』『gif』の特徴(画質、重さ等)

4色の風車に拡張子名が書いてある

『png』『jpeg』『gif』☞ほとんどこれらでは・・っていうぐらい使用されている画像の拡張子で、ほぼすべてのWebブラウザで対応してます。

一般的にラスタ画像、又はビットマップ画像と言って、ドット(1px)の正方形を縦横に並べた方式になっています。

点でできているので複雑な画像も対応できる。ただサイズ変更するとドットの配置に歪みが生じて、拡大したらよくわかるのですがギザギザになり見た目が汚くなる。

パソコンで画像を見た事ある人はなんとなく想像つくのではないでしょうか(*_*;

 

『jpeg』『png』『gif』について特徴、違い、使い分けをみていきましょう🐶

 

jpeg拡張子

jpeg形式はフルカラーの1677万画素が使用され、主に風景写真等グラデーションがある画像に向いています。

ファイルの拡張子は『jpg』『jpeg』2通りが使用されることが多いです。それは前者の『.jpg』が昔のMS-DOS時代※1.の名残りで、拡張子が3文字以内ルールを引き継いでいるから。

※1.MS-DOSという昔に普及したOSをwindowsが引き継いで拡張子が3文字になった。現在普及しているOSは4文字でも可能になっている。

どちらでも意味は同じなので、迷ったら使用割合の多い『.jpg』にしときましょう。

メリット

  • 高い圧縮率で写真が劣化しない程度に容量を小さく調整できる。綺麗さ&容量小の両方を追求することができる。

デメリット

  • 画像を保存する度に、画質がどんどん劣化していってしまう。
  • 透過、半透過処理ができない

画像が劣化していくことに関しては、それは『非可逆圧縮』されているからです。それは何?っていうことで簡単に説明しますと・・

人が感じることのできない情報(細かい色使いとか)を大幅に捨てて圧縮してしまうということ。一旦捨ててしまったものは返ってこない方式となってます。二度とは戻らない😢

 

png拡張子

pngと一括りにされていますが、なんと実は『png-8』『png-24』『png-32』と3種類もあるのです。それぞれのメリット、デメリットまとめてみました。

png-8

メリット
  • 256色の画素で、色数の少ないイラスト向けで容量も軽い
  • jpegより輪郭を綺麗に作ることができる
  • gifと同レベルの保存形式で透明色が使用できる
  • 保存による画質劣化もしない
デメリット
  • 256色と少ない画素なので、グラデーション写真には向かない
  • 半透明色が使用できない

 

png-24

メリット
  • 1677万色の画素で、グラデーション写真に向いている
  • 保存するたびに画質は劣化しないので、綺麗な状態が保てる
デメリット
  • 容量が重たくなる(jpegより重たい)
  • 透明、半透明色が使用できない

 

png-32

メリット 上記PNG-24に加えて透明、半透明を使用できる最強仕様
デメリット 容量が最強に重たくなってしまう

 

gif拡張子

GIFは古くからある拡張子でどんなブラウザにも対応でき、LZW圧縮という独自の方法で画像を圧縮します。png-8と同レベルで256色画素と使用できる色に制限があります。

メリット

  • 色数の少ないイラストに向いている。
  • ファイル容量が小さい
  • 透明色が使用できる
  • アニメーション動画を作ることができる
  • 画像を保存しても画質が劣化しない

やっぱりアニメーション動画(パラパラ漫画)を作れるのがgifだけなので、これが一番の売りかなと思います。

デメリット

  • 色数に制限がある為、グラデーション写真グラデーションには向かない

pngの存在があるおかげで、アニメーション以外出番がないのがデメリットかも😰

 

jpegとpngとgifの違い・使い分け

jpeg、png、gifが記載されている

じゃー3つの拡張子はそれぞれの違い(特徴)から、どう使い分けていったらいいのか?ってことなんですけど・・

前章の内容のまとめからみていきましょう

結論としては

  • グラデーションの写真 → jpeg
  • イラスト、透明・半透明色の画像 → png
  • アニメーション → gif

グラデーション写真は、綺麗さとファイル容量のバランスからjpegです。png-24は綺麗ですが容量がクソ重いです。

輪郭が特にしっかりとした、ベタ塗のイラストにはpngをチョイスしましょう。gifでも対応可能なのですが、pngの方が透明・半透明両方に対応してますし汎用性が高いからです。

やっぱりgifはアニメーションのみでいっときましょう。

 

無料ソフトによるjpegとpngの変換方法

絵具で壁を塗り替えていく

 

以前フリーの画像圧縮ソフトとして紹介しましたが、『I LOVE IMG』を使用しても良いですし、ペイントの編集画面で開いて拡張子を変更して保存する方法でも良いです。

jpegからpngとgifへ、またはその逆にも自由自在に変換できますので便利です。

記事のタイトル
頭に入れておきたい♪ブログでの画像圧縮とサイズ変更方法について。ブログで使用している画像の圧縮・サイズ変更の方法、又実施するためのフリーソフトの紹介をメインに説明していきます。...

 

その他画像拡張子一覧

あまり使用しないですがちょこちょこ出現しますので、はてな?とならないように知識としてもっておく程度良いと思います。

TIFF デジタルカメラなど容量の大きな画像で用いられる場合が多い。ただブログなどWeb上では使用できない形式です。正直出番があまり無し
BMP Microsoft Windows用につくられたファイル形式。圧縮処理がされていないため容量が大きく、Web上では使用できない形式。
SVG フリー素材の保存形式で見かけます。ベクタ形式で画像が作られています。画像がドットpxでは無く計算式で直線、曲線、色を作り出しますので、拡大した時に輪郭部がギザギザにならずに綺麗です。ただ複雑な写真には、計算式がついていけないので使用できない
EPS これも上記と同様でベクタ形式になります。印刷物に強いが、SVGみたいにWebでは対応してないです。

 

jpeg、pngみたいにドットpxで表現するラスタ形式以外に、ベクタ形式っていうのもあるだなぁ〜ぐらいに頭に入れておくのがいいかも

 

まとめ:使用する画像は、拡張子の特徴に合ったものを選ぼう

長々と話してきましたが、ズバリ!取り扱う画像を見極めて、綺麗さとファイル容量のバランスが取れた拡張子を使用していこうっていうことですね。

複雑な写真に向いている保存形式はjpegとか、シンプルなベタ塗イラストにはpngとか・・

この記事を頭の片隅に入れつつ、実践で画像の見た目とファイル容量を意識しながら作業すると、『あぁそういうことか』みたいな感じでだんだん理解が深まっていくかと思います。

最後に文章は万能では無い!説明文には写真、イラストをじゃんじゃん使っていこう!

 

それでは今回はこの辺で(‘ω’)ノ

お付き合いありがとうございましたー

 

こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA