画像処理ツール使い分け — 変換・モザイク・拡大・AI背景除去

画像フォーマットの基礎（PNG / JPEG / WebP / AVIF / GIF）

「画像を保存する」と一口に言っても、選べるフォーマットはいくつもあります。それぞれ得意分野が違うので、特性を理解しておくと変換時の迷いが減ります。ここではよく使う 6 つを整理します。

• PNG（Portable Network Graphics）：可逆圧縮で画質劣化なし、透過チャンネルに対応。アイコン・ロゴ・スクリーンショットなど「線がシャープなもの」に向いています。1996 年に GIF の特許問題の代替として登場しました。
• JPEG（Joint Photographic Experts Group）：非可逆圧縮で写真を小さくできるのが強み。DCT（離散コサイン変換）で人間の目が鈍感な高周波成分を削ります。透過には非対応。1992 年の規格で、30 年以上使われ続けています。
• WebP：Google が開発。可逆・非可逆の両モードがあり、透過もサポート。同等画質で JPEG より 25-35% 小さくなるのが売りです。
• AVIF（AV1 Image File Format）：AOMedia Video 1 動画コーデックの静止画版。圧縮効率は WebP を上回り、同等画質で JPEG 比 50% 以上小さくなることもあります。2020 年頃から主要ブラウザが対応し始めました。
• GIF：1987 年の古いフォーマット。アニメーションに対応しているのが現代でも使われる理由ですが、256 色までしか扱えず、ファイルサイズも大きい。アニメ用途は APNG・WebP・AVIF で代替可能です。
• HEIC（High Efficiency Image Container）：iPhone の標準形式。HEVC（H.265）動画コーデック派生で圧縮率は非常に高いものの、Apple 以外の環境での互換性が弱く、Windows で開くには拡張機能が必要です。

表だけ見ると AVIF が最強に見えますが、エンコード時間が長い・Adobe 系ツールの書き出しがまだ不安定・外部配信先が対応していないといった現実の壁があり、実務では PNG / JPEG / WebP が主戦場になります。

どれを使えばいい？

フォーマット選びは「用途」と「配信先」でほぼ決まります。迷ったら次のルールに当てはめてください。

特に覚えておきたいのは「SNS 投稿時は PNG より JPEG が無難」というルールです。X や Instagram はアップロード時に独自圧縮を噛ませるため、PNG で上げてもどうせ JPEG に変換されます。それなら最初から JPEG で品質を制御して上げたほうがコントロールしやすい、というわけです。

画像フォーマット変換

画像変換ツールで最もよくある用途は、次の 4 つです。

1. サイズ削減：5MB の JPEG を 500KB の WebP に落としてメールに添付できるようにする、など。
2. 互換性の確保：iPhone の HEIC を Windows で開くために PNG/JPEG へ変換、など。
3. 透過の保持：JPEG から PNG に変換しても透過はつかない（JPEG に透過がないため）ので、制作元の PNG を保持する。
4. メタ情報の削除：撮影場所の GPS や撮影機種などの Exif をまとめて落としたいとき、変換時に除去する。

Web サイトで複数フォーマットを出し分けるときは <picture> タグが便利です。対応しているブラウザには軽量な AVIF/WebP、非対応ブラウザには JPEG を返すことができます。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="..." loading="lazy" width="800" height="600">
</picture>

ブラウザは上から順にチェックし、最初に対応している形式を使います。非対応ブラウザは <source> を全て無視して <img> にフォールバックするので、古い環境でも問題なく表示されます。

可逆 vs 非可逆圧縮

画像を小さくする方法は大きく 2 種類あります。可逆圧縮（lossless）は元のデータを一切捨てず、ZIP や gzip のように統計的な冗長性だけを圧縮します。展開すれば元のピクセルが完全に戻ります。PNG・GIF・WebP 可逆モード・AVIF 可逆モードがこれに当たります。

非可逆圧縮（lossy）は人間の視覚が鈍感な情報を捨てることでサイズを稼ぎます。JPEG は明度に比べて色差に鈍い人間の視覚特性を利用し、色信号の解像度を半分にします。さらに DCT で高周波成分を量子化テーブルに基づいて丸めます。一度捨てられた情報は二度と戻りません。

ここで注意すべきは「JPEG を編集してもう一度 JPEG で保存する」動作です。保存のたびに量子化が走るので、画質は徐々に劣化します。実務では次のような症状で現れます。

