JPG、PNG、WebP、AVIFをドロップして、透過PNG・WebP・AVIFで保存できます。JPEG背景色指定にも対応しています。
またはここに画像をドロップ
切り抜き中…
写真や画像をブラウザ上で円形に切り抜けます。PNG、JPG、WebP、AVIFのファイルをページにドロップすると、Cropper.jsが円形マスクのステージで開きます。ハンドルをドラッグして位置とサイズを調整し、保存をクリックすると透過PNGまたはWebP、AVIFでダウンロードできます。背景色を指定してJPGで保存することも可能です。入力できるファイルは25MBまで、最大16メガピクセルに対応しています。Chrome、Safari、FirefoxのいずれかであればWindows、Mac、iPhone、Androidのどの端末でも動作し、インストールは不要です。iPhoneカメラで撮影した4032×3024ピクセルの8メガピクセル写真でも、円形マスクの適用とPNGエンコードが約800ミリ秒で完了します。DevToolsのNetworkタブを開いて確認すると、切り抜き処理中にアップロードリクエストが発生しないことがわかります。LinkedInのプロフィール写真、Discordのアバター、Slackのチームアイコン、Instagram投稿の丸いサムネイルなど、四角い写真を円形の枠にきれいに収めたいときに役立ちます。保存した透過PNGはそのまま各サービスにアップロードできるので、別のアプリで再加工する手間も省けます。
JPG、PNG、WebP、AVIFをページにドロップすると、Cropper.js v2が円形のマスクステージで画像を開きます。暗いオーバーレイで切り取られる領域が、中央の明るい円で残る領域が示されます。円をドラッグして被写体を中央に配置し、コーナーハンドルでサイズを調整するか、タッチ操作ならピンチで拡大縮小できます。フレーミングが決まったら出力形式を選んで保存をクリックします。ブラウザがローカルでエンコードしてダウンロードが始まります。DevToolsのNetworkタブを開いた状態で操作すると、アップロード・ドラッグ・保存のいずれの段階でもPOSTリクエストが発生しないことを確認できます。
出力形式は4種類から選べます。PNGはロスレスで透過に対応し、ロゴやアバター用途の定番です。WebPはPNGより約25〜35%小さく、透過にも対応するためWeb掲載に向いています。AVIFはWebPよりさらに小さく仕上がりますが、モバイルでのエンコードに時間がかかります(8MPの写真で約30秒、実測値)。JPEGは背景色を指定したフラットな円形画像になり、エンコードは最も高速ですが透過には対応しません。透過を受け付けないプラットフォームに送る場合はJPEGを、迷ったらPNGかWebPを選ぶのが無難です。「ロスレス変換」とは謳いません。AVIFやJPEGは可逆ではない一方、PNGとWebP(q100)はロスレスで保存できます。
プラットフォームごとに必要なサイズが異なります。LinkedInのプロフィール写真は最小400×400pxで、プロフィール上は円形、フィードでは約48pxで表示されます。Discordのユーザーアバターはサーバーリストで128×128px、サーバーアイコンは最大512×512pxです。Instagramのプロフィール画像はモバイルで約110px、Slackのワークスペースアバターは最大512×512pxで、チャンネルリストでは約36pxの円形になります。本ツールは元画像の解像度でそのまま書き出します。特定のピクセル数が必要な場合は、先にリサイズしてから切り抜くと、アップスケールによる劣化なしにピクセル精度の出力が得られます。
正直な制約をまとめます。ファイルサイズは25MB、解像度は16メガピクセルが上限で、超えるとフレンドリーなエラーが表示されます。HEICはSafariのみ対応で、Chrome・Firefox・Edgeでは非対応です(技術的事実)。アニメーションGIFは最初のフレームのみが書き出されます。AVIFのモバイルエンコードは8MPで約30秒と遅めです。顔や被写体のAI自動検出は搭載しておらず、円形の配置は常に手動で行います。これらは欠点ではなくクライアント側で完結させるための割り切りです。競合の多くはこうした制限を明示しませんが、事前にわかっていたほうが結果的にスムーズに使えます。
Cropper.jsはブラウザのCanvas API上で動作し、円形マスクの適用もエンコード(canvas.toBlob、AVIFは@jsquash/avif)もすべてブラウザ内で完結します。DevTools > Networkタブを開いて操作すれば、切り抜き中にPOSTやPUTのリクエストが発生しないことを実際に確認できます。ダウンロードされるファイルはサーバーから取得されるのではなく、URL.createObjectURLで生成されたローカルのblob URLから取り出されます。マーケティングとして「画像は絶対に外に出ません」と書く代わりに、観察可能な技術的事実だけを記載します。実装の細部に興味があれば、Cropper.js v2はMITライセンスでgithub.com/fengyuanchen/cropperjsに公開されています。
ほとんどのSNSはアバターを円形フレームで表示します。四角い写真をそのままアップロードすると、自動トリミングで顔の位置がずれたり、余白が多くなったりすることがあります。先に自分で円形に切り抜いておけば、円の中に何を見せるかをコントロールできます。実際に何度かプロフィール写真を作って気づいたのは、顔を真ん中に置きつつ周囲に少し余白を残すと、各プラットフォームのサイズで縮小されたときに表情がよく伝わる、ということです。ロゴをバッジ風にしたいとき、チームのフォトグリッドを揃えたいとき、Discordサーバーアイコン(正方形ですが丸いアートを置くケースが多い)を作るときにも便利です。
アップロードエリアをクリックするか、JPG、PNG、WebP、AVIF、GIFのファイルを直接ドラッグ&ドロップしてください。円形切り抜きステージが自動的に開きます。
円をドラッグして顔やロゴを中央に配置し、ピンチ操作またはスクロールでサイズを調整します。
透過円形にはPNGまたはWebP、最小ファイルサイズにはAVIF、背景色を指定したい場合はJPEGを選びます。
ブラウザがローカルでエンコードしてデバイスにダウンロードされます。ファイル名は元の名前に-circleが追加されます。
このツールは円形ひとつに特化しています。自由な比率の長方形にはcrop imageを、Instagramフィード(1080×1080)用には正方形切り抜きや各プラットフォーム向けのcropツールを使ってください。
JPG、PNG、WebP、AVIF、GIF、BMPなどの画像をアップロードしてください。Cropper.jsが円形の選択範囲を画像の中央に自動配置して開きます。円をドラッグして被写体を合わせ、コーナーハンドルまたはピンチ操作でサイズを調整したら保存をクリックします。デフォルトでは透過PNGとしてダウンロードされます。一般的な写真であれば30秒以内で完了します。
JPG、PNG、WebP、AVIF、GIF(最初のフレームのみ、アニメーションは非対応)、BMP、SVGに対応しています。HEICはSafariのみcreateImageBitmapでネイティブ対応しており、Chrome・Firefox・Edgeでは非対応でエラーが表示されます。形式の判定はファイル名ではなくマジックバイトで行うため、拡張子を変更しても正しく検出されます。
PNG、WebP、AVIF、JPEGの4種類から選べます。PNGは円形以外の領域が透過になり、デフォルトの形式です。WebPはPNGより25〜35%小さく透過にも対応しています。AVIFは3種類の透過形式の中で最もファイルサイズが小さいですが、中程度のスペックのスマートフォンでのエンコードには最大30秒かかる場合があります。JPEGは指定した背景色でフラットな円形画像を生成しますが、透過には対応していません。
はい。PNG、WebP、AVIFはいずれもアルファチャンネルに対応しているため、円形以外の領域は完全に透過になります。ダウンロードしたファイルをデザインツールやメッセージアプリで開くと、透過部分はチェッカーボード模様で表示されます。JPEGを選択した場合は透過に対応していないため、外側の領域に塗りつぶしの色を指定するよう求められます。
ほとんどのSNSプラットフォームはプロフィール写真・アバター・サーバーアイコンを円形フレームで表示します。四角い写真をそのままアップロードすると、プラットフォームによる自動トリミングで顔が切れたり余白が多くなる場合があります。自分で円形にトリミングしておくと、円形枠内に表示される内容をコントロールできます。ロゴの丸いバッジ化やチームフォトグリッドにも活用できます。
iPhone、iPad、Androidのモダンブラウザで動作します。ドラッグハンドルはタッチ・ピンチ操作に対応しています。スマートフォンでの主な制限はAVIFエンコード時間で、高解像度写真では30秒以上かかる場合があります。PNGとWebPはより高速で、中程度のスペックのデバイスでも問題なく動作します。
良い円形クロップの背後にある技、フォーマット、小さな決定についてのチームからのメモ。