無料画像クロッパーオンライン

プリセットのアスペクト比またはカスタム選択エリアで画像をトリミングします。切り抜いた結果をすぐにダウンロードできます。

ファイルはお使いのデバイスから出ません
ここに画像をドロップ またはクリックして参照

JPEG、PNG、WebP、GIF、BMP、TIFF、AVIFに対応 · 最大50MB

画像をトリミングする方法

  1. 上に画像をアップロードまたはドロップします。
  2. アスペクト比のプリセットを選択するか、任意の形にするには「自由」を使用します。
  3. 残したい領域にトリミング選択をドラッグします。コーナーハンドルを使ってサイズを変更できます。
  4. 「画像をトリミング」をクリックして結果をダウンロードします。

クロッピングの簡単な歴史

クロッピングはデジタル編集より1世紀以上古いです。アナログ時代に写真をクロッピングすることは物理的な行為でした: 拡大機のランプが印画紙に露光する前に、マスク、イーゼルブレード、または厚紙をどこに置くかを決定することを意味しました。作業中の暗室では、拡大機はネガをレンズを通して感光性紙のシートに投影し、紙は重い金属フレームのイーゼルに平らに置かれ、紙の余白に重なる調整可能なバンドがあります。バンドを内側に引くと、紙の小さな窓だけが露光されます。新聞や雑誌のフォトエディターにとって、ワークフローはさらに物質的でした: エディターは、グリースペンシル(通常は赤、時には青)を使用してコンタクトシートに直接クロッピングの決定をマークし、拡大したい各フレームの部分の周りに長方形を描きました。グリースペンシルは、光沢のあるプリントのエマルジョンに滲まずに書けるため好まれました。Magnumの正典的人物であるアンリ・カルティエ＝ブレッソンは、その慣行を有名に拒否し、フルフレーム印刷とシャッターを切る瞬間にビューファインダー内で構図することにこだわり、後のクロップをシャッターに対する知的不正と見なしました。(彼が通常引用される例外は、1932年の画像Behind Gare Saint-Lazareです。そこでは、彼はフェンスの穴を通して撮影しており、フレームを埋めるために物理的に近づくことができませんでした。)アンセル・アダムスは反対側に立っていました: 彼の細心の注意を払った暗室の実践は、クロッピングを最終的なプリントを形作るための多くのツールの1つとして扱い、バーニング、ドッジング、コントラストフィルタリング、選択的漂白と並んで扱いました。現代の画像エディターのクロップのツールバーアイコン、空の長方形を囲む2つの直角、は、写真家がコンタクトシートで潜在的なクロップを手動で枠にするために使用したL字型の紙ガイドの様式化された描画です。

人気のアスペクト比

アスペクト比は幅と高さの比率を記述します。現代のソーシャルプラットフォームにはそれぞれ1つ以上の「優先」比率があり、間違った比率でアップロードすると、プラットフォームがあなたに代わってクロップまたはレターボックスを行います、通常はうまくいきません。アップロード前に正しい比率に持っていくクロップツールは意味のある仕事をしています。プロダクションワークのために現在のプラットフォームドキュメントに対して確認してください、仕様は変動しますが、2026年時点で:

シネマ比率、ワイドプリセットの由来

Academy比率(1.375:1、口語的によく4:3と呼ばれる)。 サイレント映画は35 mmフレーム全体を使用して約4:3で撮影されました; 1920年代後半に光学サウンドオンフィルムが到着したとき、サウンドトラックのストライプが画像エリアに食い込みました。Academy of Motion Picture Arts and Sciencesは、1932年2月16日の指令で新しいアパーチャ寸法を指定し、結果は1.375:1のフレームで、Academy比率と命名され、1932年から1952年までのほぼすべてのハリウッド映画がこの形式で撮影されました。CinemaScope (2.55:1 → 2.35:1 → 2.39:1)。 その背後にある技術は1920年代に遡り、フランスの発明家Henri ChrétienがHypergonarアナモルフィックレンズを特許取得しました。20th Century Foxは1953年1月12日に彼との契約に署名し、1953年2月2日にすべての将来のFoxプロダクションがその技術を使用すると発表しました; The Robeは最初の商業CinemaScope長編として1953年9月にプレミアしました。元の比率は2.55:1; 1956年にサウンドトラックが組み込まれたとき、2.35:1に縮小しました; SMPTE 195-1993は2.39:1を現代の標準として確認しました。American widescreen flat (1.85:1)、Universal Picturesは1953年5月20日にThunder Bayで導入しました; 非アナモルフィック、上下のハードマッティングで達成。16:9 (1.7777...:1)は1984年にSMPTE HDTV Working GroupのKerns H. Powersによって最初に提案され、当時のシネマ標準間の幾何学的中点として選ばれました。ITUは1990年にそれを国際HDTV標準として採用しました; FCCは1996年にATSCを採用しました; 最初のATSC放送は1998年10月28日に生中継されました。すべての現代のテレビ、モニター、ラップトップ画面、YouTubeサムネイル、HDMI信号は、依然として名目上16:9です。

