画像のトラブルは、写真そのものより「形式」が原因のことがよくあります。iPhoneの写真が応募フォームに添付できない。サイトから保存した画像が.webpで、写真ビューアーで開けない。「ちょっと変換しただけ」なのに、ロゴの周りに白い四角ができてしまう。
このガイドでは、JPG・PNG・WebP・AVIF・HEICがそれぞれ何に向いているか(GIFとSVGも簡単に)、どこでつまずきやすいか、ホームページ・SNS投稿・印刷・メールにはどれを選べばいいかを説明します。
ほとんどを説明できる2つの考え方
非可逆圧縮と可逆圧縮。 非可逆の形式(JPG、そしてWebP・AVIF・HEICの非可逆モード)は、目に気づきにくい細部を捨てます。だから1,200万画素の写真が数MBに収まります。可逆の形式(PNG、そしてWebP・AVIFの可逆モード)はすべてのピクセルをそのまま保存します。スクリーンショットや図には最適ですが、写真だとファイルが非常に大きくなります。
透過(アルファ)。 PNG・WebP・AVIF・HEICは透ける部分を保存できるので、ロゴをどんな背景にも重ねられます。JPGはできません。GIFは「透明か不透明か」だけで、縁をなめらかにできません。
「可逆が必要か?」「透過が必要か?」の2つを考えれば、たいていの選択は自然に決まります。
形式ごとの特徴
JPG(JPEG)
どこでも通用する写真の形式です。スマホ、パソコン、ブラウザ、プリント機、アップロードフォーム、どれでも受け付けます。非可逆で、なめらかなグラデーションや実写の質感が得意ですが、透過とアニメーションには対応していません。
弱点はくっきりした輪郭です。文字や細い線、ベタ塗りの図の周りに、もやっとした「にじみ」が出て、画質を下げるほど目立ちます。また、JPGで編集して保存するたびに少しずつ劣化します。1回なら分かりませんが、10回ほど繰り返すと見えてきます。
PNG
可逆圧縮で、透過に完全対応しています。スクリーンショット、図、ロゴ、文字の多い画像、これからも編集するファイルに向いています。対応もどこでも問題ありません。
難点はファイルサイズです。写真をPNGで保存すると、同じ写真のきれいなJPGより何倍も大きくなることが多く、見た目の得はありません。15MBの「photo.png」なら、ほぼ間違いなくJPGにすべきだったファイルです。
WebP
Web向けに作られた形式で、非可逆・可逆の両方に対応し、透過とアニメーションも使えます。現在の主要ブラウザはすべてWebPを表示できるので、多くのサイトが画像をWebPで配信しています。同じくらいの見た目のJPGと比べると、非可逆WebPはおおむね4分の1〜3分の1ほど小さくなりますが、画像によって差は大きいです。
注意点:サイトで「名前を付けて画像を保存」すると.webpファイルになり、古いデスクトップソフトや文書ソフト、アップロードフォームの中にはまだ受け付けないものがあります。ファイルが壊れているのではなく、相手側がその形式を知らないだけです。
AVIF
AV1という動画コーデックをもとにした新しい形式です。たいていWebPよりさらに圧縮率が高く、透過・アニメーション・HDRに対応し、低画質のJPGに出がちな階段状のグラデーションも出にくいです。現在の主要ブラウザは表示できます(Safariは16.4以降)が、古い端末や多くの編集・文書ソフトは開けず、ファイルの作成にも時間がかかります。
HEIC(HEIF)
iPhoneの標準の写真形式です。効率がよく、同等のJPGの半分ほどのサイズになることが多く、深度情報などのデータも持てます。ただ、Apple製品以外では最もトラブルになりやすい形式です。Windowsでは追加の拡張機能がないと開けない場合があり、ほとんどのブラウザは表示できず、多くのアップロードフォームが受け付けません。
これから撮る写真をJPGにしたい場合は、iPhoneの「設定」→「カメラ」→「フォーマット」で「互換性優先」を選びます。撮影済みの写真は、共有する前に変換しましょう。
GIFとSVGについて簡単に
GIFは1コマあたり256色までしか使えないため、写真は粗く見え、ファイルも大きくなります。残っている強みは、動くGIFがメールやチャットを含めほとんどどこでも再生されることです。
SVGはコードで描かれたベクター画像なので、どのサイズでもくっきり表示されます。ホームページのロゴやアイコンにぴったりです。ただし多くのSNSやアップロードフォームは受け付けず、フォントが埋め込まれていないSVGは別のパソコンで文字のフォントが変わることがあります。
すぐ選べる早見表
| 保存するもの | ベスト | これもOK | 避けたい |
|---|---|---|---|
| どこにでも共有・アップロードする写真 | JPG | — | PNG(大きすぎる)、HEIC(開けない場合あり) |
| 自分のホームページの写真 | WebPまたはAVIF | JPG | PNG |
| 文字入りのスクリーンショット | PNG | 可逆WebP | 低画質JPG |
| ホームページのロゴ・アイコン | SVG | PNG、WebP | JPG(透過なし) |
| アップロード・書類用のロゴ | PNG(透過) | — | SVG(受け付けない所が多い) |
| メール・チャット用の短いアニメ | GIF | — | 動くWebP(再生されない場合あり) |
| 印刷する写真 | 高画質JPG | PNG | WebP、AVIF、HEIC |
| メールの添付 | JPG | 図ならPNG | HEIC、WebP、AVIF |
使う場所で選ぶ
自分のホームページやネットショップ。 重い画像はページを遅くします。写真や図の多くはWebPにしましょう。JPG WebP 変換とPNG WebP 変換は複数枚をまとめて変換でき、透過も保たれます。画質は80%前後から始めるのがおすすめです。先にサイズを小さくしてください。1,200ピクセルの枠に4,000ピクセルの写真を載せるのは、形式に関係なく無駄です。画像 リサイズで縮めてから変換しましょう。ロゴやアイコンはSVGのままで大丈夫です。
SNSの投稿。 写真はJPG、文字入りの画像はPNGでアップロードしましょう。SNSはアップロードされた画像をどうせ再圧縮するので、ほどよいサイズのきれいなJPG(例:フィード投稿なら横1080ピクセル)のほうが、SNS側で縮められる巨大なファイルより見栄えがよくなりがちです。ここではWebPやAVIFにする利点はありません。
印刷。 印刷所が求める解像度のまま、高画質JPG(90%以上)かPNGを送りましょう。WebP・AVIF・HEICを受け付けない印刷所やプリント機はまだ多いです。ロゴはSVG PNG 変換で4倍や指定した横幅で書き出します。ベクターはどのサイズでもくっきり描き直されます。
メール。 どのメールアプリでも表示できるJPGとPNGにしましょう。HEICの添付は、相手側で開けないファイルになることがよくあります。スマホの写真を何枚も送るなら先に圧縮を。画面で見るだけなら75〜80%のJPGで十分です。
変換で得るもの・失うもの
変換そのものは簡単です。コツは、どの方向が損になるかを知っておくことです。
- 非可逆 → 可逆(JPGをPNGに) しても、失われた細部は戻りません。今の画質をそれ以上劣化しないよう固定するだけで、ファイルは大きくなります。JPG PNG 変換は画質を直すためではなく、編集の前に使うと便利です。
- 非可逆 → 非可逆(HEIC・WebP・AVIFをJPGに) は、もう一度圧縮することになります。画質85〜92%ならほぼ見分けられませんが、何度も行ったり来たり変換せず、いつも元のファイルから始めましょう。
- 透過のある画像 → JPG は、透明部分がふつう白で塗りつぶされます。「ロゴの周りの白い四角」はこれが原因です。ロゴはPNGかWebPにしましょう。
- 動く画像 → 静止画 は最初のコマだけが残ります。動くWebPはJPG1枚になります。
- ベクター → ピクセル(SVGをPNGに) は、サイズを十分大きくすれば安全です。高解像度の画面でくっきり見せるなら2倍を選びましょう。
困りごと別の使えるツール:
- 開けないiPhoneの写真:HEIC JPG 変換は複数枚をまとめてZIPで変換します(しっかり編集するならPNGに)。初回はデコーダーを読み込むため少し時間がかかります。
- サイトから保存した.webpや.avif:WebP JPG 変換またはAVIF JPG 変換。AVIFはブラウザが読み込むので、ある程度新しいブラウザが必要です。
- 大きすぎるPNGの写真:PNG JPG 変換でたいてい何分の一かになります。
- JPG・PNG・WebPを画質スライダー付きで自由に:画像 形式変換。
- とにかく重いファイル:画像 圧縮はJPG・PNG・WebPをまとめて軽くし、長辺を1920pxなどに制限でき、位置情報(EXIF)も削除します。
- 動かしたい写真が数枚:GIF作成はJPG・PNG・WebPの画像から動くGIFを作ります。
どれもブラウザ内で動くので、写真がアップロードされることはありません。
よくある失敗
- 「画質のため」に写真をPNGで保存する。 ファイルがずっと大きくなるだけで、見た目は変わりません。高画質JPGにしましょう。
- ロゴをJPGに変換する。 透過していた背景が白になります。ロゴはPNG・WebP・SVGのままにしましょう。
- JPGをPNGにすればぼやけやブロックノイズが直ると思う。 失われた細部は戻りません。
- 同じJPGを何度も保存し直す。 元のファイルを残し、毎回そこから書き出しましょう。
- ホームページに巨大な画像を載せる。 実際の表示サイズに縮めてからWebPにしましょう。
- Windowsの人にHEICを送る。 先にJPGに変換するか、iPhoneを「互換性優先」にしましょう。
よくある質問
WebPはJPGより優れていますか?
自分のホームページなら、たいていはそうです。同じくらいの画質でファイルが小さくなりやすく、透過にも対応しています。人にファイルを送る、フォームにアップロードする、印刷するといった場合は、どこでも開けるJPGがまだ安全です。
WindowsでHEICの写真が開けないのはなぜですか?
WindowsではHEICが標準で対応していない場合があり、ほとんどのブラウザやアップロードフォームも扱えません。JPGに変換すれば解決し、iPhoneのカメラを「互換性優先」にすれば、これから撮る写真では起きなくなります。
HEICをJPGに変換すると画質は落ちますか?
厳密にはもう一度圧縮されますが、JPGの画質を90%前後と高めにすれば、違いはほとんど分かりません。JPGのほうがHEICよりファイルは大きくなるのが普通です。
2026年、ホームページにAVIFを使ってもいいですか?
訪問者が新しいブラウザを使っているなら、よい選択です。WebPより小さくなることが多いからです。ただ、よりシンプルで安全な基本はやはりWebPで、古い端末向けにJPGやWebPの代わりの画像を用意しておくと安心です。
ロゴにいちばん向いている形式は?
自分のホームページではSVG、それ以外では透過PNG、印刷やアップロード用にはSVGから大きく書き出したPNGがおすすめです。