• 色の境界がブロック状ににじむ（ブロックノイズ）
• 文字やロゴの周囲にモヤモヤが出る（モスキートノイズ）
• グラデーションが縞状になる（バンディング）

対処は単純で、中間保存は PNG（可逆）にしておき、完成品だけ JPEG に書き出すという運用を徹底すること。Photoshop や Figma で作業するなら PSD/Figma ファイルがマスターなので、この問題は起こりにくいのですが、JPEG をそのまま編集→上書き保存しているワークフローは要注意です。

モザイクでプライバシー保護

スクリーンショットや写真を共有するとき、映り込んだ個人情報を隠すのにモザイクは便利です。典型的な対象は次のようなものです。

• 顔・体の特徴
• 車のナンバープレート
• メールアドレス・電話番号・住所
• クレジットカード番号・口座番号
• 画面内の未公開プロダクト名・社内用ファイル名
• 従業員の名札・社員証

モザイクはピクセルを格子状にブロック化し、ブロック内の平均色で塗りつぶす処理です。ブロックサイズが大きいほど元の情報が失われ、復元が難しくなります。一方でガウシアンブラーはピクセル単位でぼかすフィルタで、「ぼんやりさせる」効果は似ていますが、数学的には全く別の操作です。

ブロックサイズの目安としては、隠したい要素の 1/10 以上を推奨します。たとえば高さ 200px の顔を隠すなら 20px 以上のブロックサイズ、顔のパーツ（目・鼻・口）が完全につぶれるくらいのサイズ感です。これより小さいと「まだ誰か分かる」ことがあります。

モザイクで復元できてしまう罠

「モザイクをかけたから安心」と思い込むのは危険です。実際にモザイクから元画像が復元された事例は複数報告されています。

典型的な失敗パターンをまとめます。

1. ブロックサイズが小さすぎる：5px 程度のモザイクでは、クレジットカードのような固定書式の数字列は容易に推定されます。
2. 同じ種類の文字列を複数モザイク化：「元が何か分かる」状況では、既知パターンとのマッチングで復元率が上がります。
3. スクロール動画でモザイクが途切れる：React の DevTools で要素選択のたびに一瞬地が見える、スクロール中に上下がはみ出る、など。
4. PSD レイヤーが残っている：モザイクレイヤーを重ねただけで、下のレイヤーが削除されていないと、PSD を開けば元画像が見える。
5. PDF の「選択可能テキスト」の上にモザイク画像を重ねた：視覚的には隠れていても、PDF のテキストレイヤーにコピペで抽出できる文字列が残っている。

回避策はシンプルです。機械学習でも復元不能なレベル（ブロックサイズを大きめに）にするか、最初から完全な黒塗りを選ぶことです。迷ったら黒塗りが確実です。

黒塗りとモザイクの違い

黒塗り（redaction）はその名の通り、隠したい領域を単色（通常は黒）で完全に塗りつぶす処理です。元のピクセル値は失われるので、原理的に復元できません。機密情報を扱うときはモザイクではなく黒塗りを選んでください。

ただし黒塗りにも典型的な落とし穴があります。最有名なのが「PDF に黒塗りしても選択可能テキストが残る」問題です。Adobe Acrobat で四角形を描画して黒く塗っても、それは見た目に長方形を重ねているだけで、下のテキストレイヤーはそのまま存在します。PDF を開いて該当箇所をドラッグ選択→コピー→テキストエディタに貼り付けると、機密情報が普通に抽出されます。

対処は 2 つです。

• ラスタライズ：PDF を画像として書き出してから黒塗りを行い、再度 PDF 化する。テキストレイヤーが破棄されるため、コピペできない。
• 墨消しツール（Redact）を使う：Adobe Acrobat Pro の「墨消し」機能はテキストレイヤーごと削除します。GUI で塗るだけでなく、該当領域を「削除して置換」する動作です。

画像ファイル（PNG/JPEG）で黒塗りする場合は、レイヤー構造のないフォーマット（JPEG）で書き出せば安心です。PSD や PNG の 32bit（アルファチャンネルあり）で保存すると、別レイヤーが残っている場合にそれが読み取られる可能性があります。

漢字拡大鏡の使い道

