クロップ

円形トリミング 画像を切り抜き

最適化

画像を圧縮 AI画像アップスケーラー 背景を削除

編集

画像サイズを変更

変換

その他

画像をPDFに変換

Aralumaの仕組み

各ツールが何を実行し、どこで実行するか、そしてご自身で検証できる方法の技術的詳細。

要点

Aralumaはハイブリッドアーキテクチャを採用しています。2つのツールはアップロードなしで完全にブラウザ内で動作し、残り2つのツールはブラウザ単体では品質が及ばない処理に限り、1回のネットワークリクエストを自社インフラ経由で行います。どちらのパスを使っているかは、各ツールとこのページで明示しています。

ツール処理場所
Circle Crop100%ブラウザ内、Canvas API。アップロードなし、オフライン動作可。
Compressプレビュー（スライダー＋フォーマット比較）100%ブラウザ内、canvas.toBlob。アップロードなし。
Compress最終ダウンロードapi.araluma.com（ドイツのVPS上のFastify＋sharp＋libvips）への1往復。
背景削除CloudflareのエッジGPUでBiRefNetを実行するCloudflare Workerへの1往復。クラウドに接続できない場合はブラウザ内のWebAssemblyフォールバックを使用。

クライアントサイドの動作は約30秒で確認できます。DevTools → Networkを開き、ログをクリアしてから、Circle Cropまたはプレビュースライダーを使ってみてください。画像のバイトデータを含むリクエストが一切発生しないことが確認できます。サーバーを経由する2つのツールでは、上記のエンドポイントへの1回のアップロードのみが表示されます。

なぜハイブリッドなのか

多くのオンライン画像ツールは、どちらかの極端な設計を採っています。すべてをサーバーにアップロードする方式（往復を待ち、運営者がファイルを保持する）か、すべてブラウザ内で処理する方式（エンコード・AI処理の品質と速度を犠牲にする）かです。どちらの極端も万能ではありません。

私たちは、ブラウザがすでに優れている処理にはクライアントサイドを選び、ブラウザが明確に劣る処理にはサーバーサイドを選びました。<canvas>要素はトリミング、回転、JPG/WebPの非可逆プレビューエンコードを担い、以下の処理はサーバー側で行います。

  • 画像圧縮（最終ダウンロード時）。 サーバーサイドのsharp＋libvips 8.17は、同じ画質でブラウザエンコーダーよりバイト単位で10〜15%小さいファイルを生成します。また、ブラウザが非対応のAVIFスピード/クロマチューニングやJPEG XL出力にも対応しています。スライダーとプレビューはブラウザ内で動作するため、試行錯誤は即座に行えます。「ダウンロード」タップ時のみサービスを経由します。
  • AI背景削除（デフォルトパス）。 Cloudflareのcf.image.segmentが実行するBiRefNetモデル（remove.bgと同じアーキテクチャ）は、1〜3秒で処理するために実際のGPUが必要です。ブラウザ内フォールバック（ONNX Runtime＋WebAssembly経由のISNet）も動作しますが、初回実行に20〜40秒、以降2〜10秒かかり、髪の毛・毛並み・細かいエッジの切り抜き品質は明らかに劣ります。

これら2つのパスでサーバーサイドを採用することで受け入れるコストは、1処理あたり1往復のみです。それ以外（Circle Crop、Compressプレビュー）をクライアントサイドに留めることで避けられるコストは、最も反復の多いワークフロー部分における往復のオーバーヘッドです。

パイプラインの詳細

1. ファイルを選択する

ファイルピッカー、ドラッグアンドドロップ、または貼り付けで画像を選ぶと、ブラウザはJavaScriptにFileオブジェクトを渡します。JavaScriptはFileReaderまたはBlob.arrayBuffer()を使ってバイトを読み取ります。この手順では、使用するツールに関係なく、ファイルがネットワーク越しに送信されることは一切ありません。

2. ブラウザが画像をデコードする

最新のブラウザはJPG、PNG、WebP、GIF、AVIFをネイティブにデコードできます。createImageBitmap()を使い、メインスレッド外で生のバイトをGPUが処理できるビットマップに変換します。ネイティブデコードに対応していないブラウザでHEICを扱う場合は、ブラウザ内でローカルに動作するWebAssemblyデコーダーにフォールバックします。

