画像を Base64 に変換
この画像 Base64 変換ツールに画像をドロップするだけで、データ URI と、HTML、CSS、JavaScript にそのまま貼り付けられるスニペットを取得できます。インライン画像は小さなアイコンの HTTP リクエストを減らし、単一ファイルの HTML、メールテンプレート、オフラインアプリには欠かせません。
画像ファイル
ここに画像をドロップするか、選択してください
オンラインで 画像を Base64 に変換 を変換する方法
- 画像ファイルを選択するか、画像の URL を貼り付けます。
- 出力を選びます：データ URI、
<img>、CSS 背景、ファビコン、JSON など。 - 画像を Base64 にエンコードをクリックします。
- 画像をプレビューしてコードをコピーします。
その他の 画像を Base64 に変換 変換ツール
出力形式
結果をどのような形式で出力するかを選びます。変換ツールは次の形式で出力できます：
- txt: Base64 文字列のみ。コード、データベースのフィールド、API リクエストにそのまま貼り付けられます。
- uri: ブラウザのアドレスバーに貼り付けたり、URL を使える場所ならどこでも使ったりできる完全な
data:URI。 - html img:
srcにデータ URI を指定した<img>タグ。 - css background image:
background-image: url(data:...)を使った CSS ルール。 - html favicon: インラインのファビコン用の
<link rel="icon">タグ。 - html hyperlink: 埋め込みファイルをダウンロードまたは開く
<a>リンク。 - html iframe: コンテンツをインラインで表示する
<iframe>。 - javascript image:
Imageオブジェクトを作成する JavaScript。 - javascript popup: コンテンツを新しいウィンドウで開く JavaScript。
- json: ファイル名、MIME タイプ、データを含む JSON オブジェクト。
- xml: CDATA セクション内にデータを含む XML 要素。
画像を Base64 でインライン化すべきなのはどんなときですか？
アイコン、ロゴ、プレースホルダーなどの小さな画像（およそ 5〜10 KB 未満）はインライン化してリクエストを減らしましょう。大きな写真のインライン化は避けてください。HTML/CSS が重くなり、個別にキャッシュできず、表示も遅れます。詳しくはデータ URI の解説をご覧ください。
よくある質問
画像を Base64 に変換するには？
画像を選び、出力に「データ URI」または「<img>」を選択して、「画像を Base64 にエンコード」をクリックします。結果を HTML や CSS にコピーしてください。
対応している画像形式は？
ブラウザで読み込めるあらゆる形式：PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO、AVIF、TIFF など。
HTML で Base64 画像を使うには？
データ URI を src 属性に入れます：<img src="data:image/png;base64,iVBORw0KGgo..." alt="">。
コメント (0)
「画像を Base64 に変換」についての質問、アイデア、不具合はありますか？コメントを残したり、ツールを評価したり、他の人に返信したりできます。
まだコメントはありません。最初のフィードバックをお寄せください！