ConvertBlink
JA

画像をBase64データURIに変換（JPG/PNG/GIF/WebP対応）

JPG・PNG・GIF・WebPを、HTML・CSS・JSにそのまま貼り付けられるBase64のdata:URIに変換します。処理はブラウザ内で完結し、ファイルは端末から外に出ません。

ブラウザーネイティブ
プライバシー第一
無料

今すぐ変換

ファイルをここにドラッグ＆ドロップ

または

使い方

画像をコードの隣に置くのではなく、コードの中に埋め込みたい場面があります。CSSファイル内の16pxアイコン、単一ファイルのHTMLメールに入れるロゴ、コンポーネントに焼き込んだプレースホルダーなどです。このツールはJPG・PNG・GIF・WebPを受け取り、`img`のsrc、CSSの`background-image: url(...)`、JSの変数にそのまま入る`data:image/png;base64,...`の文字列を返します。結果にはコピーボタンが付いているので、数千文字に及ぶこともある文字列を手で選択する必要はありません。 変換前に知っておくべき点があります。入力が何であっても、出力は常にPNGのデータURIになります。ブラウザがファイルをデコードしてcanvasに描画し、PNGとして書き出し直すためです。そのためPNGは劣化なく往復しますが、JPGやWebPはいったんピクセルに分解されて再エンコードされ、既存のJPEGノイズはそのまま焼き付き、できあがるPNG文字列は元のファイルより大きくなるのが普通です。アニメーションGIFは最初の1フレームだけになります。canvasは静止画を1枚しか取り込めないからです。 Base64の処理そのものでバイト数が約3分の1増えます。画像3バイトごとに4つのASCII文字になるためです。このオーバーヘッドは、アセットをインライン化してHTTPリクエストを1つ減らすための代償です。だからこそアイコン・スプライト・低解像度のプレースホルダーといった小さなものでは得をし、原寸の写真では不利になります。 すべてはあなたのタブ内で動きます。ファイルはcanvasとFileReaderのAPIでローカルに読み込まれてエンコードされ、サーバーには一切渡りません。だから非公開のスクリーンショットや社内のUIアセットも、自分の端末の中にとどまります。

関連変換ツール

あなたのワークフローに役立つ他の強力なコンバーターを発見してください

画像をWebPに変換：JPG・PNG・BMP・GIFをWebPへ

JPG・PNG・BMP・GIFをブラウザでWebPに変換。非可逆WebPでファイルを軽くし、ページ表示を高速化。アップロードなし、完全プライベート、オフラインでも動作。

.jpg.jpeg +3
今すぐ試す

JPEGをBase64 data URIに変換、ブラウザ完結で無料

JPEGをBase64のdata URIにエンコードし、HTML・CSS・JSにそのまま貼り付け。ブラウザ内で完結しアップロードなし。ワンクリックで文字列をコピー。

.jpg.jpeg
今すぐ試す

PNGをBase64に変換：PNGをData URIにエンコード

ブラウザ内でPNGをBase64のData URIにエンコード。HTML・CSS・JSに貼り付けて小さなアイコンをインライン化できます。アップロード不要、ワンクリックでコピー、可逆。

.png
今すぐ試す

PSDをPNGに変換：Photoshopファイルをブラウザで開く

Photoshopなしで.psdファイルを開けます。このツールはファイルに保存された統合プレビューを読み取り、透明部分を保ったまま1枚のPNGとして書き出します。すべてブラウザ内で完結します。

.psd
今すぐ試す

PNGをSVGに変換：ロゴ・アイコンをベクター化

PNGのロゴ・アイコン・線画をブラウザで編集可能なSVGパスにトレース。無料、アップロードなし、透かしなし。ベクター化の限界も正直に説明します。

.png.jpg +1
今すぐ試す

SVGからPNGへ変換：ベクターをブラウザでラスタライズ

SVGベクターファイルをブラウザでPNGビットマップにラスタライズ。アルファチャンネルを保持し、出力サイズも指定可能。アップロード・透かし・登録なし。

.svg
今すぐ試す

他のCANVAS

canvas → webp

変換先BASE64

jpg → base64png → base64
すべてのコンバーターを表示

機能

  • ファイルアップロード不要
  • 100% プライバシー重視
  • ブラウザー駆動
  • 高速処理
  • 永久無料

対応フォーマット

.jpg .jpeg .png .gif .webp

出力: Base64

技術仕様

