# 画像リサイズ｜サイズ変更・切り抜き・形式変換

サイズを指定し、枠を描き、形式を選ぶ。それだけです。

> JPEG・PNG・WebPの画像を、ブラウザの中でリサイズ・切り抜き・形式変換します。ピクセル指定、パーセント指定、長辺指定に対応。1枚でもフォルダごとでも。アップロードはありません。

これはhttps://abox.tools/ja/resize-image/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。

## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。

リサイズも切り抜きも形式変換も、お使いのブラウザと手元のハードウェアが、最初から入っている画像エンコーダーを使って行います。このツールにはネットワーク機能が一切ありません。取りに行く先も、送る先もありません。仮に送ろうとしても、このページの向こう側に画像を受け取るサーバーが存在しません。

- ✗ アップロードなし
- ✗ 登録なし
- ✗ 透かしなし
- ✓ オフラインで動作
- ✓ ソース公開

## 画像をアップロードせずにリサイズする手順

1. **画像を選びます。** 選択欄にドロップするか、手で選んでください。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。
2. **必要なら切り抜きます。** 枠は画像全体に置かれた状態で始まるので、触らなければ何も切り取られません。ドラッグするか、形を固定してください。プロフィール画像なら1:1、ストーリーズなら9:16、サムネイルなら16:9です。「最大」を押せば、その形で収まるいちばん大きな枠になります。画像はそれぞれ自分の枠を持っているので、リストの行をクリックすれば、その画像の上に描けます。全部を同じ構図にしたいなら、それもボタンひとつです。
3. **どの大きさで出すかを指定します。** 幅、高さ、あるいはその両方。縦位置と横位置の写真を互いに同じ大きさへ揃える長辺指定。あるいは単純なパーセント指定です。2つの欄の一方を空にしておけば、画像は自分の縦横比を保ちます。
4. **形式を選んで、ボタンを押します。** それぞれのファイルが届いたときの形式を保つか、すべてをJPEG、PNG、WebPのいずれかで書き出すかです。各結果には、何になったか、どれだけ小さくなったかが表示されます。クリックすると原寸で開き、裏にあるすべての数値と、比較用の元画像が並びます。まとめて処理した場合は、1つのzipにまとまって届きます。

## 詳しい解説