3. ツールが処理を行う — ここでパスが分岐します

  • Circle Crop。 円形クリップパスを使ったCanvas 2Dピクセル変換です。選んだ回転・ズームでビットマップを<canvas>に描画し、円形クリップを適用して、円の内側をImageDataとして読み返します。インタラクティブなトリミング枠の操作にはCropper.jsを使用しています。完全にブラウザ内で処理されます。
  • Compress — プレビューとスライダー。 画質スライダーを動かすたびに左右比較プレビューが更新されるよう、canvas.toBlobを使ってJPG、PNG、WebP、AVIFを再エンコードします。完全にブラウザ内で処理されます。 アップロードはまだ発生しません。
  • Compress — ダウンロード。 「ダウンロード」をタップすると、画像がapi.araluma.com（Hostinger運営のドイツVPS上のFastifyサービス、Node 24＋sharp 0.34＋libvips 8.17。Squooshのサーバーパスでも使われているCライブラリと同じです）へ1回送信されます。プレビューで設定したのと同じパラメーターで再エンコードされ、バイトがブラウザにストリームで返されます。サービスはテナント分離されたコンテンツアドレス指定のキャッシュ（入力バイト＋パラメーターのハッシュ）を500 MB上限で保持しており、同じ画像を同じ設定で再ダウンロードするとキャッシュされたバイトが返されます。このキャッシュはユーザー、IP、ファイル名によるインデックスは行っていません。サービスに接続できない場合は、ブラウザ内プレビューのblobにフォールバックします。
  • 背景削除 — デフォルトクラウドパス。 画像はCloudflare Worker（araluma-bg-remover）に1回アップロードされ、プライベートR2バケット（araluma-bg-temp）にステージングされた後、CloudflareのエッジGPUでBiRefNetモデルを実行するcf.image.segment変換によって処理され、切り抜き結果がストリームで返されます。ステージングされたR2オブジェクトはR2ライフサイクルルールにより結果に関わらず1時間以内に削除されます。一般的な写真は1〜3秒で完了します。1日あたりのIP別制限と5 MBのアップロード上限により、無料提供の継続性を確保しています。
  • 背景削除 — WebAssemblyフォールバック。 Workerに接続できない場合（ネットワーク障害、厳格なファイアウォール、1日の上限超過、またはファイルが5 MBのクラウド上限を超えた場合）、ツールは自動的にONNX Runtime WebとWebAssemblyを使ってブラウザ内でローカル実行されるISNetモデルに切り替えます。初回実行時に約80 MBのモデルをダウンロードし、20〜40秒かかります。以降は2〜10秒です。このパスではアップロードは発生しません — DevToolsで確認できます。

4. 結果をダウンロードする

出力ビットマップをBlobにエンコードし、object URLでラップしてブラウザ標準のファイル保存ダイアログに渡します。ファイルはディスクに保存されます。

自分で確認する方法

好きな方法を選んでください。

方法1 — Networkタブを確認する

  1. Aralumaを新しいタブで開き、DevTools → Networkを開く。
  2. Circle CropまたはCompressプレビュースライダーを使う。HTML/CSS/JS/フォントへのリクエストと、初回利用時の関連WebAssemblyモジュールのみが表示されます。画像のバイトデータを含むリクエストは一切発生しません。
  3. 次にCompress → ダウンロードまたは背景削除を使う。api.araluma.com（Compress）または背景削除WorkerへのPOSTリクエストが1件だけ表示され、画像が送信されて結果が返ってくることが確認できます。リクエストにカーソルを合わせるとサイズとタイミングが表示されます。

「Initiator」列は各リクエストを開始したスクリプトを示し、「Type」列は送信された内容を示します。どちらも隠していません。

方法2 — オフラインでツールを使う

  1. Aralumaの任意のツールページを読み込む。小さい画像で一度背景削除を使い、ブラウザ内ISNetモデルをキャッシュしておく。
  2. DevTools → Network → オフラインにチェックを入れる（またはWi-Fiをオフにする）。
  3. ページを再読み込みする。静的アセットはキャッシュされているため、引き続き読み込まれます。
  4. 各ツールを試す。
    • Circle CropとCompressプレビューは引き続き動作します — ネットワークが不要なためです。
    • Compressダウンロードはブラウザ内プレビューのblobにフォールバックします（やや効率の低いエンコードですが機能します）。
    • 背景削除はISNet WebAssemblyモデルにフォールバックし、アウトバウンドリクエストなしで動作します。

