クロップ

画像を丸く切り抜く 画像を切り抜く

最適化

画像を圧縮 画像を高画質化 背景を削除

編集

画像をリサイズ

変換

その他

JPGをPDFに変換

Aralumaの仕組み

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

要点

Aralumaはハイブリッドアーキテクチャを採用しています。ほとんどのツールはアップロードなしで完全にお使いのブラウザ内で動作し、一部のツールだけが、ブラウザでは品質が及ばない場合に限って、1回のネットワークリクエストを自社インフラ経由で行います。その際も、必ず目に見えないクライアント側フォールバックを備えています。どのパスを使っているかは、各ツールとこのページで明示しています。

下の表は代表例であり、すべてを網羅したものではありません（カタログは増え続けています）。各種類のパスを一つずつ例示しています。

ツールの例処理場所
Circle Crop（ブラウザのみ）100%お使いのブラウザ内、Canvas API。アップロードなし、オフライン動作可。
Compressプレビュー（ブラウザのみ）100%お使いのブラウザ内、canvas.toBlob。アップロードなし。スライダーは即座に反応します。
Compressダウンロード（サーバー経由）api.araluma.com（ドイツのVPS上のsharpとlibvips）への1往復。ブラウザ内フォールバック付き。
Remove Background（サーバー経由）エッジGPUでBiRefNetを実行するCloudflare Workerへの1往復。お使いのブラウザ内のWebAssemblyフォールバック付き。

トリミング、リサイズ、PDF、フォーマット変換の各ツール（AVIF出力のパスを除く）は、ブラウザのみの側にあります。圧縮のダウンロード、背景削除、AI拡大、AVIF出力の変換は、サーバー経由の側にあり、それぞれにローカルのフォールバックがあります。

ブラウザのみという説明は、約30秒で確認できます。DevToolsを開き、Networkパネルへ移動し、ログをクリアしてから、ブラウザのみのツールを使ってみてください。画像のバイトデータをページの外へ運ぶリクエストはゼロです。サーバー経由のツールでは、上記のエンドポイントへの1操作あたり1回のアップロードのみが表示されます。

なぜハイブリッドなのか

多くのオンライン画像ツールは、どちらかの極端に位置しています。すべてをサーバーへアップロードする方式（往復を待ち、運営者がファイルを保持します）か、すべてブラウザ内で処理する方式（エンコードとAIの段階で品質と速度を犠牲にします）です。どちらの極端も、あらゆる場面で勝るわけではありません。

私たちは、ブラウザがすでに優れている処理にはクライアント側を選びました。<canvas>要素はトリミング、回転、リサイズ、そしてJPGやWebPでの非可逆プレビューエンコードをこなし、最新のブラウザはあらゆる一般的なフォーマットをネイティブにデコードします。そして、ブラウザが今なお測定可能なほど劣る、ごく一部の処理にのみサーバー側を選びました。

  • 圧縮、最終ダウンロード時です。サーバー側のsharpとlibvipsは、同じ見た目の品質でブラウザのエンコーダーよりバイト単位で10〜15%小さいファイルを生成し、ブラウザにはないAVIFの速度・クロマ調整も使えます。スライダーとプレビューはお使いのブラウザ内で動作し続けるため、試行錯誤は即座に行えます。「ダウンロード」のタップ時のみ、私たちのサービスを経由します。
  • AI背景削除、デフォルトのパスです。Cloudflareの画像セグメンテーションが実行するBiRefNetモデル（remove.bgと同じアーキテクチャ）は、1〜2秒で仕上げるために実際のGPUを必要とします。ブラウザ内フォールバック（ONNX RuntimeとWebAssembly経由のISNet）も動作しますが、はるかに時間がかかり、髪の毛、毛並み、細かいエッジで目に見えて粗い切り抜きになります。
  • AI拡大、デフォルトのパスです。クラウドの超解像は、ブラウザ側のリサンプリングでは得られないディテールを取り戻します。サービスに到達できないときはブラウザ内フォールバックを使います。

