画像リサイズツール

この画像リサイズツールについて

このツールは画像ファイルを読み込み、指定したサイズでHTML canvasに描画し、設定した画質でJPEG・PNG・WebPとして再エンコードします。すべてブラウザ内のcanvas APIで行われ、元のファイルがサーバーに送信されることはありません。

縦横比を固定すると、幅か高さのどちらかを変更しても比率が保たれ、画像が伸びたり潰れたりしません。画質スライダーはJPEG・WebP出力にのみ影響し、PNGは常に可逆圧縮なので画質の値はPNGのファイルサイズに影響しません。

ブラウザで画像サイズを変更する仕組みは?

このツールは画像を指定した幅・高さでHTML5のcanvas要素に描画し、canvas.toDataURL()でキャンバスの内容を新しいエンコード済み画像ファイルとして読み出します。例: 3000x2000pxの写真を50%の倍率に設定すると1500x1000pxに再描画され、選択した品質でJPEGとして再エンコードされます。この処理はすべてブラウザ内だけで行われます。

画像のリサイズ・圧縮の手順

1. ドロップ領域に画像をドラッグするか、クリックして端末からファイルを選択します。
2. 正確な幅・高さを指定したい場合はピクセルモード、元のサイズに対する比率で調整したい場合はパーセントモードを選びます。
3. 画像が伸びないようにしたい場合は縦横比の固定をオンのままにし、幅・高さを個別に設定したい場合はオフにします。
4. 出力形式(JPEG・PNG・WebP)を選び、JPEG・WebPの場合は品質スライダーでファイルサイズと画質のバランスを調整します。
5. リサイズを押すと新しい画像が生成され、プレビューで確認してブラウザから直接ダウンロードできます。

ピクセルとパーセント倍率の関係

• 縦横比 = 元の幅 ÷ 元の高さ。固定をオンにするとこの値がそのまま維持されます
• 品質(JPEG・WebP) = ファイルサイズと画質のバランスを取る0〜100の設定。PNGは常に可逆(ロスレス)のためこの設定の影響を受けません

リサイズ結果の例

よくある質問

自分の画像は本当にどこにもアップロードされないのですか?

その通りです。リサイズ・圧縮はすべてブラウザ内蔵のcanvas APIだけで行われ、ネットワーク通信は発生しません。ページ読み込み後にインターネット接続を切っても動作し続けることで確認できます。

品質を下げてもPNGの容量があまり減らないのはなぜですか?

品質スライダーは、細部を減らしてファイルサイズを小さくする非可逆圧縮方式のJPEG・WebPにのみ適用されます。PNGはすべてのピクセルをそのまま保持する可逆圧縮のため、ファイルサイズは品質設定ではなく画像の複雑さによって決まります。

リサイズした画像がぼやけたり、ブロックノイズが出たりするのはなぜですか?

元の解像度より大きく拡大すると、ブラウザは補間によって新しいピクセル情報を作り出す必要があり、その結果細部の表現がぼやけます。縮小はおおむね安全ですが、100%を大きく超える拡大は鮮明さを損なうことが多いです。

ピクセル単位のリサイズとパーセント単位のリサイズは何が違いますか?

ピクセルモードは、フォームやウェブサイトが求める特定のサイズのように、正確な出力サイズを指定したい場合に便利です。パーセントモードは、正確な数値を計算せずに元より小さい・大きいバージョンだけが欲しい場合に、元の比率のまま調整するのに便利です。

端末の性能によっては、非常に大きな元画像は処理が遅くなったり、ブラウザのメモリ上限に達したりすることがあります。WebP出力の品質と対応状況はブラウザによって多少異なる場合があり、元の画像が持っていない細部の情報は、拡大倍率をどれだけ上げても新たに生まれることはありません。

プライバシーと安全性

• ブラウザ内で計算 — 入力した値はお使いの端末内だけで計算され、utilduckのサーバーへ送信されません。
• 暗号化された通信 — すべてのページはHTTPSで配信され、通信経路で内容を読み取られません。
• 第三者へ渡しません — 入力内容は解析・広告サービスへ渡されません。
• 保存しません — 計算結果をサーバーに保存せず、アカウント登録も不要です。

最終更新: 2026-08-17