4つのツールがオフラインで動作した（1つはやや品質が下がり、3つは同一）なら、定義上サーバーはあなたの画像を見ていません。

私たちが見えていること・見えていないこと

クライアントサイドパスでは、画像について何も把握していません。見るべきリクエストがなく、保存するキャッシュもなく、grepするログ行もありません。

サーバーサイドパスでは：

  • Compressダウンロードでは、エンコード処理中（通常数百ミリ秒）のみ画像バイトを処理し、コンテンツアドレス指定のキャッシュエントリをキャッシュTTLの間保持します。それだけです。キャッシュはユーザー、IP、ファイル名、またはあなたの画像を特定できる識別子によるインデックスは行っていません。画像コンテンツのログは記録しません。エンコードサービスはカットオーバー前のv1と同じ2テナント間で共有され、テナント別CORS、レート制限、HMAC署名付き正規URLを使用しています。
  • 背景削除では、ステージングアップロードとセグメント化呼び出しの間（通常合計1〜3秒）のみ画像を処理し、その後ステージングコピーはR2ライフサイクルルールによって削除されます。あなたのバイトデータをサードパーティのモデルプロバイダーに送信することは一切ありません — BiRefNetモデルはCloudflare自身のインフラ内で動作しており、remove.bg / fal.ai / Replicateのような外部APIではありません。

すべてのパスにおいて、アナリティクスプロバイダー（Cloudflare Web Analytics）が集計ページビューデータ（URL、国、ブラウザファミリー、Core Web Vitals）を記録します。クッキーなし、永続識別子なし、個人と紐付くデータは一切ありません。

初回利用時にWebAssemblyモジュールをダウンロードするツール（HEICデコーダー、ISNet ONNXモデル）については、ホスティングプロバイダーがそのモジュールが取得されたことを把握します。CSSファイルの取得を把握するのと同じです。モジュール自体にあなたの画像に関する情報は一切含まれていません。

完全なデータの目録はプライバシーポリシーに記載しています。

技術スタック

詳細に興味がある方のために：

  • Astro — 静的サイトジェネレーター。すべてのページはプレーンHTMLとして配信され、インタラクティブなツールがある場所にのみプログレッシブエンハンスメントのJavaScript「islands」が使われます。
  • バニラCSSとカスタムプロパティ — TailwindもCSS-in-JSも不使用。デザインシステム全体が1つのtokens.cssファイルに収まっています。
  • canvas.toBlob / <canvas> — CompressプレビューとCircle Crop全体でのJPEG、PNG、WebP、AVIF（ブラウザ対応）エンコード。
  • Cropper.js — トリミング矩形インタラクションレイヤー。
  • ONNX Runtime Web — 背景削除のISNet WebAssemblyフォールバックを実行します。
  • Cloudflare Pages — 静的ビルドをホスティングし、エッジから配信。
  • Cloudflare Workers＋R2＋cf.image.segment（BiRefNet） — デフォルトの背景削除パイプライン。
  • Fastify＋sharp 0.34＋libvips 8.17（Node 24） — api.araluma.comのCompressダウンロードサービス。ドイツのHostinger VPS上で動作。
  • Cloudflare Web Analytics — クッキーなしの集計ページビュー計測。

ブラウザのサポート

すべてのツールは、Chrome、Firefox、Safari、Edgeの現行バージョンと1つ前のバージョンで、デスクトップ・モバイル問わず動作します。サイトはプログレッシブエンハンスメントを採用しており、新しいAPI（showSaveFilePicker、OffscreenCanvasなど）に対応したブラウザではそれを使い、未対応の場合は従来の代替手段にフォールバックします。「お使いのブラウザは対応していません」という壁はありません。

唯一の必須要件はJavaScriptです（どのツールでも）。ネットワーク接続はCompressダウンロードまたはデフォルトの背景削除パスを使用する場合のみ必要で、それ以外のパスは初回ページ読み込み後に完全オフラインで動作します。

ご質問

カバーしていない内容がありましたら、support@araluma.comまでメールでお問い合わせください。技術的なご質問も歓迎します。