Image Cropper

Image Cropper

ドラッグして切り抜き、標準的なアスペクト比 (1:1, 4:5, 16:9, 9:16, …) にスナップ、回転と反転、PNG / JPG / WebP として書き出し。すべてブラウザ内で完結 — アップロード不要、登録不要。

Instagram スクエア投稿: 1:1。Instagram ポートレート投稿: 4:5。Instagram / Facebook / TikTok / YouTube ストーリー: 9:16。YouTube 動画サムネイル: 16:9 (最低 1280×720)。X (Twitter) 投稿画像: 16:9 または 1:1。LinkedIn 投稿: 1.91:1 (16:9 に近い)。DSLR / スマートフォンカメラの写真: 3:2。クラシックな 35 mm または古いデジタル: 4:3。

はい。画面上の canvas は表示用に縮小されますが、切り抜きの計算は元画像の座標空間 (オリジナルピクセル) で実行されます。ダウンロードをクリックすると、書き出し用の canvas は元画像の切り抜きピクセル寸法そのままにサイズが設定されます — 画面上のスケーリングによる品質低下はありません。4000×3000 の元画像を 1000×1000 の正方形に切り抜くと、フル品質の 1000×1000 画像として書き出されます。

画像をここにドロップ、クリップボードから貼り付け、または

実際のワークフローのために設計

本当に必要なすべての寸法、本当に使うすべての変換 — Photoshop は不要です。

8 ハンドルでのドラッグ切り抜き

8 つの角・辺のハンドルをドラッグしてクロップボックスのサイズを変更したり、ボックス自体をドラッグして位置を変更できます。三分割法のグリッドオーバーレイが構図づくりに役立ちます。

アスペクト比プリセット

1:1 (正方形 / IG / プロフィール)、4:5 (IG ポートレート)、9:16 (Stories / Reels / TikTok)、16:9 (YouTube)、3:2 / 2:3 (DSLR)、4:3 (クラシック)、または自由形式にスナップできます。コーナーのハンドルはサイズ変更時にロックされた比率を保持します。

回転 + 反転

ワンクリックで 90° 左 / 右に回転、左右 / 上下に反転できます。変換は切り抜きの前に適用されるため、描いたボックスが正確なまま保たれます。

書き出し時のフォーマット変換

PNG (ロスレス)、JPG (品質 50〜100% のスライダー付き)、WebP (最高の圧縮率、同じ視覚品質で JPG より約 30% 小さい)、または入力フォーマットのまま保存できます。

プライバシー設計

すべてのバイトはあなたのデバイスにとどまります。画像はブラウザ内でデコードされ、canvas 上で切り抜かれ、canvas.toBlob で書き出されます。DevTools → Network を開けば、外部へのリクエストがゼロであることを確認できます。

小さく、速く

純粋な JavaScript、フレームワークのランタイムなし。コールドロードは gzip 圧縮で 25 KB 未満。4000 × 3000 ピクセルの画像を切り抜いて書き出すのに 200 ms 未満で完了します。

画像を切り抜く方法

ドロップからダウンロードまで 4 ステップ。

  1. 1

    画像を読み込む

    任意の画像ファイル (JPG、PNG、WebP、AVIF、GIF、BMP) をドロップゾーンにドラッグするか、ファイルを選択をクリックするか、Ctrl/Cmd+V でクリップボードから貼り付けるだけです。画像はブラウザ内でローカルにデコードされ — アップロードは一切行われません。

  2. 2

    アスペクト比を選ぶ (または自由のまま)

    画像を使用する場所に合わせてプリセットを選択します — Instagram スクエアには 1:1、IG ポートレートには 4:5、Stories / Reels / TikTok には 9:16、YouTube には 16:9、DSLR 形状の写真には 3:2。または「自由」のままで任意のカスタム比率を使用できます。

  3. 3

    ドラッグして調整

    8 つの角・辺のハンドルをドラッグしてクロップボックスのサイズを変更したり、ボックス自体をドラッグして位置を変更できます。三分割法のグリッドオーバーレイが構図づくりに役立ちます。アスペクト比をロックしている場合、コーナーのハンドルは自動的に比率を保持します。元画像が逆さまや反転している場合は回転 / 反転を使用してください。

  4. 4

    書き出す

    出力フォーマットを選択 — 入力フォーマットを保つか、PNG (ロスレス)、JPG (品質 50〜100% スライダー)、WebP (同じ視覚品質で JPG より小さい) に変換します。ダウンロードをクリックすると、ファイルは元画像のフル解像度で保存されます — 画面上のプレビューによる品質低下はありません。

デザイナー、ソーシャルメディア担当者、スマホ写真を持つ親御さんのために

プライバシー優先のブラウザクロッパーが Photoshop を開くより優れている、4 つの一般的なシナリオ。

