画像はJPGとPNGどっちを使う？ケース別の使い分けと、公開後に多い失敗
自社サイトに写真やバナーを載せるとき、「.jpg と .png、どっちで保存すればいいの？」と手が止まったことはないでしょうか。制作会社に任せている間は気にならなくても、公開後に自分たちで更新し始めると、意外とこの疑問にぶつかります。
今回は、サイトを組んで公開後の更新まで見ている立場から、JPGとPNGの使い分けをケース別に書いていきます。細かい仕組みの話は最小限にして、「この画像はどっちで保存するか」がその場で決められることを目指します。
先に結論：迷ったらこの表で決める
| 載せたい画像 | 使う形式 |
|---|---|
| 写真（人物・風景・店内・製品） | JPG |
| ロゴ・アイコン | PNG |
| 文字が入った図解・バナー | PNG |
| パソコンやスマホのスクリーンショット | PNG |
| 背景を透明にした切り抜き写真 | PNG（ただし重くなるので注意、後述） |
| iPhoneで撮った写真（.heic） | そのままアップロードできる場合あり（後述） |
ざっくり言えば「写真はJPG、それ以外はPNG」。これだけ覚えておけば大きく外しません。以下、なぜそうなるのかと、表に収まらない迷いやすいケースを補足します。
JPGとPNGの違いは「重さ」と「くっきり感」
2つの形式の違いは、突き詰めると次の2点です。
JPGは、人の目で気づきにくい部分を省いてファイルを軽くします。写真のように色が滑らかに変わる画像は、多少省いても違いがわからないので、軽さの恩恵が大きい。ただし、文字や細い線のように「はっきりした境目」がある画像では、境目のまわりがにじんだように見えることがあります。また、背景を透明にすることができません。
PNGは、情報を省かずに保存します。文字や線はくっきり残り、背景の透明もできます。その代わり、写真のように色数が多い画像をPNGで保存すると、JPGの何倍もの重さになることがあります。
つまり、「にじんでほしくないもの・透明が必要なもの」はPNG、「軽くしたい写真」はJPG。この2軸で判断すれば、ほぼすべてのケースが決まります。
画像の種類ごとの使い分け
写真はJPG。PNGにすると読み込みが遅くなる
店内写真、スタッフ写真、製品写真はJPGで問題ありません。「せっかくきれいに撮ったからPNGで」と考える方もいますが、画面で見て違いがわかることはまずなく、ファイルだけが重くなります。ページに写真が10枚、20枚と並ぶサイトでは、この差が読み込み時間にそのまま響きます。
ロゴ・アイコンはPNG。透明が必要になる場面が多い
ロゴは、色のついた背景の上に置いたり、ヘッダーで背景色が変わったりします。JPGだとロゴのまわりが白い四角で残ってしまうので、PNGで背景を透明にしておくのが基本です。
補足として、ロゴやアイコンについては、拡大しても粗くならない「SVG」という形式を制作会社側で使うことも多いです。ただしSVGは制作側の作業が前提になるので、ご自身で更新される場合はPNGで十分です。
文字が入った図解・バナーはPNG
料金表の画像、キャンペーンバナー、手順を説明する図など、文字が入ったものはPNGです。JPGにすると文字の輪郭がにじみ、小さい文字ほど読みづらくなります。
ただ、実務で判断が割れるのがここです。「写真の上に文字を載せたバナー」は、写真の部分を考えるとJPGにしたくなりますが、文字がにじむと安っぽく見えてしまいます。私は、文字が主役ならPNG、写真が主役で文字が少しだけならJPGで保存して、文字部分を実際に見てから決めるようにしています。
スクリーンショットはPNG
管理画面の操作説明などで使うスクリーンショットは、画面上の文字や細い線が多いのでPNGです。WindowsやMacの標準機能で撮ると最初からPNGになっていることが多いので、そのまま使えば大丈夫です。
背景を透明にした切り抜き写真は、一番迷うケース
「商品写真の背景を消して、サイトの背景になじませたい」という場合、透明が必要なのでPNGになります。ただし中身は写真なので、ファイルは非常に重くなりがちです。
このケースでは、「本当に透明が必要か」を一度考えてみることをおすすめします。サイトの背景が白なら、白背景で撮った（または白で塗った）JPGで見え方はほぼ同じで、重さは大きく減ります。どうしても透明が必要な場合は、次に書く新しい形式が候補になります。
WebP・AVIFという新しい形式について
最近は「WebP（ウェッピー）」「AVIF（エーブイアイエフ）」という形式を見かけることが増えました。どちらも、JPGより軽く、なおかつ透明も扱えるのが特徴です。先ほどの「透明な切り抜き写真」のような、JPGとPNGのどちらにしても中途半端になるケースを解消できます。
本記事執筆時点で、Google検索はJPEG・PNGに加えてWebPやAVIFも対象の画像形式として扱っていますし（Google 画像検索 SEO ベスト プラクティス）、WordPressもWebPは5.8から、AVIFは6.5からアップロードできるようになっています（WordPress 6.5 adds AVIF support／英語）。
ただし、ご自身で保存する形式としては、まだJPG・PNGでよいと考えています。理由は、手元の画像編集ソフトが対応していないことがあること、AVIFはサーバー側の環境によって使えない場合があることです。実務では「保存はJPG・PNG、サイト側の設定で自動的にWebPに変換する」という組み方が現実的で、これは制作会社側で用意する部分です。
iPhoneで撮った写真（.heic）はどうする？
見落とされがちなのがこれです。iPhoneで撮った写真は、標準設定だと拡張子が「.heic」という形式で保存されます。以前はWordPressにそのままアップロードできず、いったんJPGに変換する手間がありました。
本記事執筆時点では、WordPress 6.7以降で.heicをアップロードすると、サーバーが対応していれば自動的にJPGに変換されるようになっています（Automatic conversion of HEIC images to JPEG in WordPress 6.7／英語）。「サーバーが対応していれば」という条件がつくので、アップロードしてエラーが出る場合は、iPhone側の設定で「互換性優先」にして撮り直すか、制作会社に確認してください。
公開後によく起きる、形式まわりの失敗
最後に、サイト公開後の更新で実際に起きやすいものを3つ挙げます。
同じJPGを何度も保存し直す。
JPGは保存するたびに少しずつ画質が落ちます。トリミングや文字入れをやり直すたびにJPGで上書きしていると、気づいたときにはざらついた画像になっています。元の写真は別に残し、加工は元から毎回やり直すのが安全です。
写真をPNGで大量にアップロードする。
「きれいなほうが良い」と思ってPNGを選び続けると、ページが目に見えて遅くなります。ブログの写真は迷わずJPGで大丈夫です。
拡張子だけ書き換える。
ファイル名の「.png」を「.jpg」に手で変えても、中身は変わりません。形式を変えたいときは、画像編集ソフトや標準のプレビュー機能で「別名で保存」「書き出し」を使ってください。
まとめ
- 写真はJPG、ロゴ・文字入り画像・スクリーンショットはPNG
- 透明な切り抜き写真はPNGになるが、本当に透明が必要か一度考える
- WebP・AVIFは軽くて便利だが、ご自身での保存はまだJPG・PNGでよい。サイト側の自動変換は制作会社に相談
- iPhoneの.heicは、WordPress 6.7以降ならそのまま使える環境が増えている
形式の選び方は、一度覚えてしまえば迷わなくなります。それでも「このバナーはどっち？」と判断がつかないときは、実際に両方で保存して見比べるのが一番確実です。
