[{"data":1,"prerenderedAt":44},["ShallowReactive",2],{"$fF8Jd2M6pkV3Kna8CdVeGzIdT9dzJGFwy0t1AsEWhevY":3},{"slug":4,"title":5,"description":6,"date":7,"tags":8,"tools":13,"draft":15,"html":16,"toc":17,"minutes":43},"images-as-base64-data-uris","Images as Base64 Data URIs, and When Inlining Helps or Hurts","Why Base64 makes an image a third bigger, when a data URI saves a request and when it slows a page down, and how ToolOnTap's Image to Base64 tool is built.","2026-09-19",[9,10,11,12],"base64","html","css","web performance",[14],"image-to-base64",false,"\u003Cp>Sometimes an image has to live inside a text file. A single-file HTML report, a CSS file with a small icon in it, a JSON test fixture or a config that can’t point at a URL. The usual answer is a Base64 data URI, and the usual mistake is using one for a picture that should have stayed a normal file. I built the \u003Ca href=\"\u002Fimage-to-base64\">Image to Base64\u003C\u002Fa> tool for the first case, and most of the work went into making it warn you about the second.\u003C\u002Fp>\n\u003Ch2 id=\"what-a-data-uri-is\">What a data URI is\u003C\u002Fh2>\n\u003Cp>A data URI puts a file’s contents where a URL would normally go. For an image it looks like \u003Ccode>data:image\u002Fpng;base64,iVBORw0KGgo...\u003C\u002Fcode>, in three parts. \u003Ccode>data:\u003C\u002Fcode> says the content is right here, not on a server. \u003Ccode>image\u002Fpng\u003C\u002Fcode> is the media type, which tells the browser how to decode what follows. \u003Ccode>;base64,\u003C\u002Fcode> says the rest is Base64 text. Anything that accepts an image URL accepts this instead: the \u003Ccode>src\u003C\u002Fcode> of an \u003Ccode><img>\u003C\u002Fcode>, a CSS \u003Ccode>url(...)\u003C\u002Fcode>, the \u003Ccode>href\u003C\u002Fcode> of a favicon link.\u003C\u002Fp>\n\u003Cp>The browser reads the media type from the URI, not from a file name, so it has to be right. The tool doesn’t build it by hand. It reads each file with the browser’s \u003Ccode>FileReader.readAsDataURL\u003C\u002Fcode>, which writes in the type the browser already detected for the file. That’s why an SVG comes out as \u003Ccode>data:image\u002Fsvg+xml;base64,...\u003C\u002Fcode> and a GIF as \u003Ccode>data:image\u002Fgif;base64,...\u003C\u002Fcode> with no extra code.\u003C\u002Fp>\n\u003Ch2 id=\"why-the-text-is-a-third-bigger\">Why the text is a third bigger\u003C\u002Fh2>\n\u003Cp>Base64 turns every 3 bytes (24 bits) into 4 characters of 6 bits each, picked from 64 safe characters: A–Z, a–z, 0–9, \u003Ccode>+\u003C\u002Fcode> and \u003Ccode>\u002F\u003C\u002Fcode>. When the file length isn’t a multiple of 3, the last group is padded with \u003Ccode>=\u003C\u002Fcode>. So the length is easy to predict:\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> base64Length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#b35309;--shiki-dark:#FFAB70\">bytes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Math.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">ceil\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(bytes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The test for this compares it with Node’s own Base64 encoder for files of 0, 1, 2, 3, 4, 100 and 1,000 bytes, so the padding cases are covered.\u003C\u002Fp>\n\u003Cp>Here’s what that means for real sizes, before the short \u003Ccode>data:image\u002F...;base64,\u003C\u002Fcode> prefix is added:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\u003Cthead>\n\u003Ctr>\n\u003Cth>Image file\u003C\u002Fth>\n\u003Cth>Base64 text\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>3 KB (3,072 bytes)\u003C\u002Ftd>\n\u003Ctd>4,096 characters\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>10 KB (10,240 bytes)\u003C\u002Ftd>\n\u003Ctd>13,656 characters\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>50 KB (51,200 bytes)\u003C\u002Ftd>\n\u003Ctd>68,268 characters\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>300 KB (307,200 bytes)\u003C\u002Ftd>\n\u003Ctd>409,600 characters\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\u003Cp>Every character is one byte in an HTML or CSS file, so the inlined image costs about 33% more than the file it came from. The tool shows both numbers next to each image (“3.0 KB image → 4.0 KB of text”), so you see the cost before you paste it anywhere.\u003C\u002Fp>\n\u003Ch2 id=\"four-ways-to-paste-the-same-image\">Four ways to paste the same image\u003C\u002Fh2>\n\u003Cp>People need the result in different places, so the tool offers four formats. They all start from the same data URI, and switching between them is a few lines of string work:\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> formatBase64\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#b35309;--shiki-dark:#FFAB70\">dataUri\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#b35309;--shiki-dark:#FFAB70\">format\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Base64Format\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">  switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (format) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'data-uri'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> dataUri\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'base64'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> dataUri.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(dataUri.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">indexOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">','\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'html'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> `<img src=\"${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">dataUri\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}\" alt=\"\">`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'css'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> `background-image: url(\"${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">dataUri\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}\");`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Cstrong>Data URI\u003C\u002Fstrong> is the full string, for any place that takes a URL.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Base64\u003C\u002Fstrong> is only the part after the comma. It’s what APIs and JSON fields usually want, because they store the media type in a separate field.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>HTML\u003C\u002Fstrong> is a ready \u003Ccode><img>\u003C\u002Fcode> tag. The \u003Ccode>alt\u003C\u002Fcode> is empty on purpose, because only you know what the image shows. Fill it in, or leave it empty if the image is decoration.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>CSS\u003C\u002Fstrong> is a \u003Ccode>background-image\u003C\u002Fcode> rule you can drop into a selector.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Because the format is applied only when you copy or download, changing it doesn’t read the file again. You can add a batch of images, pick “CSS”, copy each one, then switch to “HTML” for the next job.\u003C\u002Fp>\n\u003Ch2 id=\"when-inlining-helps\">When inlining helps\u003C\u002Fh2>\n\u003Cp>A data URI saves the browser a separate request for the image. That’s the whole benefit, and it matters most when the image is tiny and needed right away:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>small icons and logos in CSS that every page uses;\u003C\u002Fli>\n\u003Cli>images inside a file that has to stand alone, such as an HTML report someone opens from their downloads;\u003C\u002Fli>\n\u003Cli>test fixtures and JSON files where a real file path would be awkward;\u003C\u002Fli>\n\u003Cli>placeholders in a prototype, before there’s anywhere to host the real image.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"when-it-hurts\">When it hurts\u003C\u002Fh2>\n\u003Cp>The cost grows with the image, and it shows up in three ways:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Size.\u003C\u002Fstrong> The 33% growth is paid every time. Gzip or Brotli compression on the server wins back some of it, but not all of it.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Caching.\u003C\u002Fstrong> A normal image file is cached once and reused by every page that shows it. An inlined image is downloaded again with every HTML page that contains it. Inside a CSS file it’s cached with the CSS, which is why small icons in a stylesheet are the classic good case.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Blocking.\u003C\u002Fstrong> A large data URI in your HTML or CSS has to arrive before the rest of that file can be read. A normal \u003Ccode><img>\u003C\u002Fcode> loads alongside the page instead.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>That’s where the tool’s warning comes from. Any image over 50 KB gets a note saying that Base64 works best under about 10 KB, and that bigger images load faster as normal files. The tool still converts it, because you may have a good reason. It just doesn’t let you do it without knowing.\u003C\u002Fp>\n\u003Ch2 id=\"limits-i-set-in-the-tool\">Limits I set in the tool\u003C\u002Fh2>\n\u003Cp>A few constants decide how the tool behaves with big files:\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> MAX_BYTES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1024\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1024\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#57606a;--shiki-dark:#8b949e\">     \u002F\u002F Base64 text this big already freezes editors\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> PREVIEW_CHARS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 20_000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#57606a;--shiki-dark:#8b949e\">           \u002F\u002F longer strings are shortened on screen, copied in full\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> LARGE_WARNING\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#cb2431;--shiki-dark:#F97583\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1024\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Cstrong>10 MB per file.\u003C\u002Fstrong> A 10 MB image becomes about 13.3 MB of text. Code editors and browser text boxes already struggle at that length, and there’s no sensible place to paste it.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>20,000 characters on screen.\u003C\u002Fstrong> A text box holding a few million characters makes the whole page slow to scroll and select. Longer results are cut on screen with a note, but \u003Cstrong>Copy\u003C\u002Fstrong> and \u003Cstrong>Download .txt\u003C\u002Fstrong> always use the full text.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>50 KB warning\u003C\u002Fstrong>, explained above.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Two smaller details came from testing. If the browser blocks clipboard access, the tool says so and suggests selecting the text by hand or downloading it, instead of failing silently. And iPhone HEIC photos are sent to the \u003Ca href=\"\u002Fheic-to-jpg\">HEIC to JPG\u003C\u002Fa> converter first. Most browsers can’t display HEIC, so a \u003Ccode>data:image\u002Fheic\u003C\u002Fcode> URI would show nothing on most of the screens that load it.\u003C\u002Fp>\n\u003Ch2 id=\"what-base64-doesn-t-change\">What Base64 doesn’t change\u003C\u002Fh2>\n\u003Cp>Base64 is an encoding, not a conversion. The bytes inside the data URI are exactly the bytes of your file, with no re-compression and no change in quality. That has two practical sides:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Make the file small first.\u003C\u002Fstrong> Every byte you save removes about 1.33 characters of text. For a PNG, run it through \u003Ca href=\"\u002Fcompress-image\">Compress Image\u003C\u002Fa> before you encode it; for an SVG, remove editor metadata and unused definitions.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Hidden data comes along.\u003C\u002Fstrong> A photo straight from a phone often carries its GPS location and camera details in its EXIF data. Base64 copies those too, into your HTML, where anyone can decode them. For photos, use \u003Ca href=\"\u002Fremove-exif-data\">Remove EXIF data\u003C\u002Fa> first. The tool reads files locally and doesn’t upload them, so what ends up in the text is only what you paste somewhere yourself.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>One honest limit: for SVG, a URL-encoded data URI (the SVG text itself, with a few characters escaped) is often shorter than Base64, because SVG is already text. This tool always produces Base64, which works everywhere but isn’t always the shortest option for SVG.\u003C\u002Fp>\n\u003Ch2 id=\"try-it\">Try it\u003C\u002Fh2>\n\u003Cp>The \u003Ca href=\"\u002Fimage-to-base64\">Image to Base64 converter\u003C\u002Fa> takes SVG, PNG, JPG, WebP and GIF files, one or many at a time, and gives you a data URI, raw Base64, an \u003Ccode><img>\u003C\u002Fcode> tag or a CSS rule for each. More tools for preparing images are on the \u003Ca href=\"\u002Fimage-tools\">image tools\u003C\u002Fa> page.\u003C\u002Fp>\n",[18,22,25,28,31,34,37,40],{"id":19,"text":20,"level":21},"what-a-data-uri-is","What a data URI is",2,{"id":23,"text":24,"level":21},"why-the-text-is-a-third-bigger","Why the text is a third bigger",{"id":26,"text":27,"level":21},"four-ways-to-paste-the-same-image","Four ways to paste the same image",{"id":29,"text":30,"level":21},"when-inlining-helps","When inlining helps",{"id":32,"text":33,"level":21},"when-it-hurts","When it hurts",{"id":35,"text":36,"level":21},"limits-i-set-in-the-tool","Limits I set in the tool",{"id":38,"text":39,"level":21},"what-base64-doesn-t-change","What Base64 doesn’t change",{"id":41,"text":42,"level":21},"try-it","Try it",6,1792325805443]