What is the difference between Data URI and raw Base64?

A data URI is `data:image/png;base64,…` and can go straight into an `img` `src` or CSS `url()`. Raw Base64 is only the encoded bytes after the comma—useful when an API or config expects Base64 without the `data:` prefix.

Should I inline large images in email or HTML?

Usually no. Base64 increases size by about one third, and many email clients cap total message size. Prefer linked/hosted images for photos; reserve inlining for tiny icons or critical above-the-fold assets.

Is the image uploaded to a server?

No. The file is read with the browser FileReader API and never leaves your device.

How is this different from the Base64 encode/decode tool?

This page converts image files to data URIs or raw Base64. The text Base64 tool encodes UTF-8 strings for APIs and Basic Auth—not binary image files.

Image to Base64

Data URI Encoder

Convert PNG, JPEG, GIF, SVG, or WebP into a Base64 data URI or raw Base64 with preview and copy. Free, browser-only, up to 10 MB.

This conversion runs only in your browser — nothing is uploaded.

Drag & drop an image, or browse below

PNG, JPEG, GIF, SVG, WebP · max 10 MB

Browse files

For UTF-8 text Base64 (not image files), use Base64 Encoder & Decoder

What is this tool?

This image to Base64 converter reads a local image with the browser FileReader API and produces either a full data URI (data:image/…;base64,…) or raw Base64 (payload only). Preview confirms the file before you copy.

Inlining is convenient for tiny icons, self-contained demos, and test fixtures. Base64 increases size by roughly one third and bypasses normal URL caching, so large photos belong on a CDN or static host—not inside HTML or email bodies.

Max file size is 10 MB. Prefer optimized assets under a few hundred KB when you must inline.

Common use cases

Build an img src or CSS background-image: url(…) without a separate asset request
Embed a small logo in an HTML email or signature (watch total message size)
Produce Base64 fixtures for unit tests or Storybook without committing binary files

How to use

Drag an image onto the drop zone or browse (PNG, JPEG, GIF, SVG, WebP · max 10 MB).
Confirm the preview and MIME / file-size chips.
Choose Data URI or Raw Base64, then Copy.
Use Sample for a 1×1 PNG smoke test; Clear resets the workspace.

Examples

Use	Shape	Notes
HTML image	`<img src="data:image/png;base64,…" alt="">`	Data URI tab; keep icons tiny.
CSS background	`background-image: url("data:image/svg+xml;base64,…")`	Same tab; SVG often compresses well.
API / config field	Raw Base64 only (no `data:` prefix)	Raw tab after upload.
Oversized photo in email	Prefer linked URL instead of Base64	Edge: many clients reject or clip large MIME parts.

Practical pitfalls

Email size: Base64 plus MIME headers can push messages past Gmail/Outlook limits; host photos and inline only micro-icons.
Large data URIs block the main thread while reading and inflate DOM/CSS; the UI warns above ~500 KB.
This tool is for image files. UTF-8 text Base64 (APIs, Basic Auth) belongs on the text Base64 encoder—not here.

References

이 도구는 무엇인가요?

브라우저 FileReader로 로컬 이미지를 읽어 data URI(data:image/…;base64,…) 또는 순수 Base64(페이로드만)를 만듭니다. 복사 전 미리보기로 파일을 확인합니다.

작은 아이콘·데모 HTML·테스트 픽스처에 편리합니다. Base64는 대략 ⅓ 커지고 URL 캐시를 우회하므로, 큰 사진은 CDN·정적 호스팅이 맞고 HTML·이메일 본문 인라인은 피하세요.

최대 10 MB입니다. 인라인이 필요하면 수백 KB 이하로 최적화하세요.

자주 쓰는 경우

별도 요청 없이 img src 또는 CSS background-image: url(…) 구성
HTML 이메일·서명에 작은 로고 삽입(전체 메시지 용량 주의)
바이너리 커밋 없이 단위 테스트·Storybook용 Base64 픽스처 생성

사용 방법

드롭 영역에 이미지를 놓거나 파일 찾기(PNG, JPEG, GIF, SVG, WebP · 최대 10 MB).
미리보기와 MIME·용량 칩을 확인합니다.
Data URI 또는 순수 Base64를 고른 뒤 복사합니다.
Sample은 1×1 PNG 스모크 테스트, Clear는 초기화입니다.

예시

용도	형태	메모
HTML 이미지	`<img src="data:image/png;base64,…" alt="">`	Data URI 탭; 아이콘은 작게.
CSS 배경	`background-image: url("data:image/svg+xml;base64,…")`	SVG가 잘 압축되는 편.
API·설정 필드	`data:` 없는 순수 Base64	Raw 탭.
이메일 속 큰 사진	Base64 대신 호스팅 URL	엣지: 클라이언트 MIME 용량 제한.

실무에서 흔한 실수

