ConvertBlink
JA

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

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

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

今すぐ変換

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

または

使い方

Base64のdata URIを使うと、JPEGをブラウザが取得する別ファイルとしてではなく、ページ自体の中に埋め込めます。.jpgや.jpegを入れると、このツールはローカルでデコードし、`<img src>`やCSSの`background-image`、JavaScriptの変数に貼り付けられる1本の`data:`文字列を返します。アセット用フォルダもビルド手順も不要で、その画像のためのHTTP往復も発生しません。 出力について1つ知っておくべき点があります。エンコーダーはJPEGをデコードし、PNGベースのdata URI（`data:image/png;base64,...`）として書き出します。この再パッケージはピクセルには手を加えませんが、PNGはJPEGの写真向け圧縮なしでデータを保存するため、文字列は元の.jpgより大きくなるのが普通です。さらにBase64テキストはどんなバイナリにも約3分の1のオーバーヘッドを加えます。つまり、4000pxの写真ではなく、アイコン・スプライト・サムネイルといった小さなアセットに使うのが適しています。 結果はコピーボタン付きのテキストボックスに表示されるので、文字列全体をワンクリックで取得できます。すべてブラウザ内で動作します。画像がアップロードされたり保存されたり、サーバーに見られたりすることはなく、ネットワークをオフにしてエンコードすれば確認できます。

関連変換ツール

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

JPEGオプティマイザー：mozjpegでJPGファイルサイズを縮小

mozjpegでJPEGを再エンコードし、ほぼ同じ画質のままファイルサイズを削減。すべてブラウザ内で完結し、アップロード不要、元より大きいファイルが返ることはありません。

.jpg.jpeg
今すぐ試す

JPGをPDFに変換：複数の写真を1つの複数ページPDFにまとめる

複数のJPG写真をブラウザ内で1つの複数ページPDFにまとめます。ドラッグで並べ替え、追加、削除が可能。JPGはそのまま埋め込み、再圧縮なし、アップロードなし。

.jpg.jpeg
今すぐ試す

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

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

.jpg.jpeg +3
今すぐ試す

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

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

.png
今すぐ試す

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

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

.svg
今すぐ試す

WebPをJPEGに変換：高速・安全・ブラウザ内で完結

WebPをブラウザ内で無料でJPEGに変換。ファイルは端末から一切送信されず、透過は白で塗りつぶされ、WebPを受け付けないアプリでも開けるJPEGになります。

.webp
今すぐ試す

他のJPG

jpg optimizerjpg → pdf

変換先BASE64

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

機能

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

対応フォーマット

.jpg .jpeg

出力: Base64

技術仕様

input Format JPEG / JPG (.jpg, .jpeg)
output Format Base64 data URIテキスト (data:image/png;base64,...)
compression Type デコード後に可逆のPNGとして再パッケージ、非可逆なJPEG圧縮の2度がけなし
quality Retention デコードしたJPEGと一致、追加の非可逆な再圧縮なし
color Space Support ブラウザのCanvasパイプラインによる8ビットRGB / RGBA
max Resolution デバイスのメモリのみによる制限
processing Time 瞬時、ブラウザ内で動作

主な利点

  • 画像をマークアップやスタイルに直接埋め込み、HTTPリクエストを1つ削減
  • ワンクリックで丸ごとコピーできる貼り付け可能なdata URIを生成
  • 100%ブラウザ内で動作、JPEGはアップロードも保存もされない
  • 非可逆な2度目の圧縮なし、デコード済みピクセルを可逆で包む
  • ページ読み込み後はオフラインで動作、制限の厳しいネットワークで便利
  • 出力はHTMLのsrc、CSSのurl()、JS文字列にエスケープなしでそのまま収まる

一般的な使用例

  • 小さなアイコンやロゴを単一ファイルのHTMLページやメールテンプレートに埋め込む
  • 別のアセットファイルを配信せずにCSSのbackground-imageを組み込む
  • プレースホルダーやスプライトをJavaScriptバンドルに直接ハードコードする
  • 外部ファイルを参照できないMarkdownやJSON文書に画像を貼り付ける
  • 小さな画像をデータベースや設定ファイルのテキストフィールドとして保存する
  • アセット用フォルダを用意せずにコンポーネントをプロトタイプする
  • 依存ゼロで画像を描画する自己完結したスニペットを送る

プロのヒント

  • これは小さな画像専用に、大きな写真のインライン化はHTMLを肥大化させキャッシュを台無しにする
  • 文字列はバイナリより約33%大きく、さらにPNG再パッケージのオーバーヘッドが加わる点に注意
  • 複数ページで再利用する画像なら、個別にキャッシュされる.jpgの方がインラインより有利なことが多い
  • エンコード前に元のJPEGを圧縮しておくと、できる文字列が短く済む
  • サーバー側でgzipやBrotliをかけよう、Base64テキストは通信時によく圧縮される
  • 貼り付ける際はdata:接頭辞を丸ごと残す、ブラウザはそれでMIMEタイプを判別する

よくある質問

`data:image/png;base64,`で始まり、その後にエンコードされた文字が続く1行です。ツールはJPEGをデコードしPNGベースのdata URIとして書き出すため、入力がJPEGでもMIMEの接頭辞は`image/png`になります。ブラウザでは`<img>`タグやCSS背景で参照する通常の画像とまったく同じように表示されます。
HTMLではsrc属性に貼り付けます：`<img src="data:image/png;base64,iVBOR...">`。CSSではurl()で囲みます：`background-image: url(data:image/png;base64,iVBOR...)`。JavaScriptでは文字列全体を変数に代入するか`element.src`に設定します。追加のエンコードやエスケープは不要です。
重なり合う2つの理由があります。まず、Base64テキストは3バイトを4つのASCII文字に詰め込むため、元のバイナリより約33%大きくなります。次に、このツールはデコードした画像をPNGとして書き出し、PNGはJPEGの非可逆な写真向け圧縮を使わないため、エンコードが始まる前の段階で生のバイト数が増えます。元にした.jpgより明らかに重い文字列になると考えてください。
非可逆なJPEG圧縮が2度かかることはありません。ツールはJPEGを一度だけデコードし、そのデコード済みピクセルをそのまま可逆のPNGとしてdata URIに包むため、得られる結果はデコード元と一致します。関係する圧縮は、元のJPEGにすでに焼き込まれていたものだけです。
いいえ。大きな写真をインライン化するとHTMLやCSSが肥大化し、その画像を個別にキャッシュできなくなり、ページ描画が遅れることもあります。Base64のインライン化が役立つのは、アイコン・ロゴ・スプライト・プレースホルダーといった小さな画像です。本物の写真は、ブラウザがキャッシュして遅延読み込みできる別々の.jpgファイルのままにしておきましょう。
いいえ。デコードもエンコードもCanvas APIを使ってブラウザ内で実行されます。ファイルがデバイスから出ることはなく、サーバーへ送信されるものも保存されるものもありません。ネットワークを切断しても動作します。
できますが、別のツールが必要です。このページはJPEGからBase64へのエンコードのみを行います。逆方向には、data URIや生のBase64を受け取って画像ファイルを書き出すBase64から画像への変換ツールを使ってください。
形式そのものによる固定の上限はなく、デバイスの利用可能なメモリだけが制約です。画像全体をデコードしてブラウザ内に保持するためです。非常に大きなファイルは非常に長い文字列を生み、エディタへの貼り付けが遅くなることがあります。いずれにせよインライン化には小さな画像が最適です。