比率とピクセル範囲を指定できる画像 切り取り
左側で写真を読み込み比率を選ぶと、右側の編集面に切り取り枠が現れます。枠をドラッグして位置を決めるか、X・Y・幅・高さを直接入力し、保存を押すとその範囲だけを書き出します。写真がブラウザの外に出ることはありません。
写真を読み込む
ここに画像をドラッグしてください
JPG · JPEG · PNG · WEBP · AVIF · BMP · 1枚あたり最大20MB
比率
切り取り範囲 (px)
残す範囲を選ぶ
- 元画像
- —
- 選択の起点
- —
- 出力サイズ
- —
- 推定容量
- —
サンプル画像を表示しています。ご自身の写真を読み込むとそのまま切り替わります。
結果プレビュー
切り取りはブラウザ内のCanvasだけで処理します。ファイルはどこにも送信されず、描き直す過程でEXIFの位置情報などのメタデータも取り除かれます。品質の値はJPGとWEBPの保存にのみ適用され、PNGは可逆のままです。
すぐ使える形で。
- すぐ見える画面入力場所と結果の場所をはっきり分けます。
- 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
- 求めるものを減らす登録や余計な入力なしで使えるようにします。
画像 切り取りツールの使い方
画像 切り取りは、不要な周辺部分を取り除いて見せたい範囲だけを残す作業です。大きさを変えるリサイズと違い、枠に収まる範囲そのものが変わるため、同じ写真でもどこを残すかで受ける印象が大きく変わります。
このツールは読み込んだ写真をブラウザの中だけで処理します。ファイルが送信されないので、身分証の画像や家族写真のように外に出したくないものでも安心して扱えます。規格に合わせて比率を固定することも、ピクセル座標を入力して複数の写真を同じ位置で切り取ることもできます。
切り取りが必要になる場面
写真の内容自体は問題ないのに、写っている範囲だけを変えたいときに切り取りを使います。背景が雑然としているとき、決められた規格に合わせるとき、画面キャプチャから必要な部分だけを取り出すときが代表的です。
- プロフィール写真を正方形の規格に合わせる
- 商品写真から小物を外して被写体だけを残す
- 画面キャプチャからアドレスバーやタスクバーを取り除く
- 横向きの写真を縦画面向けに構図から取り直す
このツールがファイルを扱う仕組み
ファイルを選ぶとブラウザが画像をメモリに読み込み、編集面に描画します。保存を押した時点で選択範囲だけを新しいCanvasに描き直して書き出します。アップロードの工程がないため通信速度に左右されず、元のファイルには一切手を加えません。
- 選択範囲は画面座標ではなく元画像のピクセル座標で管理します
- 編集面で縮小表示していても書き出しは元の解像度が基準です
- 描き直す過程で撮影機種や位置情報などのメタデータは失われます
画面の順番どおりに進める
左の列が入力と設定、右の列が編集面と結果です。上から下へ一度たどれば保存まで終わります。
- 左のパネルに写真をドラッグするか、ファイルを選ぶを押します
- 比率から自由または1:1などの固定比率を選びます
- 右の編集面で切り取り枠をドラッグし、角をつまんで大きさを整えます
- 正確な値が必要なときは左の欄にX・Y・幅・高さを入力します
- 出力形式と品質を決めて、切り取った画像を保存を押します
比率固定を使う場面
比率を選ぶと枠の縦横比が固定されるため、どの角をドラッグしても形が崩れません。提出先の形式が決まっているときに特に役立ちます。
- 1:1 — プロフィール画像や正方形のサムネイル
- 4:3 — 一般的なカメラの標準比率、資料に貼る写真
- 16:9 — 動画のサムネイルや発表資料の表紙
- 3:4・9:16 — 縦型タイムラインやスマートフォンの全画面
- 21:9 — 横長のバナーやページのヘッダー画像
ピクセル座標で正確に切り取る
Xは左端からの距離、Yは上端からの距離で、幅と高さが切り出す大きさです。4つの値を入れると枠がその位置へ移動するので、複数の写真を同じ位置で切り取るときに毎回目分量で合わせる必要がなくなります。
- 値は元画像のピクセル基準で、表示倍率の影響を受けません
- Xと幅の合計が元画像の幅を超えると自動的に内側へ戻されます
- 比率が固定されている場合、幅を変えると高さも同時に計算されます
出力形式と品質の選び方
元の形式のままにすると読み込んだファイルと同じ形式で書き出します。形式を変えると、用途に応じて容量と画質のバランスを調整できます。
- JPG — 写真向きで容量が小さい一方、透過部分は黒で塗りつぶされます
- PNG — 透過を保つ可逆形式なので品質の値は影響しません
- WEBP — 同程度の画質でJPGより軽く、透過にも対応します
- 品質は40から100までで、写真なら80〜90が扱いやすい範囲です
実際の例で手順をたどる
横1920・縦1080の写真から正方形のプロフィール画像を作る場合を考えます。比率で1:1を選ぶと枠が正方形に固定され、高さが1080なので最大でも1080×1080になります。
- 顔が中央に来るようXに420、Yに0を入力します
- 幅に1080を入れると、比率が固定されているので高さも1080になります
- 出力形式をJPG、品質を88のままにして保存します
- 結果は1080×1080になり、元のファイルはそのまま残ります
ありがちな失敗
思った結果にならないときは、たいてい次の4つのいずれかです。保存前にプレビューと出力サイズの数値を確認すれば、やり直しがぐっと減ります。
- 画面上の枠の大きさを書き出しサイズと取り違える — 出力サイズの値を見ます
- 透過PNGをJPGで保存して背景が黒くなる
- 不要になった比率固定を自由に戻し忘れる
- 小さく切り取った結果を後から拡大してぼやける
保存する前に確認すること
提出用やアップロード用であれば、次の項目を順に見ておくと差し戻しの多くを避けられます。
- 出力サイズが提出先の要求ピクセル数を満たしているか
- 顔や主要な被写体が端で切れていないか
- 透過が必要か、白背景で問題ないか
- 形式の制限があるか — JPGのみ受け付ける窓口はまだ多くあります
- プレビューに傾きや不要な余白が残っていないか
切り取り・リサイズ・圧縮の違い
3つはファイルが軽くなる点だけが似ていて、目的はそれぞれ異なります。順番を間違えると画質を二度失うことになります。
- 切り取りは範囲を変えます — 画面に収まる領域そのものが変わります
- リサイズは寸法を変えます — 同じ絵をより小さく、または大きくします
- 圧縮は範囲も寸法も保ったままファイル容量だけを減らします
- 推奨する順番は切り取り→リサイズ→圧縮です
よくある質問
読み込んだ写真はサーバーに送られますか。
送られません。ファイルを選ぶ時点から保存まで、すべての処理がお使いの端末のブラウザ内で完結します。ページさえ開いていれば、通信が切れた状態でも切り取りは動作します。
切り取ると元の画質は落ちますか。
選択した範囲は元のピクセルをそのまま写し取るため、拡大縮小による劣化はありません。ただしJPGやWEBPで保存すると形式の性質上再圧縮が起きるので、品質を90以上にするかPNGで保存すれば劣化を避けられます。
対応している形式を教えてください。
JPG・JPEG・PNG・WEBP・AVIF・BMPに対応し、1枚あたり20MBまで読み込めます。AVIFはブラウザ側が解読できる必要があるため、開けない場合はPNGかJPGに変換してからご利用ください。
保存したサイズが入力した値と違います。
切り取り枠は整数ピクセル単位に合わせるため、小数を含む値は丸められます。またXと幅の合計が元画像の幅を超える場合は内側へ自動調整されます。左側の出力サイズの値が実際に保存される大きさです。
比率を固定すると、どちら側が切れますか。
指定した比率に合わせるため、長いほうの辺が縮みます。横長の写真で1:1を選ぶと、まず左右が狭くなります。どこを残すかは枠を左右にドラッグして自分で決められます。
透過PNGを切り取ったら背景が黒くなりました。
出力形式がJPGになっているためです。JPGは透過を保存できず、透明部分が黒で埋められます。透過を保ちたい場合はPNGまたはWEBPを選んでください。
スマートフォンでも使えますか。
使えます。画面が狭い場合は編集面が上、設定が下に並び、切り取り枠は指でドラッグして移動し、角を押さえて大きさを変えられます。正確な値が必要なときは座標欄に直接入力するほうが速いです。
写真に含まれる撮影位置の情報はどうなりますか。
切り取り結果はCanvasに描き直した新しい画像なので、元のEXIF情報は引き継がれません。撮影位置や機種の記録が残らないため、インターネットに公開する前の工程としても適しています。
複数の写真をまとめて切り取れますか。
このツールは1枚を正確に切り取ることに重点を置いているため、一度に扱えるのは1枚です。多数の写真の寸法をまとめて変えたい場合は、画像リサイズツールが一括処理とZIP保存に対応しています。
参考にした資料
このツールが利用しているブラウザ機能の公式ドキュメントです。