- 変換したい画像ファイルを選択します。
- ツールがBase64データURLを生成し、出力サイズ付きのプレビューを表示します。
- データURLをコピーして、HTML、CSS、コードに貼り付けます。
変換はブラウザ内蔵のファイルリーダーで完全に完結します。画像がデバイスの外に出ることはないため、機密のグラフィックやクライアントのアセットもプライベートに保てます。
データURLは画像全体を1つのテキスト文字列に詰め込みます。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA… この文字列をimgタグ、CSSのbackground、メールの署名に直接入れることができます。アセットが自己完結し、アップロードする別ファイルも、追加のHTTPリクエストも、フォルダ移動によるパス切れもありません。単一ファイルのHTMLページ、オフラインのプロトタイプ、メール対応のグラフィック、マシン間でコピーしても生き残る小さなファビコンを作るための標準的なテクニックです。
ヒント
Base64は画像をおよそ3分の1大きくするため、出力は元のファイルより常に大きくなります。アイコン、ロゴ、サムネイルなどの小さなアセットに使い、結果の横に表示されるサイズを確認しましょう。大きな写真には通常のホストURLのほうが適しています。
データURLは頻繁に変わらないCSSやマークアップに置いておきましょう。ビルドのたびに再生成すると差分が膨らみます。data:image のプレフィックスなしで素のBase64が必要なときは、最初のカンマより前の部分を取り除きます。
なぜ使うか
画像を第三者サービスの変換ツールにアップロードするのは、共有したくないファイルを渡すことになります。デスクトップツールは単一のアイコンには大げさです。この変換ツールは即時、無料、完全にローカルで、プレビューとサイズ付きの検証済みデータURLをひと目で生成します。
Real-world use cases
- Blog and e-commerce: Shrink product photos from 4MB to ~200KB before upload. Your pages load faster and Google PageSpeed scores improve.
- Email and forms: Many inboxes reject >10MB attachments. Compress once and you reliably stay under limits.
- Portfolio and social: Keep visual quality high at 75-85% while cutting bandwidth for viewers on mobile data.
How it compares
| Tool | Upload required | Privacy | Batch | Cost |
|---|---|---|---|---|
| This tool | No | 100% local | 1-by-1 (high quality) | Free |
| TinyPNG/Squoosh | Yes / No | Server or local | Yes | Freemium |
| Photoshop | No | Local | Yes | Paid |
For sensitive images or quick one-offs, a local browser tool wins on privacy and speed. For massive bulk jobs, a desktop app may be faster.
Pro tips
- For photos, try quality 78-82% first. You usually save 60-70% size with no visible loss.
- Scale down dimensions before lowering quality. A 4000px photo at 2000px is 4x smaller even at high quality.
- Keep a backup of the original. You can always re-export at lower quality, but you cannot recover detail after saving over the original.