10年前、ウェブサイトで画像を編集するとは、アップロードし、サーバーが作業するのを待ち、結果をダウンロードすることでした。今日のブラウザは、サーバーに一切連絡することなく、30 MBの写真を圧縮し、PNGをWebPに変換し、画像の一括をリサイズできます。その転換を可能にしたのが2つの技術、CanvasWebAssemblyです。それぞれが何をするか見れば、どちらも謎ではありません。

Canvas:ピクセル単位でアクセスできる描画面

ブラウザはどう画像を処理するのか:CanvasとWebAssemblyを解説 — visual 1
Canvas:ピクセル単位でアクセスできる描画面

あらゆる現代のブラウザにはCanvas APIが付いています。JavaScriptで描ける空白の長方形です。画像ツールにとっての本当の力は、図形を描くことではなく、Canvasがコードに画像の個々のピクセルへの直接アクセスを与えることです。

写真をキャンバスに読み込むと、ブラウザはコードに数値の配列を渡します。すべてのピクセルの赤、緑、青、アルファ(透過)の値です。そこから、普通の操作が素直になります。

  • リサイズは、そのピクセルの格子を小さいか大きい格子へサンプリングすることです。
  • 切り抜きは、長方形の領域を新しいキャンバスにコピーすることです。
  • 回転と反転は、描画前に適用される幾何学的な変換です。
  • 形式変換は、キャンバスを書き出すときに起きます。JPEG、PNG、WebPを求めれば、ブラウザがそれに応じてピクセルをエンコードします。

これらすべてがお使いの端末で、CPUと、あれば GPUを使って動きます。ピクセルがページから出ないので、何もアップロードされません。だから画像コンバーターは、放り込んだ瞬間にPNGをWebPに変えられます。待つ往復がないのです。

WebAssembly:ブラウザ内でのほぼネイティブ速度

ブラウザはどう画像を処理するのか:CanvasとWebAssemblyを解説 — visual 2
WebAssembly:ブラウザ内でのほぼネイティブ速度

Canvasはよくある変換を扱いますが、いくつかの仕事は本格的な計算力を必要とします。高品質のJPEGエンコード、PNGの最適化、背景を切り抜くAIモデルの実行。JavaScriptだけではこれらに遅すぎることがあります。そこでWebAssembly(よくWasmと略されます)の出番です。

WebAssemblyは、ブラウザがネイティブに近い速度で実行できる、コンパクトで低レベルの形式です。開発者は、C、C++、Rustのような言語で書かれた速く実戦で鍛えられたコード、つまりデスクトップの画像ソフトを動かすのと同じライブラリを取り、Wasmにコンパイルします。ブラウザはそのコードを、締まったサンドボックス環境で、同等のJavaScriptよりはるかに速く実行します。

実際にはこれは、ブラウザのタブが、かつてサーバーやデスクトップアプリを必要とした仕事をできるようになったことを意味します。プロ級の圧縮で画像をエンコードし、メタデータを取り除き、背景除去のためにニューラルネットワークを走らせる。すべてローカルで。

なぜローカル処理はプライベートかつ高速なのか

CanvasとWebAssemblyを合わせれば、利点が自然に導かれます。

プライバシーは約束ではなく構造上のものです。ピクセルがページに留まり、処理がお使いのCPUで動くので、アップロードの段階がありません。保存・記録・キャッシュ・訓練するファイルのサーバー上のコピーがありません。ファイルが一度も送信されなかったからです。プライバシーポリシーを信じる必要はなく、機内モードにしてツールが動き続けるのを見れば検証できます。

速度はネットワークをまるごと切り落とすことから来ます。サーバーツールの最も遅いステップは、たいていファイルを上げ下げすることです。それを取り除けば、40 MBの写真は40 KBの写真とほぼ同じ速さで処理されます。待ち行列もありません。お使いの端末はあなたの画像だけに取り組み、他の数千人のものには取り組みません。

ほとんどの人が予想しないおまけがあります。ツール全体がただのコードと素材なので、ブラウザはそれをキャッシュできます。IMG.DIYはサービスワーカーを備えたPWAなので、初回アクセスのあとツールはお使いの端末に保存され、オフラインで動き続けます。機内モードで、飛行機で、どこでも。圧縮と変換は接続を一切要りません。

トレードオフ、正直に

ブラウザ内処理は魔法ではなく、限界がないわけでもありません。非常に大きな一括は、データセンターではなくお使いの端末のリソースを使うので、低スペックのスマホのメモリを圧迫しえます。そしていくつかの機能は本当にネットワークを要ります。ページ速度の監査のような外部サービスを呼ぶものは、オフラインで動けません。背景除去は中間のケースです。ローカルで動きますが、モデルファイルの一度きりのダウンロードのあとだけです。

とはいえ日常の仕事、圧縮・変換・リサイズ・切り抜き・回転には、ブラウザはいまや、たまたまタブに住んでいる完全でプライベートで高速な画像工房です。アップロードなし、サーバーなし、待ち時間なし。