WORDPRESS

jpg(jpeg)とpngの違い&超実践的な使い分けを初心者向けに1から解説【ブログの画像編集・加工】

jpg(jpeg)とpngの違い&超実践的な使い分け
 

専業ブロガー5年目のあずきです🐥

 

ブログ画像を編集・加工するうえで、まず必ず押さえておきたい…

jpg・png

という2つの「ファイル形式」の違いについて、その実践的なポイントをブログ初心者さん向けに解説していきます

 



 

ブログで使用する画像のファイル形式(拡張子)というのは、通常…

  • jpg(ジェイペグ)
  • png(ピング)

この2つを使い分けられれば、まずOKです

ほかのファイル形式は、ぶっちゃけほぼ使わないよ!
 

で、そもそもの前提として…

  • jpg → 画質はそこそこだけど、容量が軽い!
  • png → 画質は優れてるけど、容量が重い!

ということは、なんとなくご存じの方も多いかもしれません

 

ただ!

それ以外にも最低限のポイントを押さえておかないと、(あとから全部差し替えたりといった)面倒なことにもなりかねないんですね

 

具体的には、次の3点です

  1. 画像編集は「png」で行おう。「jpg」だと、保存のたびに画質が劣化していく
  2. 写真なら、最終的な保存は「jpg」で。「png」での写真保存は、容量面でNG
  3. 「jpg」は、透過処理に対応していない。透過処理するなら「png」で行おう

ちなみに…

「jpg」と「jpeg」は ”実質同じ” と捉えてしまってOKなので、当記事では「jpg」で統一して解説していきますね🐥

ということで、さっそく見ていこー!

jpg(jpeg)とpngの違い&超実践的な使い分けを初心者向けに1から解説【ブログの画像編集・加工】

ポイント1:画像編集は「png」で行おう。「jpg」だと、保存のたびに画質が劣化していく

WordPress ヘッダー b-01

「jpg」と「png」を使い分けるうえで、まず一番に知っておきたい大事なポイントが…

「jpg」のままで画像の保存を繰り返すと、画質が劣化してしまう

という点です

 

どういうことかというと、試しに「ペイント」を始めとした画像編集ソフトを使って…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-1-01

↑ こちらのサンプル画像を、「jpg」で画像ファイルの保存を繰り返すと…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-1-02

↑ こちらが「5回目」の保存後、文字色が若干くすんできているのがお分かりでしょうか?

文字の周りも、若干にじんできてるね
 

さらに画像ファイルの保存を繰り返してみると…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-1-03

↑「10回目」の保存後。 文字のくすみと周辺のにじみが、より顕著に現れています

 

つまり!

「jpg」のファイル形式で(編集してもしなくても)画像の保存を繰り返すと、「画質上よくない」ということ

 

ではどうすれば良いかというと、画像を編集する際には…

  1. まず最初に、「jpg」→「png」にファイル形式を変更する!
  2. その「png」の状態で、好きなだけ編集や保存を繰り返す!
  3. 完成したら、最後に「png」→「jpg」にファイル形式を戻す!

という手順で行えばOKです

これなら劣化は「1回分」だけで済むから、実質的な画質の低下は「ほぼゼロ」だよ!
 
 

ちなみに…

画像の編集が完了したら、最後にもう一度「jpg」へ戻す理由については、次の【ポイント2】で見ていきますね🐥

 

ポイント2:写真なら最終的な保存は「jpg」で。「png」での写真保存は容量面でNG

WordPress ヘッダー b-02

つづいて2つ目のポイントは…

写真なら、画像編集後の ”最終的な保存” は「jpg」がおすすめ

という点です

 

なぜかと言うと、画質の面では「jpg」よりも「png」の方が基本的には優れていますが、その分「画像の容量」がかなり大きくなってしまうんですね

 

これが例えば、写真ではなく…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-2-01

↑ こうしたシンプルな「ロゴイラスト」などであれば、画像の容量に大差は出ません

むしろ、「png」の方が軽くなるケースもあるよ!
 

ただし…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-2-02

↑ こういった「写真」系の画像だと、仮にこの画像例であれば…

  • jpg → 512KB
  • png → 2.3MB

と、「png」は「jpg」と比べて5倍近くもの容量になってしまうんですね(1MB=1024KB)

同じサイズ(横幅1024px)でも、これだけの差が出ちゃうよ!
 

例えば!

上記の「2.3MB」という大容量の写真をブログにバシバシ載せていると、ページの表示速度に大きく影響してしまいます(ブログに載せる画像の容量は、せいぜい「500KB程度」までが一般的です)

 

とはいえ…

なるべく高画質でブログに載せたいから「png」を使いたい!

という気持ちもわかりますが、上記のような「写真」系であれば…

「jpg」でも「png」でも、実際の見栄えに違いはほとんどありません

 

なので結論…

  1. ブログ画像の編集は、保存による画質の劣化を防ぐために「png」で進める!
  2. ただし最終的な保存だけは、画像の容量を抑えるために「jpg」で完成させる!

という形が定石となります🐥

 

「jpg」は、透過処理に対応していない。透過処理は「png」で行おう

WordPress ヘッダー b-03

最後の3つ目のポイントは、ちょっと専門的な領域ですが…

「jpg」は透過処理に対応していないので、透過処理するなら「png」で行う

という点について

 

まず「透過処理」とは、例えば…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-3-01

↑ このようなロゴ画像を…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-3-02

↑ このような写真の上に重ねたときに、ロゴ画像側の背景を ”透明” な状態にしておかないと… 

jpg(jpeg)とpngの違い&超実践的な使い分け 1-3-03

↑ このように白地の「背景部分」まで一緒に入ってしまいますが、この背景をあらかじめ「透過処理」しておけば…

jpg(jpeg)とpngの違い&超実践的な使い分け 1-3-04

↑ このように重ねることができるもの

 

ただし、この透過処理というのは「jpg」の画像ファイルには対応していないので、「png」に変えてから行うようにしましょう🐥

 
 

人気記事

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS