画像エディターは、1枚の画像に複数の処理をしてから1回で保存したいときに使います。切り抜き（自由、1:1、4:3、16:9、正確なピクセル指定）、サイズ変更、90°回転、左右反転、透明な余白の切り取り、1pxの輪郭線、背景色の塗りつぶし、背景除去、2倍・4倍の拡大を行い、PNG・JPG・WebPで書き出します。目標サイズも指定でき、開いている画像をまとめてZIP 1つで保存することもできます。処理はすべてブラウザ内で行い、元のファイルは変わりません。1つの処理だけなら、圧縮、変換、サイズ変更、切り抜きなどの単機能ページのほうが早く済みます。
作業用コピーを順に編集し、1回だけエンコード
編集は行った順に画像の作業用コピーへ反映されます。元に戻すで1段階ずつ戻り、「原本に戻す」で開いたときのファイルの状態に戻ります。各処理は実際のピクセルを計算し直したり切り取ったりするので、順番が大切です。先に切り抜き、次にサイズ変更、最後に書き出します。写真全体を縮小してから切り抜くと、せっかくの細部を捨てることになります。
書き出しは圧縮ツールと同じエンコーダーを使います。自動・PNG・JPG・WebP（AVIFはブラウザがエンコードできる場合のみ）、画質25〜100（初期値92）、任意の目標サイズ（KB）、最大幅、JPGの背景色、「容量を超える場合は追加の縮小を許可」を選びます。初期の形式はPNGです。複数の画像を開いているときは「全画像に保存設定を適用」でZIP 1つに保存し、目標に届かなかった画像は除外されて件数がメッセージに表示されます。
- 作業用コピー
- メモリ上で編集中の画像。ディスク上のファイルはそのままです。
- 切り抜きのプリセット
- 選んだ比率で幅か高さの80%を占める中央の枠。ドラッグやピクセル入力で調整します。
- 目標KB
- 書き出すファイルの任意の上限。圧縮ページと同じ方法で探索します。
4032 × 3024の写真を200KB以下の1920 × 1080のバナーに
数値はエディターのコードに従っています：16:9プリセットの枠、比率固定のサイズ変更、書き出しの上限。元のサイズは1,200万画素のスマホ写真の例です。
開く 4032 x 3024
16:9で切り抜き w = 4032 x 0.8 = 3225.6 -> 3226, h = 3225.6 / (16/9) = 1814.4 -> 1814
x = (4032 - 3225.6) / 2 = 403.2 -> 403, y = (3024 - 1814.4) / 2 = 604.8 -> 605
サイズ変更 幅1920、比率固定: 1920 x 1814 / 3226 = 1079.6 -> 1080
書き出し JPG、目標200KB = 204,800 バイト
ファイル photo-edited.jpg、1920 x 1080
被写体が中央にないなら、適用する前に切り抜き枠をドラッグします。X・Y・幅・高さの欄には正確なピクセルを入力でき、矢印キーで1px（Shiftで10px）ずつ動かせます。
結果の確認
- 書き出し後、保存したファイルを開いてピクセルサイズと形式を確認します。ファイル名は
-edited で終わります。 - 目標サイズを使った場合、完了メッセージに保存した容量が出て、すべての画像を保存した場合は目標に届かなかった件数も出ます。
- 元のファイルは保管しておきます。編集内容は元ファイルに書き戻されません。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|
| ZIPに一部の画像がない | 目標サイズに届かず除外された | メッセージに件数が表示される | 目標を上げるか追加の縮小を許可するか、その画像だけ別に書き出します |
|---|
| 書き出したファイルがPNGで大きすぎる | 初期の書き出し形式がPNG | ファイル名が .png で終わる | JPG・WebPか自動を選びます |
|---|
| 透明部分が白くなった | JPGの書き出しは透明部分をJPGの背景色で塗る | 保存形式がJPG | PNGかWebPで書き出すか、JPGの背景色を変えます |
|---|
| 写真のシャープさが落ちた | サイズ変更してから切り抜いた、または2倍・4倍に拡大した | 編集の順番を確認 | 元に戻して、先に切り抜いてからサイズを変えます。拡大はピクセルを増やすだけで細部は生みません |
|---|
ほかの方法
| 方法 | こんなときに向いています |
|---|
| 切り抜き | 構図だけ決めればよい場合。比率・各サービスのプリセット、水平調整、円形、複数ファイルへの同じ範囲の適用。 |
|---|
| 各サービス向けサイズのプリセット | 中央基準の切り抜きと正確なサービス用サイズを1回で済ませたい場合。 |
|---|
| 圧縮 | ファイルサイズだけが問題の場合。形式と画質を代わりに比べます。 |
|---|
この方法の限界
- 編集は1つの作業用コピーに対するピクセル処理で、画像用のレイヤー・文字・描画ツールはありません。
- 書き出したファイルにEXIFは書き込まれず、アニメーション画像は拒否します。
バージョンと出典
動作はこのリポジトリの版の src/app.js（ツールバー、切り抜きプリセット、比率固定のサイズ変更、書き出しとZIP）と共通のエンコーダー src/compression.js から取っています。外部のプログラムは関わらないため、外部の文書は引用していません。
画像編集
ブラウザで画像を切り抜き、回転、サイズ変更。背景削除やPNG・JPG・WebP変換を組み合わせ、画像をアップロードせず新しいファイルに保存します。
使い方
- 画像を開いて元画像を保管
- 切り抜き・回転・サイズ変更を適用して確認
- PNG・JPG・WebPを選び保存した画像を確認
対応形式
PNG / JPG / WebP / AVIF / HEIC → PNG / JPG / WebP — 読み込み・書き出しはブラウザの対応状況によります。 アニメーション入力は非対応です。静止フレームを選択してください。
このツールでできること
切り抜き・回転・サイズ変更の履歴を元画像と分離し、小さいプレビューを使います。
処理方式と検証状況
advanced · Canvas / immutable transforms / proxy preview. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
書き出す前に
端末のメモリ・保存容量・コーデック対応によります。テスト例はすべてのファイルの動作保証ではありません。
よくある質問
対応サイズは何で決まりますか？
端末のメモリ・保存容量・コーデック対応によります。テスト例はすべてのファイルの動作保証ではありません。
ファイルはアップロードされますか？
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
作業は自動保存されますか？
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。
