ハローハロー
ブログ投稿２回目の小山でございます。
花見の時期も過ぎ去り、ようやっと暖かくなってまいりましたね。
皆様はお花見できましたか？楽しい時間を過ごせていたら何よりです。

さてさて本題です。
今日は画像の扱い方に関する内容です。

いきなりですが、この２枚の画像を見比べて頂いて、画質に大きな違いはあるでしょうか？

…無いですね？
あるという方はとても目の良いお方。
今回は空気を読んで「そこまで大きな違いはない」ということにしておいてください。

…で！

この２枚の画像ですが、容量はなんと、上の画像は下のものの7倍ものサイズなのです！

実はこの２枚の画像、拡張子が違います。
画像は拡張子の設定により、同じ画像が重くも軽くもなります。
また、設定が適していない場合、最悪、画像が荒れてしまいます。
重くなれば表示されるまでお待たせしますし、荒れたりしたらせっかくの素敵な画像も台無しです。

ブログやSNSを通して画像をネット上に挙げる方には、是非とも知っておいて頂きたいです。
なぜなら画像が重ければそれだけ表示は遅くなり、表示されるのが遅いサイトは読まれづらいからです。

今回は一般的に誰もが扱う機会のあるjpg,gif,png-8,png-24の４つに絞ってお話し致します。

はじめに結論

風景写真は、jpg
アニメーションを使うのなら、gif
色数が少ないなら、png-8
その他イラスト画像などは、png-24

一概には言えませんが、私は大体こんな目安で使い分けてます。

忙しい方はここまで。
ここからはこの目安の理由を、それぞれの特徴などを挙げながら書いていきます。

各画像形式の特徴（一部）

色数というのは読んで字のごとく、色の数です。これが多いほど、細かな色の違いも表現できるため、より画像を詳細に、美しく表現できます。

透過性というのは、背景を透明にできるかどうかということです。
例えば透過性を持たないjpg画像は背景を特に設定していなくても、白色の背景が自動的に割り当てられます。
イラストを書いたり、ホームページのパーツを作成したご経験を持つ方はなんとなくお分かりになるのではないでしょうか？

特徴から言えること

まずアニメーションを画像に使いたい方はgif一択となります。
他の３つにはできないことですから、ここはgifの専売特許ですね。

また前項でも書いている通り、色数が多ければ細かい色の違いも表現できます。
つまり、jpgやpng-24は他と比べて、少しずつ色が変化していグラデーションや現実の写真も忠実に表現できます。

逆にいうとpng-8やgifは、色数が少ないため表現の幅は狭まります。が、ファイル自体は軽くなる傾向にあります。

しかしながら、gifよりjpgの方が軽くなるケースがあります。

グラデーションがきいているこの風景画像をjpg、gifでそれぞれ書き出したところ、gifでのサイズはjpgの3倍以上のサイズになりました。

いくつか要因はありますが、一つにjpgの記録方式はグラデーション画像に向けて作られている、というのがあります。
なのでこのような風景写真系のものはjpgだと軽くなる傾向にあります。

まとめ

そんなわけで結論としまして、

・風景写真はjpg
　→ グラデーションを忠実に表現でき、軽くなる傾向がある。透過性の必要も無し。
・アニメーションはgif
　→ 今回の４つのうちだとアニメーションができるのはgifのみ。
・色数が少ない普通の画像はpng-8
　→ jpg,png-24に比べ軽く、上で触れてませんが、gifに比べわずかに軽い。
・色数の多いイラスト画像、その他はpng-24
　→ 色を忠実に再現でき、透過性もあるので汎用的。

という感じで使い分けてます。

勿論、あくまで私なりの意見にはなります。
今回触れていない特徴などもあるので、そういった点でも一つの参考になればというものです。

いやはや長文にお付き合い頂きありがとうございました！
今回はこの辺で。ではでは！