input Format JPG/JPEG, PNG, GIF, WebP
output Format Base64データURI（data:image/png;base64,...）。コピー可能なテキスト文字列
compression Type Base64テキストエンコード。先にcanvas上でPNG（可逆）へ再エンコード
quality Retention PNG入力は劣化なく往復、JPG/WebPは既存のノイズを保持、GIFは最初の1フレームのみ
color Space Support PNG出力経由でRGB＋8ビットのアルファに完全対応
max Resolution 端末のメモリのみによる制限
processing Time 瞬時、ブラウザ内で実行

主な利点

  • アイコンやロゴをインライン化してHTTPリクエストを1つ減らせる
  • コピーボタンで接頭辞を含むdata:URI全体をワンクリックで取得
  • PNG出力なのでPNG・WebP入力のアルファ透過を維持
  • ブラウザ内でローカルにエンコード、ファイルは一切アップロードしない
  • 1つのツールでJPG・PNG・GIF・WebPの入力に対応
  • 出力はHTMLのimg、CSSのurl()、JS変数にそのまま貼り付けられる

一般的な使用例

  • 小さなUIアイコンをCSSスタイルシートに直接埋め込む
  • ロゴを単一ファイルのHTMLメールやレポートにインライン化する
  • 遅延読み込み用の低品質な画像プレースホルダーを生成する
  • アセットを自己完結型のHTMLやSVGファイルにまとめる
  • 小さな画像をデータベースやJSONのテキストフィールドとして保存する
  • ホスティングせずに画像をMarkdownやコードスニペットに貼り付ける
  • 非公開のスクリーンショットをサーバーに送らずにエンコードする

プロのヒント

  • Base64は小さなアセット向け。大きな写真はソースを肥大化させ、別々のブラウザキャッシュが効かなくなる
  • 元データより約33％多いバイト数を見込み、さらにJPG/WebPからPNGへの再エンコード分も加わる
  • ここではアニメーションGIFが最初の1フレームになるので、本物のアニメーションはリンクファイルのままにする
  • 出力はJPGやWebP入力でも常にimage/pngの接頭辞が付く
  • data:image/png;base64,を含めて文字列全体をコピーすること。さもないと表示されない

よくある質問

画像はBase64処理の前にcanvas上で生のピクセルにデコードされ、PNGとして書き出されるため、URIは必ずdata:image/png;base64で始まります。ピクセル自体は入力画像の表示と一致しますが、JPGの場合は「すでに劣化した画像を劣化なしのPNGにしたもの」になり、元のJPGより大きくなるのが普通です。どうしてもdata:image/jpegのURIが必要な場合、このツールでは生成できません。
URLを書ける場所ならどこにでも貼り付けられます。HTML: <img src="data:image/png;base64,iVBOR...">。CSS: background-image: url('data:image/png;base64,iVBOR...')。JS: 文字列全体を変数やelement.srcに代入します。コピーボタンはdata:image/png;base64,の接頭辞を含めた完全なURIをクリップボードに入れるので、そのまま表示できます。
はい。Base64は3バイトを4つのASCII文字として保存するため、テキストはバイナリより約33％大きくなります。JPGやWebPの入力は、ここでPNGに再エンコードされるためさらに大きくなります。それでもネットワークリクエストを1つ節約できるので極小のアセットでは有利ですが、大きな写真では不向きです。
最初の1フレームだけが残ります。canvasは静止画を1枚取り込むだけなので、アニメーションと以降のフレームはすべて破棄され、静止したPNGのデータURIになります。アニメーションをインラインで保ちたい場合は、ここでエンコードせずにGIFを別ファイルとしてリンクしてください。
はい。出力がPNGなので、PNGやWebPの入力にあるアルファチャンネルはそのまま引き継がれ、透過アイコンは透過のままになります。JPGにはそもそも透過がないため、失われるものはありません。
いいえ。デコード、canvasでの描画、Base64エンコードはすべてブラウザのタブ内で行われます。ファイルはサーバーに送られないため、機密のスクリーンショットや社内のUIアセット、第三者を経由させたくないものでも安全に使えます。
小さくて重要なアセットをインライン化してください。アイコン、ロゴ、1pxのグラデーション、低品質のプレースホルダー、ファーストビューのスプライトなど、HTTPリクエストを1つ減らすことで初回描画が速くなるケースです。それ以外はリンクにします。大きな画像をインライン化するとHTMLやCSSが肥大化し、別ファイルとしてキャッシュできず、埋め込んだページごとに毎回ダウンロードされてしまいます。
端末のメモリ以外に固定の上限はありません。非常に大きな画像はcanvasと長い文字列の両方として存在するため、巨大なファイルは動作が遅くなったり、タブのメモリを使い切ったりすることがあります。実際にはBase64のインライン化は小さなアセットでのみ意味があるので、これが問題になることはまれです。