画像を Base64 に変換する方法
- 1画像を枠にドロップするか、スクリーンショットを貼り付けるか、「ファイルを選択」を押します。
- 2出力形式を選びます：data URI、Base64 のみ、HTML、CSS、Markdown。
- 3コードをコピーして、ページやスタイルシート、API リクエストに貼り付けます。
出力形式
Data URI
data:image/png;base64,iVBOR…URL を書ける場所ならどこでも使えます。Base64 のみ
iVBORw0KGgoAAAANSUhEUg…Base64 部分だけを受け取る JSON や API 向け。HTML
<img src="data:image/png;base64,…" alt="">HTML メールや 1 ファイル完結のページに埋め込む画像。CSS
background-image: url("data:…");小さなアイコンや模様を追加リクエストなしで。Markdown
data URI に対応した README やメモ。画像をインライン化すべきとき
Base64 にすると画像は約 3 分の 1 大きくなり、インライン化した画像はページと別にキャッシュできません。小さなアイコン、HTML メールのロゴ、1 ファイル完結の文書なら効果があります。写真や 10 KB を超えるような画像は、通常の画像ファイルのほうが速く表示されます。
よくある質問
ファイルサイズの上限はありますか？
すべてブラウザ内で処理するため、決まった上限はありません。ただし大きな画像は非常に長い文字列になり、エディターが重くなることがあるので、インライン化する画像は小さく保ちましょう。
変換で画質は落ちますか？
いいえ。ファイルのバイトをそのままエンコードし、リサイズも再圧縮もしません。デコードすれば同じファイルに戻ります。
Base64 画像はメールで使えますか？
Apple Mail や多くのモバイルメールは表示できます。Gmail や一部の Outlook は data URI をブロックするので、読者が使うメールソフトで確認してください。
文字列を画像に戻すには？
Base64 を画像に変換 に貼り付けると、プレビューとダウンロードができます。