短い答え
寸法を変えずに画像を小さくするには、リサイズではなく圧縮でファイルを軽くします。圧縮は同じピクセルの保存方法を変えるもので、リサイズはピクセルグリッド自体を変えるものです。
この違いが効いてくるのは、フォームがこう指定してくるときです:
- 「画像は 600 x 600 ピクセル、かつ 200KB 未満であること。」
- 「2 x 2 インチのパスポート写真、JPG のみ、最大 240KB。」
- 「プロフィール写真は 1000 x 1000 ピクセル以上、最大 1MB。」
- 「画像の寸法を変えないでください。」
これらのケースでは幅と高さも要件の一部です。リサイズすると KB の問題は片付いても寸法の規則に反することがあります。まず圧縮ツールを使ってください。
ファイルサイズと寸法は別物
「画像のサイズ」という言葉は、まったく違う 2 つのことに同じ単語を使うのでややこしくなります。
| 一般的な言い方 | 実際の意味 | 例 | 変え方 |
|---|---|---|---|
| ファイルサイズ | ディスク上のバイト数 | 85KB、240KB、2.8MB | 圧縮、メタデータ削除、形式変更 |
| ピクセル寸法 | 幅と高さ | 600 x 600 px、1200 x 800 px | リサイズまたはクロップ |
| 印刷サイズ | 物理的な出力サイズ | 2 x 2 インチ、4 x 6 インチ | ピクセルと DPI/PPI メタデータで決まる |
2000 x 2000 の画像は 10MB にも 300KB にもなります。寸法は同一で、保存方法だけが違います。
逆も同じで、500 x 500 の PNG スクリーンショットが、2000 x 2000 の JPEG 写真より大きくなることもあります。スクリーンショットが非効率に保存されていたり、透過やメタデータを含んでいる場合です。
リサイズすべきでないとき
今の寸法がすでに正しいなら、まず圧縮です:
- 役所や学校のフォーム: フォームがピクセル寸法とファイルサイズの両方を検証することがあります。
- パスポートや ID 写真: すでに正しくトリミングされていることが多く、リサイズすると顔サイズや頭部位置の要件を崩す恐れがあります。
- プロフィール写真: プラットフォームは最低ピクセル数以上の正方形画像を求めることが多いです。
- レイアウトに合わせて寸法を決めた Web 画像: CSS 側は同じアスペクト比とピクセルグリッドを想定しています。
- ドキュメント用スクリーンショット: 寸法を変えると UI テキストが甘くなったり、比較しにくくなります。
- 別システムが使う画像: テンプレート、データベース、印刷ワークフロー、バッチスクリプトが厳密な寸法を期待していることがあります。
送信先がより小さな寸法を許すか、必要以上に多くのピクセルを持つ場合にだけリサイズしてください。web.dev の画像ガイダンスは、両者を分けて扱っています:正しい寸法の画像は不要なバイトを減らし、圧縮は残ったファイルを最適化します。
圧縮で変わるもの
寸法が同じでも、ファイルサイズが変わるのは、書き出したファイルが以下のいずれかで変化するからです:
- 品質レベル: 非可逆形式は品質を下げるほど視覚的なディテールを落とします。
- 形式: WebP や AVIF は同じピクセル寸法を JPEG や PNG より効率的に保存できます。
- 圧縮モード: 可逆はピクセルを完全に維持、非可逆はわずかに変更して多くのバイトを節約します。
- 色情報: 一部のエンコーダーは色の精度やクロマのディテールを落とします。
- メタデータ: カメラ機種、GPS、プレビュー サムネイル、DPI タグ、編集履歴などが取り除かれることがあります。
MDN の Canvas エクスポート ドキュメントは、ブラウザー系ツールを考えるうえで良いモデルになります。ブラウザーは同じ Canvas ビットマップを異なる形式・品質で書き出せます。Canvas が 1200 x 800 ピクセルなら、書き出した JPEG や WebP は 1200 x 800 のままでバイト数だけが変わります。
画像の種類で方法を選ぶ
| 元画像 | 寸法は維持? | まず試すこと | 避けること |
|---|---|---|---|
| アップロード上限を超えた JPG 写真 | はい | JPEG 品質を小刻みに下げる | 同じ JPG を何度も再保存する |
| 透過のない PNG 写真 | はい | 受け入れられるなら JPG や WebP に変換 | もともと PNG だからという理由で PNG のままにする |
| テキスト入りの PNG スクリーンショット | はい | PNG 最適化か可逆 WebP | 低品質 JPEG |
| 透過ロゴや切り抜き | はい | 送信先の対応状況に合わせて PNG または WebP | 透過が消える JPEG |
| すでに正しい寸法の Web ヒーロー画像 | はい | フォールバック付きの WebP または AVIF | バンディングを招くほど低い品質 |
| メール添付 | 通常は維持 | 写真は JPEG、グラフィックは PNG | 相手が対応していない可能性のある WebP や AVIF |
| アーカイブやマスターファイル | はい | 原本は残し、必要なら圧縮版を追加 | 唯一のマスターを非可逆エクスポートで上書きする |
一般的な圧縮記事はここでよくつまずきます。「WebP に変換」は自分で管理する Web 画像には良い助言ですが、裁判所提出書類、学校のフォーム、印刷会社、JPG か PNG しか受け付けないメール添付にはまずい助言になり得ます。
だいたい通用する品質設定
万能の品質値はありません。web.dev は、視覚品質とファイルサイズの最適な妥協点が見つかるまで、複数の圧縮レベルを試すことを勧めています。以下はあくまで出発点で、絶対のルールではありません:
| 画像の用途 | JPEG/WebP の目安 | 確認するポイント |
|---|---|---|
| パスポート、ID、プロフィール、書類写真 | 82-90 | 顔のディテール、文字ラベル、エッジのシャープさ |
| 商品写真 | 80-88 | 生地、ラベル、コーナー、色ズレ |
| ブログや Web の写真 | 75-85 | 肌、空、影、グラデーション |
| サムネイルやプレビュー | 65-78 | 小さい表示サイズでの被写体の分かりやすさ |
| 背景画像 | 55-72 | バンディングや目立つブロック |
| テキスト入りスクリーンショット | まず可逆 PNG/WebP | メニューの文字、アイコン、細い線 |
AVIF は多くのツールで別スケールを使うため、JPEG や WebP と数値を直接比べないでください。「品質 60」の AVIF と「品質 60」の JPEG は同じ意味ではありません。
いちばん安全なワークフローは地味ですが確実です。書き出す → 見比べる → 調整する → 繰り返す。
リサイズなしで形式を変える
形式変更でも、ピクセル寸法を変えずにファイルサイズを減らせます。重要なのは送信先がその新形式を受け入れるかどうかです。
JPEG → WebP: Web 配信ではよく効きます。Google の WebP ドキュメントはテストセットで大きな平均削減を報告しており、WebP は非可逆・可逆・透過・アニメーションに対応します。とはいえ、厳しいアップロードフォームは、ブラウザーが対応していても WebP を拒否することがあります。
PNG 写真 → JPEG や WebP: PNG がカメラ写真で透過が不要なら大きく効きます。PNG は可逆なので、カメラのノイズまで含めて全ピクセルを保持します。JPEG や WebP なら、写真向け非可逆圧縮で同じ寸法のままバイト数を減らせます。
PNG スクリーンショット → JPEG: たいてい割に合いません。ファイルは小さくなっても、文字や硬いエッジが汚く見えます。まず PNG 最適化か可逆 WebP を試してください。
透過 PNG → JPEG: 背景を塗りつぶしても構わない場合だけにします。JPEG は透過ピクセルを保持できません。
JPEG → JPEG(再エンコード): 動きますが、必ずいちばん元に近いファイルから行ってください。すでに圧縮された JPEG を何度も再圧縮すると、アーティファクトが積み重なります。
PhotoTools で寸法を変えずに圧縮する手順
幅と高さを維持しなければならない場合の流れです:
- 圧縮 を開きます(リサイズではありません)。
- 画像をドロップします。
- ツールが表示する入力寸法、または OS のファイル情報で寸法を確認します。
- 寸法はそのままにし、送信先が受け入れる出力形式を選びます。
- JPEG/WebP/AVIF の品質スライダーを少しずつ下げます。
- 結果をダウンロードします。
- アップロードする前に、ダウンロードしたファイルのピクセル幅と高さを再確認します。
- プライバシーが重要なら、EXIF/GPS メタデータが残っていないかも確認します。
PhotoTools は圧縮の処理をブラウザー内で実行します。画像は変換のためにサーバーに送られるのではなく、ツールのセッション中にローカルで処理されます。
送信先が現在のピクセル寸法を要求するなら、リサイズツールは使わないでください。リサイズは幅と高さを変えるためのもの、圧縮はバイト数を変えるためのものです。
実際のアップロード問題に対する例
| 問題 | より良い対処 | 理由 |
|---|---|---|
| 600 x 600 の JPG を 200KB 未満にしたい | JPG のまま、品質を 80 台後半から 80 台前半へ下げる | 寸法も受け入れ形式も安全なまま |
| 1200 x 1200 のプロフィール写真が 2MB、上限は 1MB | JPG を圧縮するか、受け入れ可能なら WebP に変換 | ピクセルを変えずに十分な余裕がある |
| 900KB の PNG スクリーンショット、寸法は維持 | PNG 最適化か可逆 WebP を試す | 文字がシャープなまま残る |
| 透過商品切り抜きが大きすぎる | 受け入れ可能ならアルファ付き WebP を試す | Web の多くのケースで、より少ないバイト数で透過を維持 |
| 4000 px 幅の Web 画像を 800 px で表示している | 許されるなら先にリサイズ、その後圧縮 | 4000 px を保つのはバイトの無駄 |
| フォームがぴったり 413 x 531 px の JPG、最大 300KB を指定 | リサイズせず、JPG のまま圧縮のみ | バリデーターがどんな寸法変更も拒否する可能性がある |
難所はたいてい厳格なフォームです。フォームが厳密なピクセル値とファイルサイズ上限を指定しているなら、一般的な画像アドバイスよりその要件を優先してください。
リサイズも必要になるとき
「リサイズしない」が正しい制約ではない場面もあります。画像が送信先に必要な量よりずっと多くのピクセルを持っている場合、圧縮だけでは見苦しい品質設定に追い込まれます。
4000 ピクセル幅の写真を JPEG の非常に低い品質まで潰しても、まだ重いうえに見た目も悪くなります。送信先が 1000 px 幅でしか表示せず、その寸法が許されるなら、先にリサイズしてから穏やかに圧縮するほうが、不要なピクセルを残してディテールを潰すより見た目もよくなります。
ルール:
- 寸法が必須なら、まず圧縮。
- 寸法が必要以上に大きいだけなら、まずリサイズ。
- 迷ったら、寸法を変える前にアップロード指示を確認する。
トラブルシューティング
画像がまだ大きすぎる
より効率的な受け入れ形式を試す、品質をもう少し下げる、メタデータを削る、あるいは以前に書き出したコピーではなくオリジナルファイルからやり直します。それでも上限を大きく超え、送信先がより小さな寸法を許すなら、先にリサイズします。
アップロードフォームがファイルを拒否する
許可されているファイル形式を確認します。JPG と PNG しか受け付けないフォームは多くあります。WebP は寸法もファイルサイズも正しくても、受け入れ形式一覧に WebP がなければ弾かれます。
画像がぼやけて見える
寸法は同じでも、圧縮品質が低すぎるか、選んだ形式が合っていない可能性があります。品質設定を上げてください。スクリーンショット・図・文字には、低品質 JPEG ではなく PNG か可逆 WebP を使ってください。
透過の背景が白または黒になった
画像がおそらく JPEG に変換されています。JPEG に透過はありません。送信先が透過に対応しているなら、PNG、WebP、AVIF で書き出してください。
寸法まで変わってしまった
ピクセルグリッドを変えるリサイズ・クロップ・エクスポート プリセットを使った可能性があります。オリジナルを開き直し、圧縮だけを使ってください。ファイルを送信する前に出力寸法を確認します。
品質を守る最後のルール
オリジナルを残してください。圧縮は、いちばん良い元ファイルから再度書き出せるときにいちばん安全です。
圧縮した画像をダウンロードし、また圧縮し、別の非可逆形式に変換し、また圧縮する、を繰り返すとアーティファクトが積み上がります。1 回きりのアップロードなら許容できるかもしれませんが、商品写真、ID 写真、繰り返し使う Web アセットでは、きれいなマスターを保管し、そこから配信用コピーを作ってください。