これらのパスでサーバー側を採るために受け入れるコストは、1操作あたり1往復です。それ以外をクライアント側に留めることで避けられるコストは、最も反復の多いワークフローの部分における、その同じ往復の負担です。

パイプラインの詳細

1. ファイルを選ぶ

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

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

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

3. ツールが処理を行う、ここでパスが分かれます

  • ブラウザのみのツール（トリミング、リサイズ、圧縮のプレビューとスライダー、PDFの組み立て、そしてほとんどのフォーマット変換）。これらはCanvasのピクセル変換とcanvas.toBlobの再エンコードとして、まさにお使いのマシン上で動作します。インタラクティブなトリミング枠にはCropper.jsを使います。何もページの外へ出ません。
  • 圧縮のダウンロード。「ダウンロード」をタップすると、画像はapi.araluma.com（ドイツのHostinger VPS上のFastifyサービス、NodeとSquooshがサーバーパスで使うのと同じCライブラリであるsharp・libvips）へ1回だけ送られます。プレビューで設定したパラメーターで再エンコードされ、バイトがストリームで返ってきます。サービスはテナント分離されたコンテンツアドレス指定のキャッシュ（入力バイトとパラメーターのハッシュ）を保持しており、同じ画像を同じ設定で再ダウンロードするとキャッシュされたバイトが返されます。このキャッシュは、あなた、IP、ファイル名でインデックスされません。サービスに到達できない場合、ツールはブラウザ内プレビューのblobにフォールバックします。
  • 背景削除、デフォルトのクラウドパス。 画像は1回だけCloudflare Workerへアップロードされ、プライベートなR2バケットに一時保管された後、エッジGPUでBiRefNetモデルを実行するCloudflareの画像セグメンテーションによって処理され、切り抜きがストリームで返されます。一時保管されたオブジェクトは、結果にかかわらず、R2のライフサイクルルールにより1時間以内に削除されます。一般的な写真は1〜2秒で完了します。1日あたりのIP別上限とアップロードサイズ上限により、無料提供を持続可能に保っています。
  • 背景削除、WebAssemblyフォールバック。 Workerに到達できない場合（ネットワークが切れた、厳格なファイアウォールが遮断した、1日の上限に達した、またはファイルがクラウドの上限を超えた場合）、ツールはONNX Runtime WebとWebAssemblyを通じてローカルで動作するISNetモデルへ、何も告げずに切り替えます。初回はモデルをダウンロードするため時間がかかり、以降は速くなります。このパスではアップロードは発生しません。DevToolsで確認できます。
  • AI拡大。 デフォルトのパスでは、画像を1回だけクラウドの超解像サービスへ送り、拡大した結果をストリームで返します。サービスに到達できない場合はブラウザ側のフォールバックを使います。

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

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

自分で確認する方法

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

方法1. Networkタブを見る

  1. Aralumaを新しいタブで開き、DevToolsを開いて、Networkパネルへ移動します。
  2. Circle CropやCompressプレビュースライダーのようなブラウザのみのツールを使います。HTML、CSS、JS、フォントのリクエストと、初回利用時の関連WebAssemblyモジュールだけが表示されます。画像のバイトデータを運ぶリクエストは一切ありません。
  3. 次にCompressダウンロードやRemove Backgroundのようなサーバー経由のツールを使います。画像を上記のエンドポイントへ運ぶPOSTがちょうど1件と、結果が返ってくるレスポンスが1件表示されます。リクエストにカーソルを合わせると、サイズとタイミングを読み取れます。

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

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

  1. Aralumaの任意のツールページを読み込みます。小さい画像でRemove Backgroundを一度実行し、ブラウザ内のISNetモデルをキャッシュしておきます。
  2. DevToolsを開き、Networkへ移動して、Offlineにチェックを入れます（またはWi-Fiをオフにします）。
  3. ページを再読み込みします。静的アセットはキャッシュされているため、引き続き読み込まれます。
  4. ツールを試します。
    • ブラウザのみのツールは動作し続けます。もともとネットワークを必要としません。
    • Compressダウンロードはブラウザ内プレビューのblobにフォールバックします（やや効率の劣るエンコードですが、機能します）。
    • Remove BackgroundはISNet WebAssemblyモデルにフォールバックし、外向きのリクエストなしで動作します。

