専業ブロガー５年目のあずきです🐥
ブログ画像を編集・加工するうえで、まず必ず押さえておきたい…
jpg・png
という２つの「ファイル形式」の違いについて、その実践的なポイントをブログ初心者さん向けに解説していきます
ブログで使用する画像のファイル形式（拡張子）というのは、通常…
- jpg（ジェイペグ）
- png（ピング）
この２つを使い分けられれば、まずOKです
で、そもそもの前提として…
- jpg → 画質はそこそこだけど、容量が軽い！
- png → 画質は優れてるけど、容量が重い！
ということは、なんとなくご存じの方も多いかもしれません
ただ！
それ以外にも最低限のポイントを押さえておかないと、（あとから全部差し替えたりといった）面倒なことにもなりかねないんですね
具体的には、次の３点です
- 画像編集は「png」で行おう。「jpg」だと、保存のたびに画質が劣化していく
- 写真なら、最終的な保存は「jpg」で。「png」での写真保存は、容量面でNG
- 「jpg」は、透過処理に対応していない。透過処理するなら「png」で行おう
ちなみに…
「jpg」と「jpeg」は ”実質同じ” と捉えてしまってOKなので、当記事では「jpg」で統一して解説していきますね🐥
Contents
jpg（jpeg）とpngの違い＆超実践的な使い分けを初心者向けに１から解説【ブログの画像編集・加工】
ポイント１：画像編集は「png」で行おう。「jpg」だと、保存のたびに画質が劣化していく
「jpg」と「png」を使い分けるうえで、まず一番に知っておきたい大事なポイントが…
「jpg」のままで画像の保存を繰り返すと、画質が劣化してしまう
という点です
どういうことかというと、試しに「ペイント」を始めとした画像編集ソフトを使って…
↑ こちらのサンプル画像を、「jpg」で画像ファイルの保存を繰り返すと…
↑ こちらが「5回目」の保存後、文字色が若干くすんできているのがお分かりでしょうか？
さらに画像ファイルの保存を繰り返してみると…
↑「10回目」の保存後。 文字のくすみと周辺のにじみが、より顕著に現れています
つまり！
「jpg」のファイル形式で（編集してもしなくても）画像の保存を繰り返すと、「画質上よくない」ということ
ではどうすれば良いかというと、画像を編集する際には…
- まず最初に、「jpg」→「png」にファイル形式を変更する！
- その「png」の状態で、好きなだけ編集や保存を繰り返す！
- 完成したら、最後に「png」→「jpg」にファイル形式を戻す！
という手順で行えばOKです
ちなみに…
画像の編集が完了したら、最後にもう一度「jpg」へ戻す理由については、次の【ポイント２】で見ていきますね🐥
ポイント２：写真なら最終的な保存は「jpg」で。「png」での写真保存は容量面でNG
つづいて２つ目のポイントは…
写真なら、画像編集後の ”最終的な保存” は「jpg」がおすすめ
という点です
なぜかと言うと、画質の面では「jpg」よりも「png」の方が基本的には優れていますが、その分「画像の容量」がかなり大きくなってしまうんですね
これが例えば、写真ではなく…
↑ こうしたシンプルな「ロゴイラスト」などであれば、画像の容量に大差は出ません
ただし…
↑ こういった「写真」系の画像だと、仮にこの画像例であれば…
- jpg → 512KB
- png → 2.3MB
と、「png」は「jpg」と比べて5倍近くもの容量になってしまうんですね（1MB＝1024KB）
例えば！
上記の「2.3MB」という大容量の写真をブログにバシバシ載せていると、ページの表示速度に大きく影響してしまいます（ブログに載せる画像の容量は、せいぜい「500KB程度」までが一般的です）
とはいえ…
なるべく高画質でブログに載せたいから「png」を使いたい！
という気持ちもわかりますが、上記のような「写真」系であれば…
「jpg」でも「png」でも、実際の見栄えに違いはほとんどありません
なので結論…
- ブログ画像の編集は、保存による画質の劣化を防ぐために「png」で進める！
- ただし最終的な保存だけは、画像の容量を抑えるために「jpg」で完成させる！
という形が定石となります🐥
「jpg」は、透過処理に対応していない。透過処理は「png」で行おう
最後の３つ目のポイントは、ちょっと専門的な領域ですが…
「jpg」は透過処理に対応していないので、透過処理するなら「png」で行う
という点について
まず「透過処理」とは、例えば…
↑ このようなロゴ画像を…
↑ このような写真の上に重ねたときに、ロゴ画像側の背景を ”透明” な状態にしておかないと…
↑ このように白地の「背景部分」まで一緒に入ってしまいますが、この背景をあらかじめ「透過処理」しておけば…
↑ このように重ねることができるもの
ただし、この透過処理というのは「jpg」の画像ファイルには対応していないので、「png」に変えてから行うようにしましょう🐥