ソーシャルメディア投稿のサイズ調整

横向きのスマホ写真を 1:1 の Instagram 投稿にしたいですか? 1:1 にスナップして、被写体を中央に配置するようにドラッグし、ダウンロード。4:5 ポートレート、9:16 ストーリー、16:9 YouTube プリセットがその他をカバーします。

プロフィール写真の切り抜き

ほとんどのプラットフォームは 1:1 を強制します。正方形にスナップし、被写体の顔を上 1/3 に配置 (中央よりも見栄えが良い)、ダウンロード。結果は LinkedIn、Twitter / X、GitHub、Slack、Discord、企業のイントラネットに収まります。

商品写真のクリーンアップ

EC プラットフォームは一貫した比率を求めます — Shopify、Etsy、Amazon、Shopee はすべて 1:1 または 4:5 を好みます。三分割法のグリッドで構図の一貫性を保ちつつ、スマホで撮影した写真をプラットフォーム必須の比率に一括で切り抜きできます。

スマホ写真スクリーンショットのトリミング

スマホのスクリーンショットにはステータスバー、ナビゲーションクローム、アプリのはみ出しが含まれます。スクリーンショットをドロップし、コンテンツだけを残すようにクロップボックスをドラッグし、PNG (ロスレス) としてダウンロードすれば、再圧縮アーティファクトのない鮮明な UI スクリーンショットが得られます。

100% プライベート — ブラウザ内で動作

写真とスクリーンショットがあなたのデバイスを離れることはありません。DevTools → Network を開けば、切り抜き、変換、ダウンロード中に外部へのリクエストがゼロであることを確認できます。

  • 画像のデコード、canvas のレンダリング、回転 / 反転、PNG / JPG / WebP のエンコードはすべてあなたのマシン上で JavaScript として実行されます。
  • EXIF メタデータは再エンコード時に削除されます (これもプライバシー機能です — 写真の GPS の位置情報は書き出しに残りません)。
  • ログインなし、画像コンテンツのテレメトリーなし、サードパーティの画像 API なし。cookie 同意状態用に 1 つ、言語設定用に 1 つの cookie を使用するだけです。

関連ガイド

ソーシャルメディアのサイズ、写真の構図、画像のプライバシーに関する厳選された記事。

よくある質問

[プラットフォーム] にはどのアスペクト比を使うべきですか?

Instagram スクエア投稿: 1:1。Instagram ポートレート投稿: 4:5。Instagram / Facebook / TikTok / YouTube ストーリー: 9:16。YouTube 動画サムネイル: 16:9 (最低 1280×720)。X (Twitter) 投稿画像: 16:9 または 1:1。LinkedIn 投稿: 1.91:1 (16:9 に近い)。DSLR / スマートフォンカメラの写真: 3:2。クラシックな 35 mm または古いデジタル: 4:3。

出力は元画像と同じ解像度ですか?

はい。画面上の canvas は表示用に縮小されますが、切り抜きの計算は元画像の座標空間 (オリジナルピクセル) で実行されます。ダウンロードをクリックすると、書き出し用の canvas は元画像の切り抜きピクセル寸法そのままにサイズが設定されます — 画面上のスケーリングによる品質低下はありません。4000×3000 の元画像を 1000×1000 の正方形に切り抜くと、フル品質の 1000×1000 画像として書き出されます。

スマートフォンで撮った写真がときどき横向きに表示されるのはなぜですか?

スマートフォンのカメラは実際のピクセルを回転させる代わりに、EXIF オリエンテーションタグを埋め込みます。一部のブラウザ (古い Safari など) は自動的にこれを適用しますが、適用しないものもあります。画像が横向きに見える場合は、回転ボタンをクリックしてください — クロッパーは正しい向きのバージョンを切り抜きと書き出しに使用します。

JPG を切り抜くと再エンコードされて品質が落ちますか?

はい。JPG は不可逆フォーマットなので、canvas.toBlob('image/jpeg') 経由の保存はすべて再エンコードを伴います。デフォルトでは品質 92% (ほとんどの写真で元画像と視覚的に区別できないレベル) です。完全にビット単位で同一の忠実度が必要な場合は、出力フォーマットに PNG (ロスレス) を選択するか、同じ視覚品質で約 30% 小さなファイルを得られる WebP を選択してください。

サーバーに何か送信されますか?

いいえ。ファイルは FileReader で読み込まれ、ブラウザの Image にデコードされ、canvas 上に描画され、canvas.toBlob で書き出されます。すべてのステップはあなたのデバイス上の JavaScript で実行されます。DevTools → Network を開けば、切り抜きやダウンロード中に外部へのリクエストがゼロであることを確認できます。cookie は cookie 同意状態用に 1 つ、言語設定用に 1 つ使用するだけです。