画像処理ツールの中でも少し毛色が違うのが「拡大鏡」機能です。ベンリーには漢字拡大鏡（kanji-magnifier）というツールがあり、入力したテキストを拡大して表示するというシンプルなものですが、使い道は意外と広いです。

• 難読漢字のパーツ確認：「鬱」「鑑」「齎」など、細かい部首が潰れて読めないときに拡大して構成要素を確認する。
• 手書き検字：紙に漢字を書きたいけど画数が曖昧なとき、拡大表示で筆順や細部を見ながら書ける。
• 漢字学習：小学生や日本語学習者が新出漢字の形を覚えるときに、大きく表示したほうが記憶に残りやすい。
• 老眼・弱視対応：「読めるけど細かいのがつらい」という場面で、画面いっぱいに文字を出せる。
• プレゼンでの一時的な強調：会議中に「この漢字読めますか？」と全員に見せたいとき、拡大して共有する。
• 画像ソースの読み取り補助：スクリーンショットに映っている小さな文字を読み取りたいとき、OCR 代わりに使う。

派手な機能ではないですが、地味に「ブラウザで開いたらすぐ使える」のが利点です。OS の拡大鏡機能（macOS の Zoom、Windows の Magnifier）よりも、テキストそのものをきれいな大きな字形で表示できるため、読み取り用途では拡大鏡アプリよりストレスが少ないです。

AIで背景除去・透過PNG切り抜き

商品写真や人物写真を「背景だけ抜いて被写体を残す」作業は、Photoshop で「自動選択ツール」や「クイック選択」を使ってきた人なら手間の多さをご存知でしょう。被写体と背景の境界を 1 本ずつ調整する作業はそれなりに時間がかかります。近年これを劇的に短縮したのが、被写体検出（Salient Object Detection, SOD）と呼ばれるディープラーニング系のモデル群です。代表的なモデルが U²-Net で、2020 年に公開されて以降、Web の自動切り抜きサービス(remove.bg など)の事実上の標準になっています。

U²-Net は U-Net 構造を 2 重に重ねたエンコーダ・デコーダ型のネットワークで、入力画像の各ピクセルが「主要な被写体に属するか」を 0〜1 のスコアで返す仕組みです。スコアをそのまま α チャンネルとして使えば、被写体を残し背景を透過にした PNG が作れます。軽量版の U²-NetP はモデルサイズ 4.4MB ほどで、ブラウザでも実用的な速度で動くため、サーバーに画像を送らない「ローカル AI」の候補に挙がります。

ベンリーの画像の背景除去ツールはこの U²-NetP を ONNX Runtime Web でブラウザ内推論しています。具体的な処理の流れはこうです。

1. ファイル選択またはドラッグ&ドロップで画像を読み込み
2. 初回のみ AI モデル(4.4MB)を端末にダウンロード(2 回目以降はブラウザキャッシュから即時)
3. 画像を 320×320 にリサイズして ONNX Runtime に投入(WebGPU 対応端末では GPU、未対応なら WASM で処理)
4. 推論結果のマスクを元解像度に拡大して α チャンネルとして合成
5. 透過 PNG として出力

ネットワーク通信は AI モデルを取得する初回だけで、画像データそのものはどのリクエストにも乗りません。商談用の機密画像、未公開の商品写真、人物の顔写真も、安心してブラウザに投げられます。

ユースケース別の活用例

• EC・フリマ出品：白背景に置いた商品写真の余計な床や机を抜く。メルカリ・ラクマ・Yahoo!フリマ・BASE・Shopify の出品画像で見栄えが大きく変わる。
• SNS プロフィール画像：被写体だけ抜いて、好みのカラー背景や柄を後で合成。X・Instagram のアイコンに使う「同じ人だけど背景違い」の差し替えが楽。
• プレゼン資料・LP・サムネイル：素材として PowerPoint・Keynote・Canva・Figma に貼ったときに、四角い写真ではなく被写体だけ浮かせて配置できる。
• ブログのアイキャッチ：背景を消して別途生成した背景画像と合成。AI 画像生成と組み合わせるとオリジナル素材が量産できる。
• 動画サムネイル：YouTube サムネ用の人物切り抜き。文字を被写体の前後に配置する「奥行き表現」がしやすい。

消しゴム・復元ブラシで仕上げる

