Convert JPG to Base64 for CSS and HTML
Get a JPEG back as a string shaped for stylesheets, src attributes or JSON — including the quoting, so it pastes cleanly.
The image is read locally with FileReader. Nothing is uploaded.
When you need this
- Putting a small decorative JPEG straight into a CSS rule to avoid a request.
- Building an email template, where external asset hosting is unreliable.
- Generating a self-contained HTML file for offline review.
Why other Base64 converters fail here
Tools that output only a bare string leave you to write the url("data:…") wrapper yourself, and one misplaced quote breaks the whole rule.
Single-line output for a large JPEG creates a stylesheet line hundreds of kilobytes long, which some editors and diff tools handle badly.
The MIME in the prefix is often hard-coded to PNG, so a Data URI holding JPEG bytes gets announced as PNG and may fail to render.
Frequently asked questions
Why is the CSS output wrapped at 76 characters?
Because CSS lets you break a string across lines only when the newline is escaped, so a very long single line is painful to work with in editors and version control. 76 characters is the MIME standard line length and keeps diffs readable. Choose single-line if your CSS is minified anyway.
Is a JPEG a good candidate for a CSS background?
Only if it is small. JPEG uses lossy compression, so the size saving over PNG usually matters only for photographic content — and photographic content is normally too large to inline sensibly. For solid colours, gradients and simple shapes, CSS itself will beat any inlined image on both size and quality.
Will the Data URI break my stylesheet's caching?
Yes, effectively. The image becomes part of the CSS file, so it is re-downloaded whenever the stylesheet is, and you cannot update it without changing the CSS. That is the main reason to keep inlined assets small and stable.
Does the tool strip EXIF when encoding?
No. The file is encoded exactly as provided, so any EXIF — including location data — travels with it into the string. Strip metadata from the source file first if that matters.