이메일 용량: Base64+MIME이 Gmail/Outlook 한도를 넘기기 쉽습니다. 사진은 호스팅하고 인라인은 초소형 아이콘만.
큰 data URI는 읽기·렌더 비용을 키웁니다. 약 500 KB 이상이면 UI가 경고합니다.
이미지 전용입니다. UTF-8 텍스트 Base64는 텍스트 Base64 도구를 쓰세요.

참고자료

このツールについて

ブラウザの FileReader でローカル画像を読み、data URI（data:image/…;base64,…）または生 Base64（ペイロードのみ）を作ります。コピー前にプレビューで確認できます。

小さなアイコン、デモ HTML、テスト用フィクスチャに便利です。Base64 は約 1/3 大きくなり URL キャッシュを迂回するため、大きな写真は CDN／静的ホスト向けで、HTML・メール本文へのインラインは避けてください。

上限は 10 MB。インラインが必要なら数百 KB 以下に最適化してください。

よくある用途

追加リクエストなしで img の src や CSS background-image: url(…) を作る
HTML メール／署名に小さなロゴを埋め込む（メッセージ総量に注意）
バイナリをコミットせずテスト用 Base64 フィクスチャを用意する

使い方

ドロップゾーンへ画像を置くか参照（PNG, JPEG, GIF, SVG, WebP · 最大 10 MB）。
プレビューと MIME・サイズ表示を確認。
Data URI または 生 Base64 を選び コピー。
Sample は 1×1 PNG、Clear でリセット。

例

用途	形	メモ
HTML 画像	`<img src="data:image/png;base64,…" alt="">`	Data URI。アイコンは小さく。
CSS 背景	`background-image: url("data:image/svg+xml;base64,…")`	SVG は圧縮しやすい。
API／設定	`data:` なしの生 Base64	Raw タブ。
メール内の大写真	Base64 よりホスト URL	クライアントの容量制限に注意。

実務での落とし穴

メール容量: Base64+MIME は Gmail／Outlook の上限を超えやすい。写真はホストし、インラインは極小アイコンのみ。
大きな data URI は読み込み・描画コストが増えます。約 500 KB 超で UI が警告します。
画像専用です。UTF-8 テキストの Base64 はテキスト用ツールを使ってください。

参考資料

¿Qué es esta herramienta?

Lee una imagen local con FileReader y genera un data URI (data:image/…;base64,…) o Base64 puro (solo el payload). La vista previa confirma el archivo antes de copiar.

Útil para iconos pequeños, demos autocontenidas y fixtures de prueba. Base64 crece ~⅓ y evita la caché por URL: las fotos grandes van a un CDN u host estático, no dentro de HTML o email.

Máximo 10 MB. Si debes incrustar, optimiza por debajo de unos cientos de KB.

Casos de uso comunes

Armar un src de img o background-image: url(…) sin petición extra
Insertar un logo pequeño en email o firma HTML (mira el tamaño total)
Crear fixtures Base64 para tests sin subir binarios al repo

Cómo usar

Arrastra una imagen o elige archivo (PNG, JPEG, GIF, SVG, WebP · máx. 10 MB).
Revisa la vista previa y chips MIME / tamaño.
Elige Data URI o Base64 puro y Copia.
Sample carga un PNG 1×1; Clear reinicia.

Ejemplos

Uso	Forma	Notas
Imagen HTML	`<img src="data:image/png;base64,…" alt="">`	Pestaña Data URI; iconos pequeños.
Fondo CSS	`background-image: url("data:image/svg+xml;base64,…")`	SVG suele comprimir bien.
Campo API	Solo Base64 sin `data:`	Pestaña Raw.
Foto grande en email	URL alojada, no Base64	Límite de tamaño del cliente.

Errores prácticos

Tamaño de email: Base64+MIME puede superar límites de Gmail/Outlook; aloja fotos e incrusta solo micro-iconos.
Los data URI grandes aumentan memoria y coste de render; la UI avisa sobre ~500 KB.
Solo imágenes. El Base64 de texto UTF-8 es otra herramienta.

Referencias

Qu'est-ce que cet outil ?

Lit une image locale via FileReader et produit un data URI (data:image/…;base64,…) ou du Base64 brut (payload seul). L’aperçu confirme le fichier avant la copie.

Pratique pour petites icônes, démos autonomes et fixtures de test. Base64 grossit d’environ un tiers et contourne le cache URL : les grandes photos vont sur un CDN / hôte statique, pas dans le HTML ou l’e-mail.

Maximum 10 Mo. Si vous devez inliner, restez sous quelques centaines de Ko.

Cas d'usage courants

Construire un src d’img ou background-image: url(…) sans requête séparée
Intégrer un petit logo dans un e-mail / signature HTML (surveillez la taille totale)
Produire des fixtures Base64 pour tests sans committer de binaires

Comment utiliser

Glissez une image ou parcourez (PNG, JPEG, GIF, SVG, WebP · max. 10 Mo).
Vérifiez l’aperçu et les pastilles MIME / taille.
Choisissez Data URI ou Base64 brut, puis Copier.
Sample charge un PNG 1×1 ; Clear réinitialise.

Exemples

