> エンコード | 埋め込み | 最適化 <
// Webデベロップメントとデータ埋め込みのための画像Base64変換
画像をドロップするかクリックして選択
クリックしてファイルを選択
ローカル処理
100%クライアントサイド画像エンコード。ファイルがブラウザから外部に送信されることはありません。
ドラッグ&ドロップ
ドラッグ&ドロップインターフェースで素早くアップロード。即座Base64変換。
制限なし
任意の画像サイズや形式をエンコード可能。登録やAPIキーは不要です。
// FAQ
Q：画像Base64エンコードとは何ですか？
A：画像Base64エンコードは、バイナリ画像データをBase64エンコードを使用してテキスト文字列に変換するプロセスです。HTML、CSS、メール、APIに画像を個別ファイルなしで直接埋め込む際に必須の技術です。
Q：画像Base64変換のセキュリティは？
A：100%安全なローカル処理です。すべての画像エンコードはブラウザ内で実行されます。サーバーへのアップロードはゼロ。画像がデバイスから外部に送信されることはありません。
Q：対応している画像形式は？
A：PNG、JPEG、GIF、WebP、SVG、BMPなど、すべての一般的なWeb画像形式に対応。元の画質とフォーマットを維持します。
Q：HTMLでBase64画像を使用するには？
A：データURI形式を使用：<img src="data:image/png;base64,YOUR_BASE64_STRING">。インライン画像、アイコン、HTTPリクエスト削減に最適です。
Q：ファイルサイズに制限はありますか？
A：サーバーサイドの制限はありません。処理はブラウザ内でローカルに実行されます。大きなファイルはエンコードに時間がかかる場合がありますが、動作します。
// 主な画像形式とMIMEタイプ
| 形式 | MIMEタイプ |
|---|---|
| PNG | image/png |
| JPEG | image/jpeg |
| GIF | image/gif |
| WebP | image/webp |
| AVIF | image/avif |
| SVG | image/svg+xml |
// コードでのData URI
HTML <img src="data:image/png;base64,iVBORw0KGgo..." alt="">
CSS background: url("data:image/svg+xml;base64,PHN2Zy...");
Linux base64 -w0 logo.png
macOS base64 -i logo.png
Python base64.b64encode(open('logo.png','rb').read()).decode()
Node.js fs.readFileSync('logo.png').toString('base64')
>> その他の質問
Q: Base64の画像が約33%大きくなるのはなぜですか？
A: Base64は3バイトを4文字で表すため約1/3増え、gzipで一部しか相殺できません。そのため、インライン化は数KB程度の非常に小さなファイル向きです。
Q: Data URIは通常の画像ファイルと比べて何が不利ですか？
A: 埋め込み画像は個別にキャッシュできず、HTMLやCSSが肥大化し、そのファイルを読み込むたびに再送されます。大きな画像は別ファイルにしましょう。
Q: SVGはBase64で埋め込むべきですか？
A: 通常は不要です。SVGはテキストなので、URLエンコードした data:image/svg+xml,… の方が小さく読みやすいことが多いです。ただしBase64はどこでも確実に動作します。