三分割の法則、まだ使用されている1797年の構図ルール

「三分割の法則」というフレーズは、1797年に出版されたJohn Thomas SmithのRemarks on Rural Sceneryに登場します。Smithは英国のエングレーバーかつ古物研究家でした; 彼の本は表向きには絵画的に関する文章を伴う20のコテージのエッチングのコレクションでした。Smithは通りすがりに、絵画における光と暗の均衡に関する1783年のSir Joshua Reynoldsの講義を引用し、その後、同じ論理を「三分の二のルール」に拡張することを提案し、何世紀も後にアマチュアおよびプロの写真撮影の標準的な構図ヒューリスティックになるものを造語しました。クロップツールは、ライブクロップ選択に3x3グリッドをオーバーレイすることでルールを表現します; 水平線、強い垂直(木の幹、人物)、または焦点を4つの交差ノードの1つに揃えることが標準的なアドバイスです。三分割を超えて、いくつかの他の構図補助が真剣なクロップツールの標準オーバーレイになっています: 黄金比 (≈1.618:1)、三分割の法則がそれの簡略化であるとされるより深い数学的インスピレーションとして時々説明され、その分割線をフレームの約0.382と0.618の位置に配置します; フィボナッチスパイラルは、辺が1、1、2、3、5、8、13...に従う連続的に小さい正方形を描くことから出現し、ルネサンス絵画の構図がしばしばそれに対して分析されるものです; 対角法 / 黄金三角形はフレームを横切る対角線と各対角コーナーからの垂線を描き、強い斜線を持つシーンに適しています。このツールは現在それらのオーバーレイをレンダリングしません、文書化されたスコープ制限であり、将来の作業のための正直な機会です。

クロッピングが実際にどう起こるか、Canvas API

HTML Canvas APIは、元のWHATWG canvas仕様以来、クロッピングの幾何学的重作業を行う単一のメソッドをサポートしてきました: CanvasRenderingContext2D.drawImage()。これは3つの形式でオーバーロードされ、3番目、9引数の形式が、クロップするものです: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。最初の4つの数値引数はソース矩形を指定し、抽出するソース画像のサブ領域です。次の4つはキャンバス上の宛先矩形を指定し、そのサブ領域が描画される場所、宛先のサイズが異なる場合は暗黙のスケーリングを伴います。スケーリングせずにクロップするには、宛先キャンバスをソース矩形に正確に一致するようにサイズ設定し、dx = 0, dy = 0, dWidth = sWidth, dHeight = sHeightで描画します、これがまさにこのツールが行うことです。この単一の呼び出しは、ブラウザベースのクロップツールの拍動する心臓です。ピクセルがキャンバス上にあると、標準のエクスポートパスはcanvas.toBlob()で、選択したMIMEタイプ(PNG、JPEG、WebP)でキャンバスをBlobにシリアル化します。Canvas APIはまた、強力な隣接機能createImageBitmap()も公開し、そのimageOrientation: 'from-image'オプションは、ビットマップが返される前にJPEGに存在するEXIF-orientationの回転を適用します、それなしでは、横向きに保持された電話で撮られた写真はキャンバス上で90°回転して見えます。9引数のdrawImage()は2015年7月からベースラインで広く利用可能で、つまり現代の使用中のすべてのブラウザがそれをサポートしています。

ロスレス vs 再エンコード: JPEG警告