これらのツールがオフラインで動作したなら（一部は品質が下がり、ブラウザのみのものは同一です）、定義上、どのサーバーもあなたの画像を見ていません。

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

ブラウザのみのパスでは、あなたの画像について何も見えていません。見るべきリクエストがなく、保管するキャッシュもなく、grepするログ行もありません。

サーバー経由のパスでは、

  • Compressダウンロードは、エンコードの間（通常は数百ミリ秒）だけ画像のバイトを見て、コンテンツアドレス指定のキャッシュエントリをそのTTLの間保持します。それだけです。キャッシュは、ユーザー、IP、ファイル名、または「あなたの」画像を見つけるために使えるあらゆる識別子でインデックスされません。画像の内容はログに記録しません。エンコードサービスは、カットオーバー前にv1が担っていたのと同じテナント間で共有され、テナント別のCORS、レート制限、HMAC署名付きの正規URLを備えています。
  • Remove Backgroundは、一時アップロードとセグメンテーション呼び出しの間（通常は1〜2秒）だけ画像を見て、その後、一時コピーはR2のライフサイクルルールによって削除されます。あなたのバイトを第三者のモデルプロバイダーに渡すことは決してありません。BiRefNetモデルはCloudflare自身のインフラ内で動作し、remove.bg、fal.ai、Replicate方式の外部APIではありません。
  • AI拡大は、超解像の呼び出しの間だけ画像を見て、結果を返し、あなたに紐づくものは何も保持しません。

すべてのパスにおいて、私たちのアナリティクス提供元（Cloudflare Web Analytics）は、集計されたページビューのデータ、すなわちURL、国、ブラウザのファミリー、Core Web Vitalsを記録します。Cookieなし、永続的な識別子なし、個人に紐づくものは何もありません。

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

データの完全な目録は、プライバシーポリシーにあります。

技術スタック

詳しく知りたい方のために、

  • Astro、静的サイトジェネレーターです。すべてのページはプレーンなHTMLとして配信され、インタラクティブなツールがある場所にのみ、プログレッシブエンハンスメントのJavaScript「islands」が使われます。
  • カスタムプロパティを使ったバニラCSS、TailwindもCSS-in-JSもありません。デザインシステム全体が1つのtokens.cssファイルです。
  • canvas.toBlobと<canvas>、ブラウザ側のツールとプレビューにおけるJPEG、PNG、WebP、AVIFのエンコードです。
  • Cropper.js、トリミング矩形のインタラクションレイヤーです。
  • ONNX Runtime Web、Remove BackgroundのISNet WebAssemblyフォールバックを実行します。
  • Cloudflare、静的ビルドをホスティングしてエッジから配信し、デフォルトのRemove Backgroundパスの背後でWorkers、R2、画像セグメンテーションのパイプライン（BiRefNet）を動かします。
  • Node上のFastifyとsharp・libvips、ドイツのHostinger VPS上にあるapi.araluma.comのCompressダウンロードサービスです。
  • Cloudflare Web Analytics、Cookieなしの集計ページビュー計測です。

ブラウザのサポート

すべてのツールは、Chrome、Firefox、Safari、Edgeの現行および1つ前のバージョンで、デスクトップ・モバイルともに動作します。サイトはプログレッシブエンハンスメントを採用しています。ブラウザがより新しいAPI（例えばshowSaveFilePickerやOffscreenCanvas）をサポートしていればそれを使い、サポートしていなければ従来の同等手段にフォールバックします。「お使いのブラウザは対応していません」という壁はありません。

唯一の必須要件は、JavaScript（どのツールにも必要）と、ネットワーク接続（サーバー経由のパスを使うときだけ必要で、ブラウザのみのツールは初回のページ読み込み後、完全にオフラインで動作します）です。

ご質問

取り上げていない点がありましたら、support@araluma.comまでお寄せください。技術的なご質問も歓迎します。