画像をBASE64に変換するコンバーター
Base64データURLは、画像のメディアタイプとエンコード済みバイトをdata:image/png;base64,...のような1つの文字列にまとめたものです。20 MiB以下の画像を選ぶと、ブラウザ内でその値を生成します。コピー前に、元のファイル情報と生成されたデータURLのおおよその長さを確認できます。
画像をBase64でエンコードする方法
-
1
画像を選択
20 MiB以下の画像ファイルを1つ選択します。
-
2
ローカルでエンコード
ブラウザがファイルを読み取り、サーバーへ送信せずに完全なBase64データURLを作成します。
-
3
結果を確認
メディアタイプ、元のファイル情報、生成されたデータURLのおおよその長さを確認します。
-
4
データURLをコピー
完全な`data:image/...;base64,...`の値をクリップボードへコピーします。
インラインにするタイミング、リンクするタイミング
Base64による埋め込みは、サイズが33％増加する代わりにHTTPリクエストを1回節約できます。一部のアセットにとっては十分に価値がある一方で、他のアセットにとっては無駄になります。
サイズの計算
| 元のサイズ | Base64サイズ | 増加バイト数 |
|---|---|---|
| 1 KB | 1.36 KB | 360 B |
| 10 KB | 13.6 KB | 3.6 KB |
| 100 KB | 136 KB | 36 KB |
| 1 MB | 1.36 MB | 360 KB |
判断ガイド
| ユースケース | 埋め込みか外部か |
|---|---|
| 2 KB未満のアイコン（SVGロゴ、スプライト） | 埋め込み |
CSSのカーソル画像（cursor: url()） |
埋め込み |
| 小規模な自己完結型HTMLまたはCSSデモ | 埋め込み |
| JavaScriptペイロードに組み込むアイコン | 埋め込み |
| ヒーロー画像、50 KB超 | 外部 |
| 個別にキャッシュできるもの | 外部 |
データURIの形式
data:[<mediatype>][;base64],<data>
例：
data:image/png;base64,iVBORw0KGgo...、PNGdata:image/svg+xml;utf8,<svg>...</svg>、SVGは、base64を使わずにインラインで埋め込むほうが適している場合が多いdata:image/jpeg;base64,/9j/4AAQS...、JPG
ヒント
- SVGはbase64の代わりに
utf8エンコードのurl()として扱うほうが優れていることが多く、短く読みやすくなります。 - エンコードは画像の内容を検査、無害化しません。特にSVGは動的要素や外部参照を含む場合があるため、信頼できるファイルだけを埋め込んでください。
- JSONペイロード内の大きな画像は、非常に大きい場合に解析を妨げます。マルチパート形式や外部参照の利用を検討してください。
- CSSのbackground-imageにbase64を使うときれいに埋め込めますが、ページ間のキャッシュが効かなくなります。
よくある質問
Base64は入力の3バイトを4文字にエンコードするため、出力は常に入力より約33％大きくなります。10KBの画像では約13,600文字の文字列が生成されます。長くなるのは正常です。
このコンバーターで扱えるのは20 MiB以下の画像1点です。これは処理上限であり、埋め込みの推奨サイズではありません。Base64は元のサイズを約3分の1増やし、画像を個別にキャッシュできなくするため、データURLは小さく保つのが基本です。
いいえ。Base64エンコードはブラウザ内で実行されます。画像がデバイスから外部に送信されることは一切ありません。
このエンコーダーでは復号できません。データURLや生のBase64文字列を画像ファイルに戻す場合は、別の「Base64から画像」ツールを使用してください。
関連ツール
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
ファンタジーマップ作成ツール
再現可能なシード、地形コントロール、視覚スタイルを使って、ブラウザ内で手続き型のファンタジーマップを作成します。実在の地理ではなく、ローカルでSVGまたはPNGの作品をダウンロードできます。
写真エディター
切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。
GIFメーカー
連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
バーコードジェネレーター
Code 128、EAN-13、UPC、ITF-14 など9種類の一次元バーコードを作成します。データはブラウザ内に残り、SVG または PNG をダウンロードできます。