画像トリミング
画像切り抜きは、写真を欲しい部分に切り詰めます。枠をドラッグするか、正確な幅と高さを入力してください。枠の寸法は、画面上のプレビューではなく写真の実サイズに対して測られます。そのため600 × 240は、ウィンドウの大きさにかかわらず600 × 240のままです。残すピクセルには一切手を加えません。
ここに画像をドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： JPG, JPEG, PNG, WebP, AVIF, HEIC, HEIF
画像トリミングはどう動きますか？
切り抜きは、画質をまったく犠牲にしない唯一の画像操作です。他の編集はピクセルの再サンプリングや再量子化を行いますが、切り抜きはピクセルの矩形を残して残りを捨てるだけです。生き残るピクセルは、最初からあったピクセルそのままであり、1対1のスケールでより小さなキャンバスへ描かれます。
矩形をソースのピクセルで測る理由
このページのプレビューの幅は、レイアウトが割り当てた幅のままです。スマートフォンでは小さく、デスクトップでは大きく、ウィンドウをリサイズすればまた変わります。切り抜き矩形をその画面ピクセルで記憶していたら、同じドラッグでもブラウザウィンドウによって結果が変わり、丸めも毎回違う境界に落ちることになります。
そこで矩形は画像自身の座標系で保持し、プレビューはそこから射影します。同じ角をスマートフォンでもモニターでもドラッグすれば同じ切り抜きになり、数値ボックスには縮められた近似値ではなく、実際のピクセル値が表示されます。
アスペクト比と、それを固定する価値
画像が行き着く先のほとんどは特定の形を想定しており、こちらで指定しなければ先方側で切り抜きます。アバターは正方形、リンクプレビューは1.91:1、動画は16:9です。切り抜きを自分で選ぶことは、被写体がフレームに収まった肖像と、プラットフォームの中央切り抜きに首を斬られた肖像、その違いとして現れます。比率を固定しておけば、どの角をドラッグしても形は保たれ、変わるのはサイズだけです。
三分割法のガイド
切り抜きボックスに引かれた線は、それを9つに分割します。被写体をど真ん中ではなく交点の1つに置くのは、最も古くからある構図の助言です。中央に置かれた被写体は画像を平板化し、中央を外した配置には視線の行き場が残る。それが効く理由です。ガイドを描くコストはゼロであり、これがあるのは、切り抜きがサイズの決定であると同時に構図の決定だからです。
画質が関わってくる場面
切り抜き自体は可逆ですが、結果の書き出しは違います。出力がJPEGかWebPなら、残したピクセルは再エンコードされ、ソースがすでに受けている劣化の上に、さらに1世代分の非可逆圧縮が乗ります。だからこそ、このツールの品質コントロールは初期値を高くしています。PNGをPNGに切り抜く場合は、全体を通して完全に可逆です。
透明な画像はどうなるか
透明部分は、PNGやWebPへの切り抜きでは保持されます。JPEGには保持できません。アルファチャンネルがないためで、エンコードの前に透明領域が白と合成されます。これが、黒く出力されないための仕組みです。
すべてはあなたのマシンの中に留まる
画像はcreateImageBitmapでデコードされ、切り抜き矩形に合わせてキャンバスへ描画され、canvas.toBlobでエンコードされます。この3つはすべてブラウザ自身のコードで、このタブの中で動きます。写真がアップロードされることはありません。さらにこのページのContent-Security-Policyはconnect-src 'self'を設定しているため、何かが送信を試みても、ブラウザ自身がどこかへの送信を拒否します。
入力
portrait.jpg 3024 x 4032 ratio locked 1:1
出力
portrait-3024x3024.jpg 3024 x 3024 pixels kept, not resampled
画像トリミングが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 自由 | アスペクト比 | デフォルト | 任意の長方形。 |
| 1:1 | アスペクト比 | — | アバター、製品ショット、ほとんどのソーシャル投稿。 |
| 4:3 | アスペクト比 | — | クラシックなカメラとスクリーンの比率。 |
| 3:2 | アスペクト比 | — | 35mmフィルム、およびほとんどのDSLRセンサー。 |
| 16:9 | アスペクト比 | — | ビデオ、および広いバナー。 |
| 1.91:1 | アスペクト比 | — | Open Graphリンクプレビュー。 |
| X / Y / W / H | ピクセル | — | 画像自身の座標での切り抜き矩形。入力値とドラッグした値は同じ数値です。 |
| 品質 | 0.1 – 1.0 | 0.9 | 出力がJPGまたはWebPの場合に適用されます。デフォルトで高品質です。なぜなら、切り抜き自体は何も失わず、エンコードも同様に損失がないべきだからです。 |
| 入力と同じ | 形式 | デフォルト | PNGで入力、PNGで出力——これにより、操作全体が非損失になります。 |
よくある質問
切り抜くと画質は下がりますか？
切り抜き自体は下げません。元のピクセルの矩形をそのまま残し、残りを捨てるだけで、再サンプリングは一切行いません。画質を損ない得るのは結果の書き出しです。出力フォーマットがJPEGかWebPなら、残したピクセルは再エンコードされ、非可逆圧縮がもう1世代加わります。PNGをPNGに切り抜けば、操作全体が可逆です。このツールの品質スライダーの初期値が0.9なのはまさにそのためです。エンコードが、切り抜きが保ったものを台無しにしないように。
正確なピクセルサイズで切り抜くにはどうすればよいですか？
X、Y、Width、Heightのボックスに値を入力します。これらは画像自身の座標系での切り抜き矩形であり、ドラッグハンドルが作るのと同じ数値です。WidthとHeightを指定すれば正確な出力サイズになり、XとYは矩形の位置を決めます。特定のサイズではなく特定の形が必要な場合は、アスペクト比を固定してドラッグしてください。
どのアスペクト比を使えばよいですか？
アバターとほとんどのソーシャル投稿には1:1。Open Graphのリンクプレビュー、つまりURLを共有したときに表示される画像には1.91:1。動画のサムネイルと横長バナーには16:9。写真には4:3か3:2。カメラが本来出力する比率です。切り抜きを自分で選ぶことが重要なのは、そうしなければ行き先が勝手に切り抜くからで、たいてい中央から、たいてい下手に切り抜かれます。
複数の画像を一度に切り抜けますか？
このツールではできません。それは意図的な仕様です。切り抜き矩形はフレーム内の被写体に固有のものであり、同じ座標を20枚の写真に適用すれば、大半で被写体が切り捨てられます。リサイズや変換のように、均一に適用して初めて意味がある一括操作なら複数ファイルを受け付けます。切り抜きは1枚ごとの判断なので、このツールは1枚の画像を受け取り、その判断をきちんと下すためのコントロールを提供します。
端の外へドラッグすると切り抜きボックスが戻されるのはなぜですか？
矩形は画像にクランプ（制限）されているからです。切り抜きには、存在しない領域を含められません。アスペクト比を固定している場合、片方の端に当たると、形を保つ必要からもう一方の寸法も制限されます。つまりボックスは間違った形になる代わりに、それ以上大きくなりません。その制約なしにポインターに追従させたい場合は、Freeに切り替えてください。
切り抜きのために画像はアップロードされますか？
いいえ。デコード、キャンバスへの描画、エンコードのすべてが、ブラウザ自身の画像コードを使ってこのタブ内で完結します。DevToolsのNetworkパネルで確認できます。切り抜きではリクエストが一切発生しません。このページはconnect-src 'self'付きで配信されているため、別のオリジンへデータを送ろうとする試みは、ブラウザ自身がブロックします。