画像を Base64 に変換

Every 3 bytes of the file become 4 characters, and the last group is padded with = to a multiple of 4. The text is therefore about 33.3 % larger than the image: the 224,092-byte test photo used on this site becomes 298,792 characters. The page shows both numbers and the exact growth for your file.

When the HTML or CSS is served with gzip or Brotli, most of that overhead is won back, because Base64 text compresses again. With gzip at level 9, the test photo’s 298,792 characters shrink to 223,900 bytes, about the size of the JPG itself, and this site’s 2,197-byte 32 px favicon becomes 2,932 characters, or 1,978 bytes gzipped. Gzip cancels the Base64 penalty; it does not make the image smaller than the file.

A data URI saves one request, which helps for small things: a 1 KB icon, a loading spinner, a background pattern in a CSS file. The cost is that the image can no longer be cached on its own. It is downloaded again with every page or stylesheet that contains it, and the browser has to parse it before it can render. Above roughly 100 KB of Base64 the page warns you, since a normal image file with a long cache lifetime will almost always load faster.

The img snippet includes width and height when the image has them, so the browser reserves space and the layout does not jump. For SVG, a percent-encoded data URI (data:image/svg+xml,…) is often shorter than Base64; the decoder side of this page accepts both.

Developers often try Base64 to put a logo inside an HTML email without hosting it. Email clients do not treat data URI images the same way, and some strip or block them, so send a test to the clients your readers actually use before relying on it. For a newsletter that must look right everywhere, a hosted image or a CID attachment is the safer choice; for an internal tool or a single known client, inline Base64 can be enough.

Paste a full data URI or just the Base64 part. Line breaks, spaces, quotes and wrappers such as src="…" or url(…) copied along with the value are ignored, and URL-safe Base64 (with - and _) works too. The format is read from the first bytes of the result, not from the MIME type in the data URI. If a string says image/jpeg but contains PNG data, you get a note and a file saved as .png. A JPG pasted in and downloaded again is byte-for-byte the original: the 224,092-byte test photo comes back as the same 224,092 bytes. Invalid characters, a cut-off string or data that is not an image each produce their own error message.