MV Tools

画像形式チュートリアル

HEIC・WebP・AVIF・PNG・JPG：画像形式の選び方

常に優れた形式を決めつけず、用途、透明度、実測した出力から選ぶための実用ガイドです。

MV Tools 編集チーム更新日 約 9 分で読めます

画像形式変換を開く

形式の順位ではなく利用先から選ぶ

まず、Web サイト、アップロードフォーム、メッセージ、画像編集、印刷、長期保存のどこでコピーを開くか決めます。容量より先に、利用先の対応、透明度、再編集の必要性を確認します。納品コピーを開いて確認するまで元ファイルは残します。

万能の勝者を決めず、同じテスト画像で比較します。透明な余白、グラデーション、単色、小さい文字、細線により、各形式の違いを確認できます。記載する容量はこの画像と設定に限った値です。

透明な外周で JPG の重要な制限を確認し、グラデーション、小さい文字、1 px の線で見た目の変化を点検します。
透明な外周で JPG の重要な制限を確認し、グラデーション、小さい文字、1 px の線で見た目の変化を点検します。

5 形式の一般的な役割

JPG は写真など不透明画像の互換性重視コピーです。PNG はスクリーンショット、ロゴ、UI の透明度と可逆なピクセル情報を保ちますが、大きくなる場合があります。WebP は透過を含む非可逆・可逆の Web 配信に使えます。AVIF は利用先を試したうえで効率的な Web 配信候補になります。HEIC/HEIF は撮影・保存元として扱い、相手が受け付けない場合に互換コピーを作ります。

形式一般的な用途選択前の確認
JPG写真と互換性重視の不透明コピー透過不可。輪郭と再圧縮劣化を確認。
PNG透過グラフィック、画面画像、可逆な細部写真では大きくなりやすい。
WebP現代的な Web の写真や透過グラフィック公開、編集、再配布の全工程を確認。
AVIF実機確認後の効率的な Web 配信変換に時間がかかる場合があり、工程全体の確認が必要。
HEIC / HEIFカメラ撮影または保持する元ファイルすべてのフォーム、編集ソフト、相手が対応するとは限らない。

条件を固定して WebP に変換する

上の画像形式変換を開きます。処理はブラウザー内だけで行われます。日本語 PNG を選び、WebP、品質 82% とし、最大幅と高さは 0 のままにして 1200 × 800 を維持します。

  1. 元画像のコピーを選ぶ。

    mvtools-format-sample.png を選び、元ファイルは別に保管します。

  2. WebP と品質を設定する。

    82% はこの例を再現する設定で、万能の推奨値ではありません。

  3. 寸法を維持する。

    利用先が少ない画素数を必要とする場合以外は両方 0 にします。

  4. 一度だけ変換する。

    端末内のワーカーが処理し、結果を変換リストに追加します。

図 1 · WebP 変換は 1200 × 800 を維持し、エンコーダー設定を 82% にします。
図 1 · WebP 変換は 1200 × 800 を維持し、エンコーダー設定を 82% にします。

実測結果を正しく読む

100 KB の PNG は 30 KB の WebP になり、70% 小さく、1200 × 800 を維持しました。単色と透明部分が多い図は、細部の多い写真とは異なる結果になります。

サムネイルだけでなくダウンロードを開きます。透明な縁、タイトル、1 px 線、グラデーションを確認し、実際の利用先でも試します。

図 2 · 実際のブラウザー処理で 30 KB の WebP が生成され、この元画像より 70% 小さくなりました。
図 2 · 実際のブラウザー処理で 30 KB の WebP が生成され、この元画像より 70% 小さくなりました。
  • 実際のアプリやサービスで開いて表示できるか確認する。
  • 明るい背景と暗い背景の両方で透過を確認する。
  • グラデーションの段差と小さい文字のにじみを探す。
  • 寸法、向き、拡張子を確認する。

JPG を選ぶなら背景を意図して決める

JPG は透明ピクセルを保存できません。この例では背景を #F1F5F9、品質を 86% にし、48 KB、元画像より 52% 小さい結果になりました。別の背景色ならピクセルと容量も変わる可能性があります。

複数の背景に載せるロゴや切り抜きには JPG を使いません。透明度がデザインの一部なら PNG、WebP、AVIF を選びます。

図 3 · JPG にはアルファチャンネルがないため、透明部分を #F1F5F9 で意図的に塗りつぶします。
図 3 · JPG にはアルファチャンネルがないため、透明部分を #F1F5F9 で意図的に塗りつぶします。

HEIC を残し、必要なとき互換コピーを作る

HEIF はコンテナで、HEIC は一般に HEVC で符号化した HEIF 画像を示します。価値のある撮影ファイルは元として残します。利用先が拒否したらコピーを変換し、向き、色、寸法、メタデータに依存する情報を確認します。

60 KB の日本語サンプルはブラウザー内でデコードされ、1200 × 800 の 48 KB JPG になりました。この結果は本サンプルと本ブラウザーだけを示し、すべての HEIC 変種や破損ファイルを保証しません。

図 4 · 60 KB の HEIC を端末内でデコードし、48 KB の JPG コピーを生成しました。
図 4 · 60 KB の HEIC を端末内でデコードし、48 KB の JPG コピーを生成しました。

出力を比較して選択理由を残す

再エンコード後は PNG 126 KB、WebP 30 KB、AVIF 34 KB、JPG 48 KB でした。新しい PNG が最適化済みの元 PNG より大きい点は、形式変換が自動的な圧縮ではないことを示します。見た目と利用先を試して決めます。

Web では対象者や配信環境に応じて確実なフォールバックを用意します。編集や保存では、非可逆コピーを繰り返し変換しないようにします。

確認項目合格条件
利用先の対応実際のサービスが正しく受信、表示、再配布する。
見た目利用サイズで文字、輪郭、階調、細部が許容できる。
透明度必要なアルファが残る、または JPG 背景を意図して選んだ。
復元性元ファイルが残り、納品コピーが唯一のマスターではない。

上限とローカル処理を理解する

画像形式変換は一度に最大 20 枚の HEIC、HEIF、JPG、PNG、WebP、AVIF を受け付け、1 枚 30 MB、4,000 万画素までです。JPG、PNG、WebP、AVIF を出力し、縮小時は縦横比を保ち、画像をサーバーへアップロードしません。

形式のデコードとエンコードはブラウザー機能にも左右されます。画像圧縮は JPG、PNG、WebP を一時アップロードして処理する別の流れで、通常 30 分後に削除します。

よくある質問

常に最小になる画像形式はありますか？

ありません。内容、寸法、透明度、エンコーダー、品質設定で変わるため、自分の代表画像で測定します。

JPG は透明背景を維持できますか？

できません。PNG、WebP、AVIF を使うか、選んだ背景色へ意図的に統合します。

JPG を作った後に HEIC を削除すべきですか？

通常は削除しません。保存や編集の価値がある元ファイルを残し、JPG は配信用コピーとして管理します。