画像・PDFの変換はインストール不要?ブラウザだけで処理する方法

なぜアップロードなしで処理できる?

ブラウザには、ファイルを読み込む・画像を描き直す・バイト列を組み立てるための機能が最初から備わっているためです。ハコツールズのファイル系ツールは、その標準機能と JavaScript ライブラリだけを使って、読み込みから書き出しまでを端末の中で完結させています。

流れをもう少し具体的に説明します。ファイルを選ぶと、ブラウザは File API を通じてその中身をメモリ上のデータとして渡してくれます。画像なら createImageBitmap() でデコードし、Canvas に目的のサイズで描き直したうえで、canvas.toBlob() に品質を指定して JPEG や WebP として書き出します。画像一括圧縮の「品質 0.8」という設定は、この toBlob() にそのまま渡されている値です。書き出したデータは URL.createObjectURL() でダウンロードリンクに変わります。この間、ネットワーク通信は一度も発生しません。

PDF は画像より構造が複雑なので、実績のあるライブラリを使っています。ページの結合・分割・生成には pdf-lib、既存 PDF の描画(各ページを画像として起こす処理)には pdf.js(pdfjs-dist)を使います。pdf.js はページの描画を Web Worker という別スレッドで行うため、ページ数の多い PDF を処理している間も画面の操作がひっかかりにくくなっています。iPhone の HEIC を JPG に変換する処理はデコード処理が重いため、WebAssembly を含む heic2any というライブラリを、そのツールを使うときだけ遅延読み込みしています。複数ファイルをまとめてダウンロードするときの ZIP 化には fflate、QR コードの生成には qrcode、読み取りには jsQR を使っています。いずれもブラウザ内で動くライブラリで、変換サーバーは存在しません。

ページを一度読み込んでしまえば、多くのツールは通信を切った状態でも動作します。機内モードにしてから処理する、といった使い方も可能です。

アップロード型の変換サイトは何が問題?

ファイルが自分の管理下を離れ、事業者のサーバーに一度保存される点です。一般的な「オンライン変換サイト」の多くはファイルをサーバーへ送ってから処理し、変換後のファイルをダウンロードさせる方式を取っています。

この方式そのものが不正だというわけではありませんが、扱うファイルによってはリスクになります。送信されたファイルが一定時間サーバー上に残ること、ダウンロード用 URL を知っていれば第三者もアクセスできる設計になっている場合があること、事業者の利用規約でアップロードされたデータの取り扱いが定められていることなど、確認すべき点が増えます。契約書、給与明細、身分証、社外秘の設計資料、患者や顧客の情報を含む書類といった持ち出しが許されないファイルでは、そもそも社内規程で外部サービスへのアップロードが禁止されていることも珍しくありません。

ブラウザ内で完結する方式なら、この検討自体が不要になります。ファイルが端末から出ないので、規程上も「ファイルを開いて保存し直した」のと同じ扱いになります。実際に通信が発生していないことは、ブラウザの開発者ツールのネットワークタブを開いた状態で処理してみれば確認できます。

画質と容量は何で決まる?

処理が画素に戻しているか、バイト列を組み替えているかで決まります。前者は書き出しのたびに画質が動き、後者は何度通しても元のままです。この違いが分かっていれば、どの順番で処理すれば劣化を最小にできるかも見当がつきます。

画素に戻さない側から見ていきます。画像PDF変換は JPG・PNG を再圧縮せず、元のデータをそのまま PDF に埋め込みます。PDF結合・分割も、ページの中身には手を触れずにページの束ね方だけを変えます。どちらも画質は 1 ミリも落ちません。代わりに容量は元の合計に比例するので、軽くしたいなら PDF にする前に画像を圧縮しておく必要があります。結合・分割で引き継がれないのは、しおりやフォームの入力値のように文書全体へ紐づく情報です。画質はどちらの処理でも動きません。

画素に戻す側は、品質の値がそのまま結果になります。画像一括圧縮は出力形式 WebP・品質 0.8 が初期値で、3MB の写真なら 300〜600KB 程度に収まります。PDF圧縮は各ページを一度画像として描き直し、JPEG に再圧縮してから PDF を組み直す方式で、3 段階の中身は描画解像度と JPEG 品質の組み合わせです。「高圧縮」は 50% と 0.4、「標準」は 75% と 0.6、「画質優先」は 100% と 0.8。いずれも用紙の物理サイズは維持されるため、印刷したときの寸法は変わりません。

