画像の Base64 変換

機能

• 3つの入口：ドラッグ＆ドロップ、クリックして選択、クリップボードからの貼り付け。スクリーンショットは撮ってすぐ貼るのが最も速い方法です
• 長辺を基準に比例縮小。2560 / 1920 / 1280 / 800 / 512 / 256 ピクセル、または無制限から選べます
• 縮小のみで拡大はしません。小さな画像を補間して見かけ上の高解像度画像にすることはありません
• 出力形式は元の形式のままか、PNG・JPEG・WebP への変換を選べます
• JPEG と WebP は品質を調整可能。PNG は可逆なので、スライダーは有効なふりをせず無効になります
• SVG は元のベクター内容のまま読み込み、ラスタライズしません。ビットマップが必要なときは出力形式を明示的に選んでください
• プレビュー、元のサイズ、出力テキストのサイズ、ピクセル寸法を同時に表示します
• 結果が大きくなりすぎる場合は事前に警告します —— Base64 のテキストは元のファイルより約3分の1大きくなります
• ワンクリックでコピー、または出力形式のままファイルとしてダウンロード

使い方

1. 画像をドラッグするか、クリックして選ぶか、スクリーンショットを撮って Ctrl または Command + V で貼り付けます
2. 必要に応じて最大辺、出力形式、品質を設定します
3. 結果は自動で生成され、サイズとピクセル寸法も併せて表示されます
4. 「コピー」でテキストを取り出すか、「ダウンロード」でファイルとして保存します

よくある質問

画像はサーバーへ送られますか？

いいえ。ファイルの読み込みは FileReader で、縮小と形式変換は canvas で行い、すべてブラウザのメモリ内で完結します。ページはネットワークリクエストを一切送りません。確かめたい場合はネットワークを切ってもう一度試してください。動作はまったく同じです。これは特に、個人の写真や顧客情報を含むスクリーンショットで重要です。

変換したテキストが画像そのものより大きいのはなぜですか？

Base64 は3バイトを4文字で表すため、サイズは約3分の4に膨らみます。3 MB の写真は約 4 MB のテキストになります。これを HTML や CSS にインライン化するということは、ページに同じだけの負荷を足すということです。そのため大きな画像は通常のファイル URL のほうが適しており、Base64 は小さなアイコンや、どうしてもインライン化が必要な場面に向いています。

GIF が変換後に動かなくなったのはなぜですか？

canvas は GIF の1フレーム目しか取得できず、アニメーションを GIF として書き戻すことはブラウザがいまも対応していません。そのため出力ではアニメーションが失われ、その旨を結果に明記します。アニメーションを必ず残したい場合は canvas を通さず、元のファイルをそのまま Base64 エンコードしてください。

SVG が縮小されないのはなぜですか？

SVG はベクター画像で、ラスタライズすると「どれだけ拡大しても劣化しない」という唯一の利点が壊れます。そのため元の形式のままを選んだ場合、SVG は元のバイト列のまま読み込まれ、縮小オプションは効きません。PNG・JPEG・WebP を明示的に選んだときだけビットマップに変換され、結果にもラスタライズしたことを記載します。

HEIC の写真も変換できますか？

ブラウザ次第です。Safari は HEIC をデコードできますが、多くの Chromium 系ブラウザはできません。デコードできない場合は「ブラウザがこの画像を開けません」とはっきり伝え、壊れた結果を出すことはありません。先に OS 付属のツールで JPEG に書き出してから試してください。

ファイルサイズに上限はありますか？

1枚あたり 10 MB です。これを超えると変換後のテキストが長くなりすぎてタブが目に見えて重くなるため、処理を始める前にきっぱり断ります。ブラウザが固まってから気づくのを待たせることはしません。