file-extension-201912

画像編集

jpg(jpeg)とpngの違い!ファイル形式の「超実践的な使い分け」を初心者向けに解説【拡張子】



今回は、画像編集などをするなら必ず押さえておきたい…

ファイル形式
「jpg」「png」の違い

について、小難しい話は一切抜きにして「超実践的な使い分け」だけに絞って解説していきたいと思います

まずはじめに、ファイル形式(拡張子)は

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

この2つを使い分けられれば、まずOK。 一般的な用途であれば、ほかのファイル形式はぶっちゃけほぼ使わないと思います

で、大前提の知識として

  • jpg=画質はそこそこで、容量が軽め
  • png=画質は高くて、でも容量が重め

ということは、なんとなく知ってる人も多いかなと思います

ただ、それ以外にもいくつか大事なポイントを覚えたうえで「jpg」「png」を使い分けないと、わりと面倒なことになりかねません

具体的には、次の3つ

  • 画像編集はpngで! jpgだと、保存のたびに画質が劣化していく
  • 写真なら最終的な保存はjpgで! pngでの写真保存は、容量サイズがNG
  • jpgは、透過処理に対応していない。 透過処理はpngで!

ちなみに、

  • jpg
  • jpeg

この2つについては「実質同じ」と捉えて大丈夫なので、この記事では「jpg」で統一してお話していきますね

それじゃーさっそく見ていきましょー🐥

リクナビNEXT

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

ファイル形式「jpg」と「png」の超実践的な使い分け【初心者向け】

画像編集はpngで! jpgだと、保存のたびに画質が劣化していく

pc-work-202001_01

jpgpngを使い分けるうえで、まず1番に知っておきたい大事なポイントが…

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

です

どういうことかというと、

file-extension-sample-a_fp

↑ この画像を、jpgで保存(「上書き保存」でも「名前を付けて保存」でも)を繰り返すと…

file-extension-sample-a_05

↑ 5回目の保存後。 文字の周りがちょっと滲んで、文字自体も若干くすんできてます

file-extension-sample-a_10

↑ 10回目の保存後。 文字周りの滲みと、文字自体のくすみがより強く出てきてます

つまり、jpgの画像で(編集してもしなくても)保存を繰り返すと、「画質上よくない」ということ

なので、jpg画像を編集するなら

  1. まず必ず、「jpgpng」に変更して保存する!
  2. pngで、好きなだけ編集や保存を繰り返す!
  3. 完成したら、最後にjpgに戻す!

この流れで行うのがおすすめ。 これなら劣化は1回分だけで済むので、実質的な劣化は「ほぼゼロ」です

ちなみに最後にわざわざjpgに戻す理由は「容量を抑えるため」で、これから触れていきますね

写真なら最終的な保存はjpgで! pngでの写真保存は容量がNG

pc-work-202001_02

2つ目のポイントは、

写真なら、編集したら最終的な保存はjpgがおすすめ

ということ

画質面ではjpgよりもpngの方が上回ってるんですが、その分「容量サイズ」がかなり大きくなるんですね

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

file-extension-sample-a_fp

↑ このようなシンプルなロゴイラストなら、容量に大差は出ないんですが

file-extension-sample-b_1024j

↑ こういった写真画像の場合、jpgだと「512KB」

file-extension-sample-b_1024p

↑ これが、同じ画像でpngだと「2.3MB」。 jpgの約4.5倍にもなります(両方とも1024pxの場合)

例えばブログ記事などに写真を何十枚も入れるような場合、すべてpng画像を使ったりすると記事の読み込みも重たくなってしまいます

で、上記2枚の同じ画像を見てもわかる通り、写真ならjpgでもpngでもぶっちゃけ見栄えに実質的な差はないです

つまり、写真を編集するなら容量が軽いjpgで最終的に仕上げるのがおすすめ

なので結論、

  • 写真は、最終的にjpgで完成させる!
  • 編集するなら、最初と最後以外はpngで進める!

こんな感じですね🐥

リクナビNEXT

jpgは、透過処理に対応していない。透過処理はpngで!

pc-work-202001_03

3つ目のポイントは、やや専門的な領域…

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

です

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

file-extension-sample-a_fp

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

file-extension-sample-b_1024j

↑ このような写真に乗っけたときに…

file-extension-sample-mix-a

↑ ロゴ画像の背景を透明化(透過処理)してないと、白地背景がそのまま入ってしまいますが…

file-extension-sample-mix-b

↑ あらかじめ白地背景を「透過処理」していれば、このように重ねることができます

この透過処理のやり方は ↓ をどうぞ♪

gimp-transparent
GIMPで画像の背景を透明化させる方法を、初心者向けに優しく解説【透過処理】

続きを見る

で、本題に戻りますが「透過処理」はjpgでは対応していないので

透過処理するなら、pngに変えてから行いましょう

上記画像の例なら、この流れです

  1. ロゴ画像をpngに変えてから、白地背景を透過処理する!
  2. 透過させたロゴ画像を写真に重ねてから、最後にjpgで保存して完成!

今回の内容は以上となります

大変お疲れさまでした♪

あずき🐥

【おまけ】そのほかに、ブログやるなら知っておきたい画像編集テクニック【初心者向け】

pc-work-202001_08

今回のテーマ以外にも、ブログ運営していて「知っといてよかった!」と感じた実用的な画像編集のテクニックを優しく解説してます

具体的には…

  • リサイズ ←画像編集するなら真っ先に知っておきたい!
  • ファイル形式の使い分け ←同じく絶対に知っておきたい!
  • テキストの挿入、縁取りや影付き
  • 網掛けや枠線、矢印の挿入
  • 透過処理

などなど… ブログやるなら知っておいて損はない、本当に実践的なスキルばかり

例えば、「ブログのサムネや解説用の画像」の編集をしたいけど…

  • 完全初心者で、まずなにからどうすればいいのかわからない…
  • 難しいことはいいから、「これだけは知っておけ!」っていうのを知りたい…

こんな方におすすめです

TOPページは ↓ から♪

image-edit-top-202001-ec
ブログ運営だけに特化した、「画像編集」の完全初心者向けテクニックTOP【超実用】

続きを見る

リクナビNEXT

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-画像編集

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.