Usage	Forme	Notes
Image HTML	`<img src="data:image/png;base64,…" alt="">`	Onglet Data URI ; icônes minuscules.
Fond CSS	`background-image: url("data:image/svg+xml;base64,…")`	SVG souvent compact.
Champ API	Base64 sans préfixe `data:`	Onglet Raw.
Grande photo en e-mail	URL hébergée, pas Base64	Limites des clients mail.

Pièges courants

Taille e-mail : Base64+MIME peut dépasser Gmail/Outlook ; hébergez les photos, inline uniquement des micro-icônes.
Les grands data URI coûtent en mémoire et rendu ; l’UI avertit au-delà d’~500 Ko.
Images uniquement. Le Base64 texte UTF-8 est un autre outil.

Références

这个工具是什么？

用浏览器 FileReader 读取本地图片，生成完整 data URI（data:image/…;base64,…）或 纯 Base64（仅载荷）。复制前可预览确认。

适合小图标、自包含演示和测试夹具。Base64 大约增大三分之一，且绕过 URL 缓存；大图应放 CDN/静态托管，不要塞进 HTML 或邮件正文。

上限 10 MB。必须内联时请优化到数百 KB 以下。

常见用途

构造无需额外请求的 img src 或 CSS background-image: url(…)
在 HTML 邮件/签名中嵌入小 logo（注意整封邮件体积）
生成测试用 Base64 夹具，无需提交二进制文件

如何使用

将图片拖入投放区或浏览选择（PNG、JPEG、GIF、SVG、WebP · 最大 10 MB）。
确认预览与 MIME / 体积芯片。
选择 Data URI 或 纯 Base64，然后复制。
Sample 加载 1×1 PNG；Clear 重置。

示例

用途	形态	说明
HTML 图片	`<img src="data:image/png;base64,…" alt="">`	Data URI 页签；图标保持很小。
CSS 背景	`background-image: url("data:image/svg+xml;base64,…")`	SVG 通常更省体积。
API / 配置字段	不要 `data:` 前缀的纯 Base64	Raw 页签。
邮件中的大图	用托管 URL，勿用 Base64	客户端常有容量上限。

实践中的常见误区

邮件体积： Base64+MIME 易超过 Gmail/Outlook 限制；照片走托管，内联仅留微型图标。
大 data URI 增加内存与渲染成本；超过约 500 KB 时界面会警告。
仅面向图片。UTF-8 文本 Base64 请用文本工具。

参考资料

這個工具是什麼？

用瀏覽器 FileReader 讀取本機圖片，產生完整 data URI（data:image/…;base64,…）或 純 Base64（僅載荷）。複製前可預覽確認。

適合小圖示、自包含示範與測試夾具。Base64 約增大三分之一，且繞過 URL 快取；大圖應放 CDN／靜態託管，不要塞進 HTML 或郵件正文。

上限 10 MB。必須內嵌時請優化到數百 KB 以下。

常見用途

組出無需額外請求的 img src 或 CSS background-image: url(…)
在 HTML 郵件／簽名嵌入小 logo（注意整封郵件體積）
產生測試用 Base64 夾具，無需提交二進位檔

如何使用

將圖片拖入投放區或瀏覽選擇（PNG、JPEG、GIF、SVG、WebP · 最大 10 MB）。
確認預覽與 MIME／體積晶片。
選擇 Data URI 或 純 Base64，然後複製。
Sample 載入 1×1 PNG；Clear 重設。

範例

用途	形態	說明
HTML 圖片	`<img src="data:image/png;base64,…" alt="">`	Data URI 分頁；圖示保持很小。
CSS 背景	`background-image: url("data:image/svg+xml;base64,…")`	SVG 通常更省體積。
API／設定欄位	不要 `data:` 前綴的純 Base64	Raw 分頁。
郵件中的大圖	用託管 URL，勿用 Base64	用戶端常有容量上限。

實務上常見陷阱

郵件體積： Base64+MIME 易超過 Gmail／Outlook 限制；照片走託管，內嵌僅留微型圖示。
大 data URI 增加記憶體與渲染成本；超過約 500 KB 時介面會警告。
僅面向圖片。UTF-8 文字 Base64 請用文字工具。

參考資料

Last reviewed: 2026-07-27

Frequently asked questions

What is the difference between Data URI and raw Base64?: A data URI is `data:image/png;base64,…` and can go straight into an `img` `src` or CSS `url()`. Raw Base64 is only the encoded bytes after the comma—useful when an API or config expects Base64 without the `data:` prefix.
Should I inline large images in email or HTML?: Usually no. Base64 increases size by about one third, and many email clients cap total message size. Prefer linked/hosted images for photos; reserve inlining for tiny icons or critical above-the-fold assets.
Is the image uploaded to a server?: No. The file is read with the browser FileReader API and never leaves your device.
How is this different from the Base64 encode/decode tool?: This page converts image files to data URIs or raw Base64. The text Base64 tool encodes UTF-8 strings for APIs and Basic Auth—not binary image files.