画像とファイルの道具箱

GUIDE

画像の容量を小さくする前に：JPEG・PNG・WebPと目標KBの考え方

更新日：2026年09月13日

画像の容量が上限を超えたとき、画質の数値だけを下げても十分に小さくなるとは限りません。必要な寸法、透過の有無、保存先で扱える形式を順に確認します。

保存形式の選び方

このツールの保存形式 確認する点
JPEG 透明な部分は白背景になります。透過が必要な素材には選びません。
PNG 透過を残したい場合の候補です。本ツールでは画質設定や目標容量の指定に対応しません。
WebP 提出先や利用ソフトが対応しているか確認してから選びます。

MDNの仕様では、Canvasの画質引数は非可逆圧縮に対応する形式で使われます。画質80%は「元と比べて品質が80%」や「容量が20%減る」という意味ではありません。

目標容量を指定するとどうなるか

本ツールは、指定した幅と画質で書き出し、容量が上限を超えた場合は画質を段階的に下げます。それでも収まらないときは幅と高さを縮小します。処理は最大5段階、各段階最大4回の書き出しに制限しています。収まらなければエラーを表示し、容量条件を満たしたことにはしません。

「KB」は本ツールでは1024バイトとして計算します。提出先が1000バイト単位で制限している場合は、余裕を持った目標値を指定してください。

同じテスト画像で比較

1600×900px、30,214バイトの自作PNGを使用。最大幅800px、最初の画質80%で比較しました。

条件 結果
JPEG、目標60KB 800×450px、24,822バイト
JPEG、目標5KB 252×141px、4,838バイト
WebP、容量指定なし 800×450px、表示上12.4KB

5KBにすると寸法も小さくなりました。容量だけを見て保存すると、用途に必要な解像度を失うことがあります。この画像での結果を、写真やスクリーンショット全般に当てはめないでください。

透明部分の確認

テスト画像の左上1画素は、JPEGでRGB(255,255,255)の白になり、PNGでは透明度0のままでした。色合いの完全な一致やメタデータの保持は保証していません。見本表示と保存後の実ファイルの両方を確認してください。

うまくいかないとき

PNGに目標容量を入れた場合は、目標容量を空にするか、JPEG・WebPへ切り替えてください。アニメーションPNGは拒否することを確認しています。ロゴの透過が必要、細かな文字が重要、といった用途では無理な容量削減を避け、元データを保管してください。

このあと使えるもの

検証範囲

Windows / Chrome 153.0.8010.37でローカル版とtools.toufumentals.com上の本番版を確認しました。本番では1600×900px、表示上29.5KBのPNGをJPEG・画質80%・目標60KBで処理し、800×450px、表示上24.2KB、書き出し1回という結果を確認しました。

Safari・Firefox・実機スマートフォン、HEIC、色管理全般、すべてのEXIF情報は未検証です。本番画面では結果表示までを確認し、ブラウザーが生成した保存ファイルの再検査はローカル版でのみ実施しました。

出典と確認日