Image to Base64 — CSS Snippet, img src & Data | LazyTools

Image Tool

Image to Base64 Converter — CSS Snippet, img src & Data URL

Convert any image to Base64 encoding with three ready-to-paste code snippets — a raw data URL, a CSS background-image declaration and an HTML img src attribute. Furthermore, each snippet has its own Copy button for pasting directly into the right context. File size, Base64 length and estimated overhead percentage all display in the stats strip.

CSS background-image snippetHTML img src snippetRaw data URLPer-snippet copy buttonsSize overhead % shown

How to use the Image to Base64

Drop your image

Drag any image onto the drop zone or click to browse. Furthermore, the FileReader API converts the image to a Base64 data URL directly in the browser — the file never leaves your device. The stats strip shows file size, Base64 length and overhead percentage.

Review the three code snippets

Three snippets appear automatically — the raw data URL, an HTML img tag with the Base64 src. A CSS background-image declaration. Furthermore, each snippet is ready to paste into the correct context without any editing. A preview of the first and last characters of each snippet confirms the correct encoding.

Copy the snippet you need

Click the Copy button next to whichever snippet matches your use case. Furthermore, the full Base64 string copies to your clipboard regardless of the truncated preview display. Paste directly into your HTML, CSS or JavaScript file.

The three Base64 snippet formats

Each snippet format targets a different code context. Furthermore, using the wrong format requires manual editing — each snippet generates the correct syntax for its context automatically.

Snippet	Syntax	Use in
Raw data URL	data:image/jpeg;base64,/9j/…	JavaScript, JSON, API payloads
HTML img src	<img src="data:…" alt="…">	HTML files, email templates, inline images
CSS background-image	background-image: url("data:…");	CSS files, inline styles, styled-components

Base64 encoding and size overhead

Base64 encodes every 3 binary bytes as 4 ASCII characters. Furthermore, this produces a 33% size increase compared to the original binary file.

Base64 size ≈ original_size × (4/3) ≈ original_size × 1.33

Overhead: approximately 33% larger than binary file
Characters: A–Z, a–z, 0–9, +, / (64 characters + = padding)
Data URL prefix: data:[MIME type];base64, added before encoded data

Worked example: embedding a logo in an HTML email template

An email designer needs a company logo that displays. Relying on external image hosting — some email clients block external images by default. Embedding as Base64 solves this:

The HTML img src snippet pastes directly into the email template's <img> tag. Furthermore, the logo displays in all email clients without any external server dependency. Moreover, the stats strip shows a 44% overhead — a 12 KB PNG logo becomes 17 KB Base64. This size increase is acceptable for a logo but would be prohibitive for large photographs.

What is Base64 image encoding?

Base64 encoding converts binary image data into a string of printable ASCII characters. Furthermore, this allows images to embed directly into text-based formats like HTML, CSS and JSON without requiring a separate file reference. The data URL format — data:[type];base64,[data] — is the standard way to include Base64-encoded images in web contexts. Moreover, Base64 embedding eliminates the HTTP request that a normal image src URL requires, which can improve performance for small images used frequently across a page.

The trade-off of Base64 encoding is a 33% size increase compared to the binary file. Furthermore, a 100 KB image becomes approximately 133 KB as Base64. For large images, this overhead outweighs the request-saving benefit. Moreover, Base64 images cannot be independently cached by the browser — the full string must download every time the HTML or CSS file loads. The optimal use case is small images under 10 KB — icons, tiny logos, loading spinners — where the request overhead dominates the performance cost.

Data URLs and Content Security Policy

Content Security Policy (CSP) headers on modern web applications may block inline data URLs for images. Furthermore, a CSP directive like img-src 'self' prevents data URL images from loading unless img-src data: is explicitly allowed. Developers must add data: to the img-src directive before embedded Base64 images will display. Moreover, this CSP requirement is a security consideration — data URL images bypass same-origin restrictions, which is why strict CSP configurations restrict them.

Why ready-made snippets save developer time

Base64 tools typically show only the raw encoded string. Furthermore, a developer who needs a CSS background-image declaration must manually wrap the string in url("…") syntax — an error-prone step when the string is thousands of characters long. The CSS and HTML snippets in this tool include the correct surrounding syntax automatically. Moreover, the per-snippet Copy button copies the entire string including the surrounding syntax — the developer pastes directly into their code editor without any manual assembly.

Frequently asked questions

When should I use Base64 instead of a file path?+

Base64 embedding suits small images under 10 KB — icons, tiny logos, loading spinners and button graphics. Furthermore, for these small assets, the 33% size overhead is less costly than the additional HTTP request. For images larger than 10–15 KB, file-based references with proper caching produce better performance. Moreover, email templates represent a specific exception where Base64 embedding is beneficial even for larger images — external image blocking in email clients makes embedding the most reliable delivery method.

Can I decode a Base64 string back to an image?+

Yes — paste the raw data URL (starting with "data:image/") into a browser address bar to see the decoded image. Furthermore, most image editors and online tools accept data URL input directly. The Base64 data after the comma contains the binary image data in ASCII encoding — any Base64 decoder produces the original binary file. Moreover, a future version of this tool will include a Base64-to-image decoder for converting data URLs back to downloadable image files.

Why is the Base64 string longer than the original file?+

Base64 converts every 3 binary bytes to 4 printable characters — a 33% expansion. Furthermore, the data URL prefix ("data:image/jpeg;base64,") adds approximately 22–30 characters before the actual data. The overhead percentage in the stats strip shows the exact increase for the specific file. Moreover, this overhead is unavoidable — it is a fundamental property of Base64 encoding. WebP and AVIF formats produce smaller binary files and therefore smaller Base64 strings.

Does the tool work for all image formats?+

The tool converts any image format that the browser can read — JPG, PNG, WebP, GIF, SVG and most others. Furthermore, the MIME type from the file input appears in the stats strip and in the data URL prefix automatically. For SVG files, consider using the SVG Optimiser tool first to reduce the SVG code size before Base64 encoding — SVG compresses significantly with optimisation. Moreover, animated GIFs convert to Base64 as animated images — the animation plays when the data URL loads in a browser.

Can I use Base64 images in CSS for all browsers?+

All modern browsers support data URL images in CSS background-image declarations. Furthermore, Internet Explorer 8 supported data URLs with a 32 KB size limit — larger images displayed as broken. All currently supported browsers have no practical size limit for data URLs in CSS. Moreover, Content Security Policy restrictions may prevent data URL display — adding data: to the img-src CSP directive enables data URL images in secured web applications.

Related tools

→

Rate this tool

4.6

out of 5

★★★★★

540 ratings

5 ★

72%

4 ★

22%

3 ★

2 ★

1 ★

How useful was this tool?

★ ★ ★ ★ ★