解像度の指定は、PDF の内部単位から逆算すると意味が分かります。PDF の 1 ポイントは 72 分の 1 インチなので、PDF画像変換で 300 dpi を選ぶと、元の寸法の約 4.17 倍のピクセル数で描画されることになります。資料に貼るだけなら 150 dpi、印刷に使うなら 300 dpi が目安です。画像側の上限も同じ理屈で決まっていて、画像リサイズは出力の 1 辺が 20,000px を超える指定をエラーで止めます。主要ブラウザの描画領域の上限(およそ 32,767px)より十分手前で止めることで、メモリ不足でタブが落ちるのを防ぐためです。

もうひとつ、画素に戻す処理には共通の代償があります。そのページの文字が画像になり、検索もコピーもできなくなることです。PDF 圧縮がそうですし、PDF黒塗り・墨消しは逆にこれを利用しています。黒い四角を重ねるだけでは下の文字データが残ってしまうため、塗ったページを画像化して文字そのものを消す方式です。PDF記入・手書き署名で書き込んだ文字が検索できないのも同じ理由で、画面で置いた内容を画像にしてページに重ねているからです。文字として残したい PDF と、確実に消したい PDF では、求めるものが正反対になります。

QRコード作成だけは系統が違い、画質ではなく誤り訂正の強さと入る文字数が釣り合います。誤り訂正レベルを上げるほど汚れや欠けに強くなりますが、訂正情報に容量を割くぶん入れられる量は減ります。8 ビットバイトモードの上限は L で 2,953 バイト、H では 1,273 バイトです。日本語は 1 文字あたり 3 バイト前後を消費するので、長文を入れたいときはレベルを下げるか短縮 URL を使ってください。出力にはコードの周囲に 4 モジュール分の余白(クワイエットゾーン)が含まれています。印刷時にここをトリミングすると読み取り率が落ちます。

どのくらいのサイズまで処理できる?

明確な上限値はなく、端末の空きメモリ次第です。サーバーの制限を受けない代わりに、処理できる量は使っている PC やスマホの性能に左右されます。

目安を掴むには、画像が展開されたときのメモリ量を考えると分かりやすくなります。Canvas 上の画像は圧縮されていない状態、つまり 1 画素あたり 4 バイト(赤・緑・青・透明度)を占めます。A4 を 300 dpi で描画すると 2,480 x 3,508 ピクセル、約 870 万画素になり、これだけで約 35MB のメモリを使います。10 ページの PDF を 300 dpi で一括変換すれば、途中の状態を含めて数百 MB を扱うことになる計算です。ファイル自体は数 MB でも、処理中のメモリはその数十倍に膨らみます。

実用上の感覚としては、一般的な PC なら数十 MB の PDF や 20〜30 枚程度の写真の一括処理は問題なく通ります。スマホ、特に古い端末では、ページ数の多い PDF の高解像度変換でタブが落ちることがあります。うまくいかないときは、解像度を 300 dpi から 150 dpi へ下げる、ファイルを数回に分けて処理する、他のタブを閉じてメモリを空ける、といった対処で通ることがほとんどです。

うまくいかないときはどうする?

原因の多くは「対応していない形式」か「PDF 側の制限」のどちらかです。よくあるケースと対処を挙げます。

• HEIC の写真が読み込めないのは形式のためです。画像系ツールは JPEG・PNG に対応し、ツールによっては WebP も扱えます(画像 PDF 変換は JPG・PNG のみ)。iPhone の HEIC はHEIC→JPG 変換で先に変換するか、iPhone の「設定 → カメラ → フォーマット」を「互換性優先」にすると、以降の撮影分が JPG で保存されます。
• PDF を開けないというエラーは、パスワード付き(暗号化された)PDF で出ます。暗号化されたままでは読み込めません。閲覧パスワードを解除した状態で保存し直してから使ってください。
• PDF から文字がコピーできないときは、中身を疑ってください。スキャナーで取り込んだ書類は、文字ではなく画像が並んでいます。文字として扱うには文字認識(OCR)が別途必要になります。
• 処理の途中で止まる・タブが落ちる場合はメモリ不足です。前の見出しで書いたとおり、解像度を下げるかファイルを分割して試してください。
• QR コードが読み取れないときは、印刷サイズが小さすぎるか余白が足りていない可能性があります。誤り訂正レベルを H に上げ、前景と背景のコントラストを十分に取ってください。

どのツールを使えばいい?目的別早見表

容量を減らすなら圧縮、大きさや形式を変えるならリサイズ、画像をまとめて 1 つの書類にするなら PDF 変換、PDF をくっつける・分けるなら結合分割、URL やテキストをコードにするなら QR コードが基本の使い分けです。斜めから撮って台形に歪んだ書類だけは、束ねる前に書類スキャンPDF化で四隅を指定して長方形に起こしておくと、スキャナで読んだような仕上がりになります。