画像を正確なピクセル数で切り抜く方法
画像を画像トリミングツールにドロップし、切り抜き枠をドラッグするか正確なピクセル数の矩形を入力し、出力先が必要とする場合はアスペクト比をロックしてから、切り抜いてダウンロードします。残すピクセルはそのままコピーされ、再エンコードでにじむこともなく、写真がブラウザの外に出ることもありません。5つのステップそれぞれに、画面上で確認できるチェックが付いています。
画像を正確なピクセル数で切り抜く方法とは
「600×600にしてほしい」という依頼の裏には、アバター、商品写真、リンクプレビュー、そしてWeb上のフォームの半分があります。そしてこの依頼は、無言のうちに正確さを求めています。「もう少し小さく」でも「だいたい正方形」でもなく、このピクセル数の、この矩形です。スマートフォンでそれらしく見えるまで枠をドラッグして願うのは手順とは言えません。このページはその丁寧な版です。確認付きの5ステップで、すべてブラウザ内で行います。
使うツールは、このサイトの画像トリミングツールです。ファイルをドロップすれば、切り抜きはローカルで行われます。画像はタブ内でデコードされ、あなたが定義した矩形のピクセルだけが生き残り、結果はブラウザから直接ダウンロードされます。写真は人が持つファイルのなかでも特に個人的なものですから、このローカル性は贅沢ではありません。アップロードはなく、他人のサーバーにコピーは残らず、Networkパネルなら10秒でそれを証明できます。
このページで一番の働きをする区別を、はじめに述べておきます。切り抜きはピクセルを取り除き、生き残ったものをそのまま保ちます。リサイズはすべてのピクセルを再サンプリングし、細部を寸法と引き換えにします。正確な矩形への切り抜きは、この2つのうちロスレスの側です。だからこそこの手順は、「残したものには一切手を加えていない」と正直に約束できるのです。
このページのステップはすべて画像トリミングツールのなかで実行されます——ファイルをドロップし、矩形を定め、結果をダウンロードするだけです。
PNGとJPG、WebPの使い分け自体が疑問なら、画像フォーマットのガイドが、切り抜き結果をどの形式で保存すべきか、そしてその理由を解説しています。
手順
画像をページにドロップする
画像トリミングツールを開き、ファイルをドロップするか、いつもの方法で選択します。画像はブラウザ内でデコードされ、実際の寸法のまま表示されます。ツールが示すのは本当のピクセルサイズであって、元画像のふりをする拡大縮小済みサムネイルではありません。サイズについての嘘の上では、正確なピクセル作業が自滅するからです。
確認：画像が、そのそばに実際の幅×高さを示した状態で現れ、アップロードは一切行われていません。確認すれば、Networkパネルは静かなままです。iPhoneで撮ったHEIC写真は、先に変換が必要な場合があります。ツールはごまかさず、その旨を伝えてくれます。
矩形を定義する——ドラッグまたは数値入力で
まず画像の上で枠をドラッグして大まかに合わせます。次に——ここが作業を正確にするステップです——キャンバスの横にある数値フィールドを確認してください。矩形はx、y、width、heightのピクセル値として表され、すべて編集できます。600と600を入力することが、「だいたい正方形」を正確な正方形に変える方法です。ドラッグだけでは、出力先が求めた数値にぴったり着地することはまずありません。
確認：widthとheightのフィールドには、意図したとおりの正確な数値が表示されています。入力したのなら、構成上正確です。ドラッグしたのなら、この数値こそが、ドラッグが正直だったかどうかを確認する手段です。
出力先が必要とする場合はアスペクト比をロックする
出力先が矩形ではなく形状を求めるなら——アバターには1:1、サムネイルとバナーには16:9、Open Graphのリンクプレビューには1.91:1、定番の写真比率には4:3や3:2——比率をロックしてください。枠は、動かしてもリサイズしても、その形状を保ちます。プリセットがキャンバスの横に並んでいるのは、まさにこのケースのためです。
確認：比率をロックした状態で角をドラッグすると、widthとheightの組は約束された比率を保ちます（1:1で幅600の枠は、高さ600のままです）。各プリセットのそばには用途の説明があるため、比率を暗記する必要はありません。
切り抜く——残るピクセルは元のピクセル
切り抜きを実行します。ツールが作るのは、定義した矩形を元画像からそのまま書き出したものです。残した領域の再エンコードはなく、再サンプリングもなく、議論の余地のある画質ダイヤルもありません。切り抜きがロスレスであるとは、枠の内側のピクセルが写真にあったものとまったく同じピクセルである——ただし数が減っている——という厳密な意味でです。
確認：結果の寸法は、ステップ2の矩形と完全に一致します。この一致こそがこのツールの契約のすべてであり、切り抜きが終わった瞬間に確認できます。
ダウンロード——中身がわかる名前で保存する
結果を保存します。ダウンロードはブラウザ内で生成され、ファイル名はoriginal-stem-WIDTHxHEIGHTというパターンに従います——vacation-600x600のようになります。半年後に開かなくても、ファイル名が中身を教えてくれます。出力先が形式も指定している場合（透過にはPNG、写真にはJPG）は、画像フォーマットのガイドがその選択を扱っています。切り抜き自体は形式を変えません。
確認：保存したファイルはどこでも開け、ステップ2と寸分違わぬ寸法を示し、切り取られたピクセルの割合に応じて元より小さくなっています。ディスク上の元ファイルには、何の手も加えられていません。
正確なピクセル数と、目分量のドラッグの違い
ドラッグだけの切り抜きは、視覚インターフェース付きの当てずっぽうです。キャンバスは黙って嘘をつきます——見えているのは画面に合わせて拡大縮小された像で、ノートPCの上で正方形に見える矩形が、実際のピクセルではほとんど正方形ではありません。数値フィールドこそが真実です。そこにあるのは切り抜きで実際に使われる正確な整数値であり、そこへ入力することこそが、作業を「おおよそ」から「正確」へ引き上げます。
このツールが想定して作られたワークフローは、この2つの組み合わせです。配置はドラッグ、正確さは数値。まず顔や商品など、大事な領域のおおよそに枠をドラッグします。次に出力先が求めた幅と高さを入力し、xとyを微調整して構図を整えます。ドラッグが速さをくれ、数値が約束をくれます。
実際に依頼されるアスペクト比
ツールのプリセットは、実際の依頼に繰り返し現れる比率です。アバターと商品写真には1:1、定番の写真比率には4:3と3:2、動画に近いバナーには16:9、SNSやメッセージアプリが描くリンクプレビューには1.91:1。「正方形のアバター」や「リンクプレビュー用の画像」という依頼は、このうちのどれかを指しています。比率をロックすれば、依頼は願望から、構図を整えている間ずっとツールが守ってくれる制約に変わります。
比率とサイズは別々の制約で、どちらを与えられたのかを見分ける価値があります。「600×600」なら両方です。「正方形」は比率だけを指し、ピクセル寸法はその範囲内で自分で選びます。目標サイズなしで比率だけをロックするのは構いません。比率なしで目標サイズだけ入力すると、598×601のような出来上がりになります。
切り抜きはリサイズではない——だから違いが重要
切り抜きはピクセルを取り除きます。残す矩形はそのまま正確に書き出されるため、ぼやけたりにじんだりする余地がありません。リサイズは画像を新しい寸法へ再サンプリングします。すべてのピクセルが再計算され、細部は補間されるか捨てられ、無理な拡大から絵が水彩画のように見え始めます。両者は、依頼の中の違う文に答えるための、違う道具です。
幅4000の元画像に対する「600×600にして」は切り抜きです。出力先は矩形を求めており、元画像には十分な余裕があります。矩形の指定がない「この幅4000の写真を600ピクセルに収めて」はリサイズです。間違った方を実行すると、正しい方を無駄にします。全景をリサイズしてから結果を切り抜くのは、得るものなくピクセルを再サンプリングしているだけです。先に切り抜き、後にリサイズ——あるいは、リサイズ自体が不要だったと気づくことになります。
切り抜きがタブ内で行われる理由
写真は、ほとんどの人が扱うファイルのなかで最も個人的なものです。部屋の様子、顔、書類、明日の予定が書かれたホワイトボード。アップロード型の切り抜きツールは、まさにそのデータを、いつまで保存されるかもわからないサーバーへ送るよう求めます。切り抜きほど小さな処理のために、この取引が割に合ったことは一度もありません。ここでは、画像のデコードも切り抜きも再パッキングも、自分のブラウザが行います。Networkパネルがその受領書です。画像を運ぶリクエストは存在しません。
メタデータの観点がプライバシーの話を完成させます。領域を切り抜けば、その領域のピクセルは残ります。しかしブラウザが新しく書き出す結果には、元ファイルのEXIFブロック——GPS座標、カメラの機体、タイムスタンプ——は含まれません。メタデータの完全な除去という本来の仕事なら、サイトにはそのための専用ページがあります。共有に使う大半の切り抜きでは、結果がローカルで書き出されることの副作用として、それは自然に起こります。
よくある質問
切り抜きをすると画質は落ちますか？
いいえ。切り抜きはピクセルを取り除き、生き残ったものをそのまま保ちます。再サンプリングはなく、残した領域の再圧縮もなく、矩形内の何ものも再計算されないため、画質スライダーもありません。結果は、残した解像度のままくっきりしています。切り抜きのワークフローで画質が落ちるとすれば、それはリサイズのステップか、非可逆形式での繰り返し保存のせいであって、切り抜き自体ではありません。
ドラッグの代わりに正確なピクセル数を入力できますか？
はい。正確なピクセル数が要件の作業では、入力すべきです。矩形は実際のピクセル値のx、y、width、heightとして現れ、すべて編集できます。600と600を入力すれば、目分量ではなく構成として600×600の切り抜きが得られます。効率のよい習慣は、配置をドラッグで決め、出力先が実際に指定した数値を入力することです。
切り抜いたファイルが元より小さくなるのはなぜですか？
含まれるピクセルが減るからです。それこそがこの操作の要点です。サイズは取り除いた面積におおむね比例して減り、さらにブラウザが元ファイルのメタデータブロックなしで結果を新しく書き出すことも一因です。圧縮の妙ではありません。画像の半分を切り抜けば、およそ半分の大きさになる。それだけの話です。
切り抜きで写真のGPSやカメラのメタデータは消えますか？
通常は消えます。切り抜きの結果はブラウザが新しく書き出すため、元ファイルのEXIFブロック——GPS座標、カメラの機種、タイムスタンプ——は一緒に運ばれません。副作用に頼るのではなく、メタデータの除去自体が仕事であるなら、サイトのEXIF除去ページが確実に実行し、何が残ったかを正確に教えてくれます。
どの画像形式を切り抜けますか？
ブラウザがネイティブにデコードできる形式——JPG、PNG、WebPなど——は、そのまま読み込んで切り抜けます。注意すべき例外は、iPhoneが標準で撮影するHEICです。まずJPGに変換してください。サイトのHEICコンバーターがローカルで処理します。出力形式の選択は切り抜きとは別の話で、画像フォーマットのガイドが、PNG、JPG、WebPのどれを残すべきかを解説しています。
切り抜きを元に戻せますか？
ディスク上の元ファイルは決して変更されません。ツールは読み取りと、新しいファイルの書き出しを行うだけです。だから「元に戻す」は、元画像から切り抜き直すだけの話になります。結果に満足できる確信が持てるまで元の写真を残し、すべての切り抜きを、古いファイルの新バージョンではなく新しいファイルとして扱ってください。この習慣こそが、この操作を恐れなくてよい理由です。