Passer au contenu principal

Image To Base64

The Image to Base64 Converter encodes any image file into a Base64 string that can be embedded directly in HTML, CSS, JavaScript, or JSON without a separate image file. Paste the Base64 string as a data URL in an img src attribute or CSS background-image to serve the image inline. Useful for small icons, reducing HTTP requests, and embedding images in email templates.

Cliquez pour télécharger une image

PNG, JPG, GIF, SVG jusqu'à 5 Mo

Aperçu

Sortie Base64

Partager cet outil
Developer Tools

À propos de Image to Base64 Converter

The Image to Base64 Converter encodes any image file into a Base64 string that can be embedded directly in HTML, CSS, JavaScript, or JSON without a separate image file. Paste the Base64 string as a data URL in an img src attribute or CSS background-image to serve the image inline. Useful for small icons, reducing HTTP requests, and embedding images in email templates.

Comment l'utiliser

  1. Upload an image file (PNG, JPG, GIF, SVG, WebP).
  2. The tool encodes it to a Base64 string instantly.
  3. Copy the full data URL (data:image/png;base64,...) or just the Base64 string.
  4. Paste into your HTML, CSS, or code where the image URL is needed.

Formule et méthodologie

Base64 encoding: convert each 3 bytes of binary data to 4 ASCII characters from the Base64 alphabet (A-Z, a-z, 0-9, +, /). Data URL format: data:[mime-type];base64,[base64-string]. Size increase: Base64 is ~33% larger than binary (4/3 ratio). 1KB image = ~1.37KB Base64. Padding: = characters at end if input not divisible by 3.

Cas d'usage courants

  • Embedding small icons in CSS to eliminate HTTP requests
  • Including images in email HTML without external links
  • Storing images in JSON APIs or databases as strings
  • Creating self-contained HTML files with inline images
  • Testing image display in development without a file server

Questions fréquentes

No — Base64 should only be used for small images (under ~5-10KB). The ~33% size overhead is acceptable for small files. Large Base64-encoded images bloat your HTML/CSS significantly, prevent browser caching (the data URL changes if the image changes), and increase time to first byte. For anything larger than small icons, use regular image files with proper caching headers.
In HTML: <img src="data:image/png;base64,iVBORw0KGgo..." />. In CSS: background-image: url("data:image/png;base64,..."). In JavaScript: element.src = "data:image/jpeg;base64,...". The MIME type in the data URL must match the image format. SVG images use "data:image/svg+xml;base64,..." or can be URL-encoded without Base64 for better compression.

Outils connexes

Tous les outils →
Image

Image Compressor
Image

Base64 to Image Decoder
Image

Image Format Converter
Image

SVG to PNG Converter
Image

Image Resizer

Intégrer cet outil sur votre site

Gratuit pour usage personnel et commercial. Copiez simplement le code ci-dessous.