Image to Base64 / Data URI
Encodes an image as a Base64 string or a ready-to-paste data URI for CSS, HTML or JSON.
Inlining an image as a data URI removes one request and adds a third to its size, permanently, on every page view — because a data URI cannot be cached separately from the document that carries it. This encodes the file and puts both halves of that trade in front of you before you paste it.
Drop an image
Encoded in this tab. Base64 is not compression — it makes the file a third larger.
How to use it
Drop the image
The type is decided by the bytes, not the extension — a .png that is really a JPEG is common, and an inline image with the wrong type will not render.
Read the verdict
Under about 4 KB inlining is free; past about 100 KB it is delaying first paint on a resource that would otherwise be fetched in parallel and cached.
Pick the wrapper
CSS gives you the url() form, HTML an img tag, and JSON a quoted string — pasted straight in rather than assembled by hand.
Common questions
Does Base64 compress the image?
The opposite. It encodes three bytes as four characters, so the text is exactly 33⅓% longer than the file before any transport compression. It is an encoding, not a compression.
Should I inline my SVG this way?
No. An SVG is text already, so URL-encoding it costs about 10% instead of 33% and the result stays readable and diffable. Base64 on an SVG is the common mistake this page points out when it sees one.
Why does it refuse files over 8 MB?
The data URI would be over 10 MB of text on one line. Most editors, and several browsers’ dev tools, become unusable at that size — and an 8 MB inline image was never the right answer to begin with.
Feed it from
PNG Compressor
Quantises the palette and rewrites the deflate stream to shrink a PNG without changing its dimensions.
Placeholder Image
Generates a solid or gradient placeholder at any size with the dimensions drawn on it.
Base64 to Image
Decodes a Base64 string or data URI back into a viewable, downloadable image.
Base64 Encoder & Decoder
Encodes and decodes Base64 and Base64URL for text or files, handling UTF-8 correctly.
Next
These accept what this tool produces, so the result can go straight in.
Base64 Encoder & Decoder
Encodes and decodes Base64 and Base64URL for text or files, handling UTF-8 correctly.
Base64 to Image
Decodes a Base64 string or data URI back into a viewable, downloadable image.
PNG Compressor
Quantises the palette and rewrites the deflate stream to shrink a PNG without changing its dimensions.
SVG to CSS Data URI
Encodes an SVG as a CSS background data URI, escaping only what needs escaping to keep it small.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.