ブラウザベースのクロップツールに対する小さいながら重要な警告: Canvas APIは常にラスタライズし再エンコードします。JPEGをアップロードし、キャンバスにドロップし、drawImage()でクロップし、toBlob('image/jpeg', 0.92)でエクスポートすると、元のものの上に1サイクルの余分なロッシーDCT量子化を実行したばかりです。この現象は世代損失として知られており、JPEGはそれに対する感受性で有名です、各再保存は離散コサイン変換係数に新しい量子化エラーを導入します; クロマサブサンプリングは保存全体にわたって効果を悪化させ、クロマチャネルは徐々に柔らかくなり、色の境界が滲みます。Cloudinaryのよく知られた可視化は、50回再保存されたJPEGが認識可能だが目に見えて損傷した自身のカリカチュアに劣化することを示しています。標準的なアドバイスは、再編集したい可能性のある画像の変更されていないマスターコピーを保持することです。しかし、特定の幾何学的制約が満たされる場合、JPEGを再エンコードせずにクロップできる特別なトリックがあります。JPEG圧縮は8x8ピクセルブロック(またはクロマサブサンプリングで16x16マクロブロック)で動作します。クロップ境界がこれらのブロックエッジ、JPEG仕様がiMCU境界と呼ぶもの、に正確に落ちる場合、クロップされた領域はピクセルに戻して復号することなく、既存の圧縮されたDCT係数を再配置することで抽出できます。標準的な実装はjpegtranで、Independent JPEG Groupのlibjpegと一緒に出荷されるコマンドラインユーティリティで、Tom Laneによって組織され、1991年10月7日に最初にリリースされました。Canvas APIには同等のものがありません、ブラウザベースのJPEGクロップは常に再エンコードします; ツールができる最善は高品質設定を選択することです(このツールは92%を使用し、これは保守的で視覚的に有能です)。PNGとWebP-ロスレスの場合、状況は異なります: それらの形式はピクセルを決定論的にエンコードするので、同じ形式での再保存に続くクロップは、クロップされたピクセル上でビット完璧です。PNGは、ファイルサイズよりピクセル保存が重要な任意のクロップに推奨される出力形式です、例えば、スクリーンショットやUIモックアップ。

TouchとPointerイベント、なぜハンドルは十分に大きくなければならないのか

Pointer Events仕様が成熟するまで、デスクトップマウス、タッチスクリーン上の指、タブレット上のスタイラスで正しく動作する単一のドラッグハンドルを構築するには、3つのイベントファミリーをやりくりする必要がありました。Pointer Events Level 2は2019年4月4日にW3C Recommendationステータスに達し、これらをpointerdown、pointermove、pointerup、および基盤デバイスクラスを公開するpointerType属性を持つ単一の一貫したイベントファミリーに統一しました。クロップツールのユーザー対面の部分、クロップ選択をリサイズするためにドラッグするコーナーハンドル、それを移動するためにドラッグする中央領域、にはタッチエルゴノミクスが重要です。プラットフォームガイドラインは類似の数に収束します: Apple Human Interface Guidelinesは最小ヒットターゲット44x44ポイントを指定します; Material Designは48x48 dpを指定します; WCAG 2.5.5(レベルAAA、「Target Size」)は44x44 CSSピクセルを必要とします; WCAG 2.5.8(レベルAA、「Target Size (Minimum)」、WCAG 2.2で追加)は、間隔の例外を伴って24x24 CSSピクセル最小を必要とします。実際的な意味合い: 小さな8x8ピクセルの正方形として描かれたコーナーハンドルは、電話で掴むのが非常に難しいです。可視装飾は小さいままにすることができますが、基盤のヒット領域は透明パディングで拡張し、有効なターゲットが少なくともWCAG AAしきい値の24x24、理想的にはAAA / Appleガイダンスの44x44を満たすようにする必要があります。

ライブラリの風景、そしてこのツールがそれらのいずれも使用しない理由

支配的なオープンソースクライアントサイドクロッピングライブラリは、Chen FengyuanによるCropper.jsで、MITライセンス、2026年初頭時点で約13.8kのGitHubスターと約140万の週間npmダウンロードがあります。その機能セットは包括的です: タッチとマウス、マウスホイールとピンチズーム、フリー回転、水平および垂直反転、複数のアスペクト比モード、固定クロップフレーム内の移動可能な画像、豊富なイベントフック。react-image-cropはDominic TobiasによるReact固有の縮小コンポーネントで、ISCライセンス、5 KB gzipped未満です。PinturaはPQINAによる商用JavaScript画像エディターで、クロッピングとともにリサイズ、回転、フィルター、注釈、ステッカー、ウォーターマーク、編集ツールを含み、約13から317ドル/月のサブスクリプション層で販売され、Dropbox、Square、ConvertKitなどの企業に使用されています。smartcrop.jsはJonas Wagner (2014)によるコンテンツ認識クロッピングアルゴリズムで、画像処理ヒューリスティック(色彩度、エッジ検出)を使用してユーザー入力を待つのではなく、自動的に美的に合理的なクロップを見つけます。このツールは意図的にそれらのいずれも使用しません、小さく、単一目的の、フレームワークフリーの実装です。Cropper.jsと機能の幅で競合しようとしません; 1回の訪問、1つの画像、1つのクロップ、1つのダウンロード、アップロードなし、アカウントなし、CDNから引っ張られるスクリプトタグなしのために調整されています。

プライバシー: なぜブラウザのみがここで重要なのか

