はい😰とてつもなくヤバいことになります、上記内容が頭に浮かんでいる方是非読んで下さい！
こんにちはサイト管理人の畜リーチャン太郎（@chantaro0829）です。
今回は画像のファイル形式について説明していきます。☞○○○○.jpgとか○○○○.pngこんな感じのやつです。後ろのアルファベットが拡張子と言います。
結論から言うと、ファイル形式（拡張子）意識せず画像保存するのはダメです。
例えばこの画像はこの保存形式で最適な画質と容量になるとか、又使用用途によって透過処理をするから、この形式で保存しなくてはダメとかがあります。
チャン太郎もブログで画像を多用します。説明用のイラストであったり、文章途中の箸休めで風景画の写真を入れてみたりと、画像は無くてはならないものです。
多用するからこそ注意したいところ。最適な保存形式でないと容量（ファイルの重さ）が積み重なってきてPCの使用環境にも影響してきます。
私も最初何も分かっていない時は、すべてJPEGのファイル形式で画像保存してました。『画質が綺麗』、『容量が軽い』と勝手なイメージがあったからです。
上記認識は風景画等の写真については合ってますが、全てに当てはまる訳ではないのです。
っていうことで続きは本文で説明していきます。
この記事でお伝えしたい内容
- 頻繁に使用する拡張子jpegとpngとgifの特徴
- 上記拡張子jpegとpngとgifの違い、使い分け
- フリーソフトによる拡張子の変換方法
- その他SVG、EPS、TIFF拡張子の特徴まとめ
それでは一緒に進めていきましょう。
この記事を読んで曖昧な知識を、確かな知識に変えていこう(^^)/
使用頻度が高い画像拡張子『jpeg』『png』『gif』の特徴（画質、重さ等）
『png』『jpeg』『gif』☞ほとんどこれらでは・・っていうぐらい使用されている画像の拡張子で、ほぼすべてのWebブラウザで対応してます。
一般的にラスタ画像、又はビットマップ画像と言って、ドット（１px）の正方形を縦横に並べた方式になっています。
点でできているので複雑な画像も対応できる。ただサイズ変更するとドットの配置に歪みが生じて、拡大したらよくわかるのですがギザギザになり見た目が汚くなる。
パソコンで画像を見た事ある人はなんとなく想像つくのではないでしょうか(*_*;
『jpeg』『png』『gif』について特徴、違い、使い分けをみていきましょう🐶
jpeg拡張子
jpeg形式はフルカラーの1677万画素が使用され、主に風景写真等グラデーションがある画像に向いています。
ファイルの拡張子は『jpg』『jpeg』2通りが使用されることが多いです。それは前者の『.jpg』が昔のMS-DOS時代※１.の名残りで、拡張子が３文字以内ルールを引き継いでいるから。
※１.MS-DOSという昔に普及したOSをwindowsが引き継いで拡張子が３文字になった。現在普及しているOSは4文字でも可能になっている。
どちらでも意味は同じなので、迷ったら使用割合の多い『.jpg』にしときましょう。
メリット
- 高い圧縮率で写真が劣化しない程度に容量を小さく調整できる。綺麗さ&容量小の両方を追求することができる。
デメリット
- 画像を保存する度に、画質がどんどん劣化していってしまう。
- 透過、半透過処理ができない
画像が劣化していくことに関しては、それは『非可逆圧縮』されているからです。それは何？っていうことで簡単に説明しますと・・
人が感じることのできない情報（細かい色使いとか）を大幅に捨てて圧縮してしまうということ。一旦捨ててしまったものは返ってこない方式となってます。二度とは戻らない😢
png拡張子
pngと一括りにされていますが、なんと実は『png-8』『png-24』『png-32』と３種類もあるのです。それぞれのメリット、デメリットまとめてみました。
png-8
| メリット |
|
|---|---|
| デメリット |
|
png-24
| メリット |
|
|---|---|
| デメリット |
|
png-32
| メリット | 上記PNG-24に加えて透明、半透明を使用できる最強仕様 |
|---|---|
| デメリット | 容量が最強に重たくなってしまう |
gif拡張子
GIFは古くからある拡張子でどんなブラウザにも対応でき、LZW圧縮という独自の方法で画像を圧縮します。png-8と同レベルで256色画素と使用できる色に制限があります。
メリット
- 色数の少ないイラストに向いている。
- ファイル容量が小さい
- 透明色が使用できる
- アニメーション動画を作ることができる
- 画像を保存しても画質が劣化しない
やっぱりアニメーション動画（パラパラ漫画）を作れるのがgifだけなので、これが一番の売りかなと思います。
デメリット
- 色数に制限がある為、グラデーション写真グラデーションには向かない
pngの存在があるおかげで、アニメーション以外出番がないのがデメリットかも😰
jpegとpngとgifの違い・使い分け
じゃー３つの拡張子はそれぞれの違い（特徴）から、どう使い分けていったらいいのか？ってことなんですけど・・
前章の内容のまとめからみていきましょう
結論としては
- グラデーションの写真 → 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とか・・
この記事を頭の片隅に入れつつ、実践で画像の見た目とファイル容量を意識しながら作業すると、『あぁそういうことか』みたいな感じでだんだん理解が深まっていくかと思います。
最後に文章は万能では無い！説明文には写真、イラストをじゃんじゃん使っていこう！
それでは今回はこの辺で(‘ω’)ノ
お付き合いありがとうございましたー
