PNG画像をリサイズ PNG — オンライン、ピクセルまたはパーセンテージで
PNGをドロップ、新しい幅か高さ(またはパーセンテージ)を入力してリサイズ済みファイルをダウンロード。すべてCanvas APIを使ってブラウザ内で完結 — 画像はアップロードされず、アルファチャンネルも保持されます。
最大50 MB · 1辺あたり最大32,767 px(Chrome / Firefox)· 最終確認 2026-04-27
画像をアップロード
どこでもドラッグ&ドロップ、またはクリックして選択。
対応形式: PNG / JPG / WebP / BMP / TIFF / SVG
PNGのリサイズ方法
PNGをドロップ
PNGをドラッグ&ドロップ、または「ファイルを選択」をクリック。
サイズを設定
目標の幅または高さをピクセルで入力(例: 1200)するか、パーセンテージモード(例: 50%)に切替。アスペクト比ロックをONにして、もう一辺を自動計算させます。
ダウンロード
「リサイズしてダウンロード」をクリック。出力はPNGのまま、アルファチャンネルも保持されます。
検証可能なプライベート
リサイズはブラウザ内のCanvas APIで実行。サーバーアップロード無し — DevTools → Networkを開けば、リクエストはゼロです。
アスペクト比ロック
ロック中は片方の寸法を変えるともう片方が元の比率から再計算されます。円は円のまま、ロゴも比例を保ちます。
アルファチャンネル保持
8ビットのアルファはRGBと一緒に補間されるため、半透明エッジもきれいにスケール。ロゴでは拡大より縮小を選びましょう。
リサイズ・圧縮・変換・トリミング、どれを使う?
これら4つは異なる問題を解きます。ツールを開く前に正しいものを選びましょう — 誤った2つを組み合わせると画質を失います。
| 目的 | やること | ツール |
|---|---|---|
| 寸法が違う | リサイズ | このツール |
| 寸法はOK、ファイルが大きい | 圧縮 | PNG圧縮 |
| 写真でファイルを小さくしたい | 形式を変換 | PNG → WebP |
| 比率が違う | 先にトリミング、その後リサイズ | PNGトリミング |
| 複数サイズ(アイコンセット) | プリセットごとにリサイズ | このツール |
よく使うPNGの寸法
| 用途 | 幅 | 高さ | 推奨PNGバリアント |
|---|---|---|---|
| ウェブサイトのヒーロー画像 | 1920 px | 1080 px | PNG-24(透過なし) |
| ブログ / Open Graph | 1200 px | 630 px | PNG-24 |
| アプリアイコン | 512 px | 512 px | PNG-32(アルファあり) |
| サムネイル | 150 px | 150 px | PNG-8 インデックス または PNG-32 |
PNGをリサイズすべきでないとき
次の4つのケースではリサイズは適切な解決策ではありません:
- 印刷用にスクリーンショットを拡大しない。 ピクセルは補間されるだけで復元されません。目的解像度で素材を作り直しましょう。
- パレット付きPNG-8をそのままリサイズしない。 パレットマッピングが劣化します。元データから再エクスポートするか、先にPNG-24に変換してください。
- アイコンのスプライトシートをリサイズしない。 SVGソースをスケールして再ラスタライズしましょう — 小さなUI要素が並ぶシートは再サンプリングしないこと。
- アンチエイリアス済みのロゴを16 px未満に縮小しない。 エッジがぼやけます。小サイズ用に手作業で調整したバリアントを使用してください。
DevToolsでプライバシーを検証
- DevToolsを開く(F12 または Cmd + Opt + I)。
- Networkタブに切り替え、Fetch/XHRでフィルタ。
- PNGをツールにドロップして「リサイズしてダウンロード」をクリック。
- リサイズ操作からのリクエストはゼロのはずです — ファイルはブラウザに留まります。
リサイズのコツ
- 意図的に引き伸ばす場合を除き、常にアスペクト比ロックを維持してください。
- 両方向に50%リサイズすると約75%のピクセルが除去されます — 4000×3000のPNGは1000×750 ≒ 110万画素(1200万比)になります。
- Retina/HiDPIディスプレイ向けには、表示スロットのCSSサイズの2倍でエクスポートしてください。
ブラウザごとのCanvas制限
リサイズはHTMLの<canvas>上で行うため、各ブラウザがソースの最大寸法を制限します。これを超えるPNGは描画できません。
| ブラウザ | 1辺の最大 | 実用最大面積 |
|---|---|---|
| Chrome / Edge | 32,767 px | 〜268 M px |
| Firefox | 32,767 px | 〜124 M px |
| Safari(デスクトップ) | 16,384 px | 〜67 M px |
| Safari(iOS) | 16,384 px | 16〜67 M px(RAM依存) |
よくある質問
PNGをリサイズすると画質は落ちますか?
縮小は品質をよく保ちます(バイキュービック補間)。拡大はディテールを復元できず、エッジが柔らかくなります。常に最大解像度のソースから縮小してください。
PNGのリサイズと圧縮の違いは?どちらが先?
リサイズはピクセル寸法を変更し、圧縮は寸法を保ったままDeflateアルゴリズムでデータを再エンコードします。まずリサイズ、次に圧縮 — ピクセル削除は圧縮単独よりはるかにファイルを小さくします。寸法が確定したらPNG圧縮を通して追加で節約してください。
リサイズ時に透過は維持されますか?
はい。8ビットのアルファチャンネルはRGBと一緒に補間され、半透明ピクセルもきれいにスケールします。ロゴでは縮小推奨。
パーセンテージでリサイズできますか?
はい。パーセンテージモードに切り替えて例えば50%を入力すると、幅と高さが比例的にスケールします。正確なピクセル値も使えます。
出力はPNGのままですか?
はい、デフォルトでアルファチャンネルを保持したPNGです。寸法ではなくファイルサイズを下げたい場合はWebPやAVIFへ変換してください — 関連ツール参照。