[画像を台無しにせずにリサイズする方法](https://abox.tools/ja/guides/resize-an-image/): サイズ変更で起こること。縮小時の細部の損失、拡大時の補間、縦横比が違う枠への調整、切り抜くタイミングを説明します。

## 箱の中のほかのツール

- [HEIC→JPG変換ツール](https://abox.tools/ja/heic-to-jpg/): iPhoneが作る写真を、どこでも開ける形式に。
- [WebPをJPGに](https://abox.tools/ja/webp-to-jpg/): ウェブから保存した画像を、どこでも使える形式へ。
- [PNGをWebPに](https://abox.tools/ja/png-to-webp/): 同じ画像を、透明な部分はそのまま、多くの場合3分の1ほど小さく。
- [AVIFをJPGに](https://abox.tools/ja/avif-to-jpg/): ウェブサイトが保存する形式から、どこでも使える形式へ。

## よくある質問

### 画像はどこかにアップロードされますか？

されません。読み込みも切り抜きも拡大縮小も書き出しも、お使いのブラウザが手元のハードウェア上で、最初から入っているJPEG・PNG・WebPのエンコーダーを使って行います。このツールにはネットワーク機能が一切なく、何も取りに行かず、何も送りません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。

### 幅だけ指定して高さを指定しないとどうなりますか？

高さは画像自身の縦横比から決まります。ほとんどの場合、それが求められているものです。「幅1920」は「幅1920、高さはそれに応じた値」という意味だからです。両方を埋めると、その2つが画像の縦横比と食い違うことがあります。「縦横比が食い違う場合」の選択肢が現れるのは、そのときだけです。枠の内側に収める、いっぱいに広げてはみ出しを切る、背景で余白を埋める、引き伸ばして歪みを受け入れる、のいずれかです。

### リサイズすると画質は落ちますか？

縮小すると画素が減り、小さな文字や細線、細部が失われることがあります。写真が使用サイズできれいに見えても同じです。拡大しても記録されていない細部は戻りません。JPEGや非可逆WebPのエンコードはさらに劣化を加える場合があります。PNGは縮小後の画素を保持し、元の細部は復元しません。実際に使うサイズで確認してください。

### 画像ごとに違う切り抜きができますか？

できますし、それが既定です。リスト上のどの画像も、自分のピクセルで自分の枠を持っており、行をクリックすればその画像がプレビューに入り、その枠と固定した形がそのまま戻ってきます。ある1枚に対する操作が、ほかに影響することはありません。どの枠も画像全体に置かれた状態で始まるので、一度も描かなかった画像はまったく切り抜かれません。

### まとめて同じ切り抜きをかけられますか？

できます。プレビューの下のボタンです。ほかのすべての画像に、同じ相対的な範囲、つまりそれぞれの幅と高さに対する同じ割合を与えます。すべて同じ大きさのスクリーンショットや書き出しの集まりなら、それはまったく同じ枠になり、ページもそう表示します。形を固定している場合は、その範囲の中でその形の最大の枠を各画像に与えます。ですから1:1を押してからこのボタンを押せば、縦位置と横位置の混ざったフォルダから正方形が取れます。どの枠も、あとから編集できます。

### 読み書きできる形式は何ですか？

読み込めるのはブラウザがデコードできるものすべてで、実際にはJPEG、PNG、WebP、GIF、BMP、そして最近のたいていのブラウザではAVIFです。書き出しはJPEG、PNG、WebPで、ブラウザが備えているエンコーダーがそれだからです。「形式を保つ」ではJPEGはJPEGのまま、PNGはPNGのままです。GIFやBMPのようにブラウザが書き出せないものはPNGになります。透過と平坦な色をそのまま保てるのがPNGだからです。

### JPEGで保存すると透過はどうなりますか？

背景色で埋まります。JPEGには透過を保存するアルファチャンネルがないからです。色は自分で選べ、初期値は白です。多くの方が求めるのがそれであり、ほかのほとんどの道具が何も言わずにそうしているものでもあります。同じ色は、余白を埋めるときにも使います。PNGかWebPで保存すれば、透過はそのまま通ります。

### EXIFやGPSの情報は消えますか？

実際に処理したものについては、副作用として消えます。切り抜きやリサイズとは画像をピクセルに戻し、そのピクセルを書き直すことで、ピクセルで埋まったキャンバスはタグを持ちません。ですから位置情報もカメラの機種も撮影日時も、新しいファイルには書き込まれません。まったく変更していないファイルは別で、タグごと1バイトも変えずに返ります。[EXIFビューアー・削除ツール](https://abox.tools/ja/exif-editor/)はJPEG、PNG、WebPの画像を再エンコードせずにメタデータを閲覧・編集します。AVIFは抽出できたEXIFの読み取り専用表示に対応し、最初にデコードした画像を新しいPNGへ変換して削除します。色やHDRが変わる場合があります。

### 画像圧縮ツールとはどう違いますか？

こちらは寸法の話です。何ピクセルほしいかを指定すれば、そのとおりに返します。[画像圧縮ツール](https://abox.tools/ja/compress-image/)はファイルサイズの話です。何キロバイトまで許されているかを指定すれば、そこに収まる中でいちばん高い画質を探し、画質だけでは届かないときにだけ縮小します。「幅1200ピクセルで」と言われたならこちらが正解です。「500KB以内で」と言われたなら、あちらのほうが近づけます。

### 無料ですか。アカウントは必要ですか？

無料です。アカウントも、ログインも、試用期間も、透かしもありません。ファイルの数にもサイズにも制限はありません。その費用を払うサーバーが存在せず、処理が手元の端末で起きているからです。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。

### オフラインでも動きますか？

動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。リサイズのために画像をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。

## この主張を確かめる方法

- **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。
- **何かを取りに行くコードがありません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。リサイズの実体はキャンバスへの`drawImage`ひとつと`canvas.toBlob`ひとつ、つまりブラウザにすでに入っている拡大縮小器とエンコーダーです。
- **変えてくれと頼まれていないファイルは、変えません。** 切り抜きもリサイズも形式変換も指定していない場合、選んだファイルは保存し直されるのではなく、1バイトも変えずにそのまま返ります。これは礼儀の話ではありません。このツールが画像を黙って書き直したり、ただ見たかっただけの画像からメタデータを黙って落としたりできない理由です。
- **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから来ています。そのどれにも、画像に関する情報は渡されません。ファイルを読み、切り抜き、拡大縮小し、書き出すコードはすべてこのオリジンから配信され、リポジトリに載っています。
- **オフラインで動きます。** 通信を切ってもこのツールは何も変わりません。もともと通信する段階が存在しないからです。これがいちばん単純な証明です。

**自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website

まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、何を残しどれだけの大きさで出すかを決める計算については`src/geometry.js`、切り抜きとリサイズを一度に行う単一の`drawImage`呼び出しについては`src/codecs.js`です。