サーバーサイドクロッパー(iLoveIMG、Adobe Express、Canva、およびほとんどの「online image cropper」サイト)は、画像をサードパーティサーバーにアップロードする必要があります。iLoveIMGは2時間の削除ポリシーを文書化しています; Adobe ExpressとCanvaは類似だが変動する条件を持っています。最も細心の削除でも、アップロード自体はログに記録、傍受、または侵害される可能性のあるネットワークイベントです。普通の休暇写真の場合、これは問題ありません。EXIF GPSメタデータを持つ個人写真、PIIを含むドキュメントスキャン(パスポートページ、IDカード、税書類、保険フォーム)、内部作業UIのスクリーンショット、医療イメージング、または見知らぬ人のハードドライブにコピーされたくないその他のものに対しては、「画像は私のデバイスに留まる」が唯一の安全なアーキテクチャです。このツールは、ファイル選択、デコード、キャンバスクロップ、再エンコード、ダウンロードのクロップパイプライン全体を、JavaScriptを介してブラウザでローカルに実行します。アップロードなし、API呼び出しなし、ログエントリなし。クロップしている間にDevToolsのネットワークタブを開いて検証できます: 画像データを運ぶ送信リクエストはありません。さらに良いことに、ページがロードされた後にページをオフラインに(機内モードに)してクロッパーがまだ動作することを確認してください、何もアップロードされていないという最も強い実証的証明です。

よくある質問

トリミングすると画質は下がりますか？

いいえ。トリミングは選択した領域を元の解像度のまま切り出します。画質に影響する唯一の要素は出力形式です · JPEGはアーティファクトを最小化するため高品質設定（92%）を使用します。

正確なピクセルサイズでトリミングできますか？

トリミング選択はリアルタイムでピクセル寸法を表示します。正確なピクセルサイズには、トリミング後にImage Resizerツールを使用して結果を目的の寸法にスケーリングしてください。

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

いいえ。すべてのトリミングはCanvas APIを使用してブラウザ内で行われます。画像は常にお使いのデバイス上に保持されます。

どのアスペクト比を選ぶべきですか?

宛先プラットフォームに合わせてください。Instagramフィードのエンゲージメントはポートレート4:5(5:4垂直、1080x1350)を正方形1:1よりも好みます; YouTubeサムネイルは16:9(1280x720)です; TikTokとInstagram Stories/Reelsは9:16垂直(1080x1920)です; Open Graphを介したFacebook/LinkedInリンクプレビューは1.91:1(1200x630)です; Pinterestの標準ピンは2:3(1000x1500)です。印刷の場合、A系列の紙は1:√2(≈1:1.414); 35mmフィルムとほとんどのDSLRセンサーは3:2です; iPadと古い4:3写真は4:3です。特定のプラットフォームではなくアートのためにクロップしている場合は、「フリー」を使用してください。

私の画像はどこかにアップロードされますか?

いいえ。すべての処理、ファイル選択、デコード、クロップ選択、キャンバス再エンコード、ダウンロードは、JavaScriptとHTML Canvas APIを介してブラウザでローカルに行われます。画像はサーバーに送信されず、API呼び出しは行われず、ログエントリは作成されません。クロップしている間にDevToolsのネットワークタブで検証するか、ロード後にページをオフラインにしてクロッパーがまだ動作することを確認できます。GPS埋め込み付きの個人写真、PIIを含むドキュメントスキャン、内部作業UIのスクリーンショット、または見知らぬ人のハードドライブにコピーされたくない画像に対して安全です。

クロッピングはEXIFメタデータを取り除きますか?

はい、副作用として。Canvas APIはピクセルデータのみを保存するため、EXIF、IPTC、XMPメタデータブロック(カメラモデル、露出設定、GPS座標、著作権タグ)はラウンドトリップを生き残りません、クロップされた出力から消えています。これは、アップロード時にEXIFを取り除かないフォーラムやチャットアプリにクロップされた画像を共有するときのプライバシーの勝利です。メタデータを保持する必要がある場合(露出データをアーカイブする写真家、著作権タグを必要とするコンテンツワークフロー)、これは間違ったツールです、ImageMagickのconvertまたは明示的にメタデータを保持する専用のEXIF対応ライブラリを使用してください。

関連ツール

無料画像圧縮オンライン

画像を最大80%まで無料で圧縮。 ドラッグ＆ドロップで即ダウンロード。 ファイルはあなたのデバイスから離れません。

無料画像リサイザーオンライン

画像を無料で正確なサイズにリサイズ。 カスタムの幅と高さを設定し、縦横比を維持。 アップロード不要 - ブラウザで100%クライアントサイド処理。

無料画像変換オンライン

PNG、JPEG、WebPフォーマット間で画像を無料変換。 一度に複数のファイルをバッチ変換。 アップロードなし - 100% クライアントサイド処理。