ブラウザだけで画像を変換できるツールを作ったら、6つの壁にぶつかった話

「ブログ用の画像をWebPやAVIFという軽いファイル形式にまとめて変換したい。でも、写真をどこかのサーバーに送るのはちょっと不安…」

そんな思いから、画像をサーバーに送らず、自分のブラウザの中だけで処理できる変換ツールをWordPressに組み込もうとしました。

シンプルな話のはずが、まあ次から次へと問題が出てきまして。今回はその全記録です。

【結論】ブラウザ完結 × プライバシー保護 × 本格圧縮を全部やるなら、「Squooshと同じエンジン」を借りればいい

先に答えから。

ブラウザの中だけで画像をちゃんと圧縮したいなら、ブラウザ標準の機能だけでは無理です。代わりに、

これこそが、ブラウザ完結ツールの最適解です。

…と、いきなり結論を投げても「いやちょっと待って」ってなりますよね(笑)

ここから、今回ぶつかって試行錯誤して乗り越えた6つの壁を順番にお話しします。

1. WordPressにスクリプトを貼ったら、ページが真っ白になる

まず最初の壁。

「全部入りのHTMLファイル作って、WordPressのページにポンと貼ればOKでしょ」

そう思っていた私を、WordPressは黙って迎え撃ちました。

貼った結果、ページは見事に真っ白。

実はこれ、WordPressのセキュリティ機能が「あ、危ないコードだ」と判断して、勝手にスクリプトを消してくれていたんです。
親切のような、おせっかいのような。。。

2. WindowsでZIPを作ったら、中身が二重になる

プラグイン化して、ZIPでアップロード。

…エラー。

中を見てみたら、フォルダがマトリョーシカみたいに二重に入れ子になっていました。

原因はWindowsの標準ZIP機能の仕様。

LinuxサーバーとWindowsで「フォルダの区切り文字」の方言が違って、サーバーが正しく解釈できなかったんです。

英語と津軽弁くらい、お互い分かってない。

3. 壊れたプラグインが、消えない

二重になった壊れプラグインを、消そうとしたら…

「削除することができません。」

…え？

サーバー上で「このファイルは誰のもの？」が記録されていて、自分の権限では消せないという現象。

例えるなら、自分のおもちゃ箱の中にあるのに、別の人のおもちゃだから触っちゃダメと言われてる状態。

理不尽。

4. なぜか「特定のサイトだけ」真っ白になる

新しいプラグインで再挑戦！

しかしまた、ページが真っ白。
ところが、別のWordPressサイトに同じものを貼ったら…普通に動く。

意味がわからない(笑)

おそらく、キャッシュ(前に表示した状態を記憶すること)、テーマ、他のプラグインとの相性、サーバー設定、そのへんが複雑に絡み合った結果です。
WordPressの白画面って、犯人が一人じゃないことが多いんですよね。

ミステリー小説でいうと、登場人物全員が怪しい系のやつ。

5. 【最大の罠】Chromeが、実はAVIF変換できていない

別サイトでツールが無事動きました。さっそく、5MBの写真をAVIFという軽い形式に変換してみたら…

サイズが9倍に増えました。
圧縮どころか、逆に肥大化してます。

「あれ、自分のコードがバグってる…？」と疑ったんですが、調べたらこれ、私のミスじゃありませんでした。

表示はできる。
でも、変換は壊れている。

Squoosh.appのような本格ツールは、ブラウザ標準の機能を一切使わず、独自のエンジンを持ち込むことで、この問題を回避していました。

つまり、AVIF圧縮の世界では、ブラウザ標準は完全に蚊帳の外。
これは、知らないと一生気付けないやつです。

6. 解決：Squooshと同じエンジンを「拝借」する

ここで登場するのが、相棒「@jsquash/avif」

これ、Squoosh.appの中身と同じエンジンを、外部から借りてこられるツールなんです。

ゴールドラッシュで言えば、自分でツルハシを鍛造しなくても、すでに完成した名刀ツルハシを借りられるという話。

組み込んだ結果がこちら。

• 5.05 MBの写真 → 約1〜2 MBに圧縮成功

• 削減率：60〜80%

• 変換時間：写真1枚あたり数秒〜十数秒

• 初回だけ、追加データを1〜2MBダウンロード

ようやく、ブラウザ完結・プライバシー保護・本格圧縮の三拍子が揃いました。

これこそが、プライバシー重視で画像を圧縮したい人の最適解です。

圧縮率の比較

以下の通り、圧倒的な圧縮率です。
noteに掲載する画像としては使えませんが、Webサイトやアプリに掲載する画像としては、必須だと言えますね。

おわりに

今回の学びを並べると、こんな感じです🐸

• WordPressに何かを組み込むなら、プラグイン化が安全だが、消せなくなる可能性がある。(後で別ルートで消す必要がある)

• WindowsでZIPを作るときは、Compress-Archiveを使わない

• サーバーの権限とは戦わない（別名で作り直す）

• WordPressの白画面は、動く環境を見つけて前進する

• Chromeの標準AVIF変換は、2026年現在も使い物にならない

• 本格AVIFをやるなら、@jsquash/avif一択

「ブラウザだけで画像変換」っていう、シンプルに見えるお題。ここまで多層の罠が潜んでいるとは、私も完全に予想外でした(笑)

でも、ひとつ言えるのは。

最後まで読んでいただいてありがとうございます。

実際に動いているツールはこちら → https://aigate.site/image-converter/

この他にも色んなアプリを作ったり、Web関連のお手伝いをしています。質問やご依頼など、お気軽に私のLINE公式アカウントから送ってください✨

些細なことでもお話聞きます。

では、次回もお楽しみに😌🐸