AI が大まかに抜いてくれても、出力をそのまま使えるとは限りません。よくある残念パターンは、エッジに 1〜2 ピクセル背景色がにじむ「色被り」、髪の毛の隙間に背景が残る「ジャギー」、被写体の影や反射が消えてしまう「過剰除去」の 3 つです。これらは手動の 消しゴム / 復元ブラシ で調整するのが定番のフローです。

• 消しゴム：透過にしたい部分を塗ります。被写体の周りに残った背景の切れ端、ロゴ周りの余白、被写体内の不要な要素(背景に写り込んだ人など)を削るのに使います。
• 復元ブラシ：AI が消してしまった被写体の一部を、元写真から呼び戻します。半透明になったエッジ、被写体と同系色で抜けてしまった部分、髪の生え際の補修に有効です。

ベンリーの背景除去ツールは AI 推論後にこの 2 つのブラシで仕上げ調整できます。ブラシサイズは 4〜120px、ストローク単位で「元に戻す」も最大 12 段階。AI のマスクに一発で戻せる「編集をリセット」もあります。Photoshop を立ち上げて選択範囲を作るより、ブラウザだけで完結するこのフローのほうが圧倒的に速く済むケースが多いです。

仕上げが終わったら画像変換ツールで WebP に変換するとファイルサイズが大幅に小さくなります。透過 PNG で 200KB の画像が、透過 WebP では 50KB 前後まで圧縮できることもあります。Web 配信や LP に使うなら最後の一手として組み合わせてください。

ブラウザ内処理のプライバシー

オンライン画像ツールで最も気になるのは「自分の画像がサーバーに送信されるのか」という点です。特に機密情報を含むスクリーンショット・個人写真・業務資料をモザイク処理したいケースでは、無料ツールにアップロードするのはリスクです。

ベンリーの画像ツールはすべてブラウザ内（クライアントサイド）で完結しており、画像がサーバーにアップロードされることはありません。処理の流れは次の通りです。

1. ユーザーが <input type="file"> で画像を選択。
2. ブラウザの File API で FileReader または Blob として読み込み。
3. <canvas> に描画して Canvas API でピクセル操作（リサイズ・変換・モザイク・黒塗り）。
4. canvas.toBlob() で加工後の画像を生成。
5. ユーザーが「ダウンロード」ボタンで保存。

この一連の処理は全てブラウザ内の JavaScript で完結しており、ネットワーク通信は一切発生しません。確認したければ、DevTools の Network タブを開いた状態で変換を実行してみてください。新規リクエストが 0 件であることが確認できます。回線を切ってオフラインでも動作するのが、ブラウザ内処理の証拠です。

4 ツール使い分け

ベンリーには画像処理系のツールが 4 つあります。それぞれの守備範囲と使い分けを整理しておきます。

image-converter（画像フォーマット変換）

PNG・JPEG・WebP・HEIC など複数のフォーマットを相互変換します。iPhone の HEIC を PNG にするときや、大きな PNG を WebP に変換してブログ用に軽くするとき、GIF アニメを WebP に置き換えるときに使います。品質パラメータや出力サイズを調整することで、ファイルサイズと画質のバランスを自分でコントロールできます。Exif 情報（撮影場所の GPS や機種）も出力時に除去できるので、SNS 投稿前の下処理にも便利です。

image-mosaic（モザイク加工）

画像の一部領域にモザイクを掛けます。顔・住所・ナンバープレートなど、ブログや SNS で映り込んだ個人情報を隠すのが主な用途です。ブロックサイズは調整可能で、デフォルトは読み取り不可能なくらい粗めに設定されています。復元リスクが心配な場合は黒塗りモードに切り替えてください。

image-bg-remove（AIによる背景除去・切り抜き）

U²-NetP モデルをブラウザ内で動かし、被写体を残して背景を透過 PNG にします。商品写真の白抜き、SNS アイコン、プレゼン素材、合成写真の下準備が一瞬で完了します。AI が消し残し / 消しすぎた部分は、付属の消しゴム / 復元ブラシで手動調整できます。画像はサーバーに送信されないので、未公開商品の写真や顔写真にも安心して使えます。

kanji-magnifier（漢字拡大鏡）

テキストを入力して大きく表示するツールです。難読漢字の確認・手書き練習・老眼対応・プレゼンでの強調に使います。画像ファイルを扱うものではないですが、「文字の視認性」という意味で画像ツールの仲間です。ブラウザのフォントレンダリングを使うため、アンチエイリアスが効いたきれいな字形で見えます。