{"id":776,"date":"2026-11-13T15:00:10","date_gmt":"2026-11-13T15:00:10","guid":{"rendered":"https:\/\/html-editor-online.com\/blog?p=776"},"modified":"2026-11-13T15:00:10","modified_gmt":"2026-11-13T15:00:10","slug":"html-minifier-not-reducing-base64-image-size","status":"publish","type":"post","link":"https:\/\/html-editor-online.com\/blog\/html-minifier-not-reducing-base64-image-size\/","title":{"rendered":"HTML Minifier Not Reducing Base64 Image Size: Check the Image src"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">An <a href=\"https:\/\/html-editor-online.com\/tools\/html_minifier\" title=\"HTML Minifier\">html minifier<\/a> not reducing base64 image size is almost always working as designed. A minifier removes markup overhead, such as extra whitespace and line breaks between tags. It does not resize, recompress or remove a photo that is encoded inside an <code>src<\/code> attribute as a <code>data:image\/jpeg;base64,...<\/code> value, so that one long string can still make up most of the saved file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The input here is an HTML export that contains a data URL image. The output you want is a file whose size reflects an optimized image, not just tidier tags. I use the HTML Minifier to compare the markup before and after, then inspect the image <code>src<\/code> in an editor, and fix the image itself instead of the markup. Keep a copy of the original export before you start.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#html-minifier-not-reducing-base64-image-size-what-is-happening-1\">HTML Minifier Not Reducing Base64 Image Size: What Is Happening<\/a><\/li><li class=\"\"><a href=\"#html-minifier-not-reducing-base64-image-size-run-this-diagnosis-2\">HTML Minifier Not Reducing Base64 Image Size? Run This Diagnosis<\/a><\/li><li class=\"\"><a href=\"#how-much-does-base64-add-a-worked-calculation-3\">How Much Does Base64 Add? A Worked Calculation<\/a><\/li><li class=\"\"><a href=\"#fix-the-image-instead-of-the-markup-4\">Fix the Image Instead of the Markup<\/a><\/li><li class=\"\"><a href=\"#other-places-large-embedded-images-hide-5\">Other Places Large Embedded Images Hide<\/a><\/li><li class=\"\"><a href=\"#checklist-to-confirm-the-file-is-actually-smaller-6\">Checklist to Confirm the File Is Actually Smaller<\/a><\/li><li class=\"\"><a href=\"#frequently-asked-questions\">Frequently asked questions<\/a><\/li><li class=\"\"><a href=\"#next-steps\">Next steps<\/a><\/li><li class=\"\"><a href=\"#sources\">Sources and further reading<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-1-735-1-fa0f1b15aecfa704-1024x576.jpg\" alt=\"A photo wrapped in a long ribbon of encoded characters while scissors trim only blank paper\" class=\"wp-image-779\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-1-735-1-fa0f1b15aecfa704-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-1-735-1-fa0f1b15aecfa704-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-1-735-1-fa0f1b15aecfa704-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-1-735-1-fa0f1b15aecfa704.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"html-minifier-not-reducing-base64-image-size-what-is-happening-1\">HTML Minifier Not Reducing Base64 Image Size: What Is Happening<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A data URL puts a file&#8217;s bytes directly into a URL. <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc2397\" title=\"RFC 2397 - The &quot;data&quot; URL scheme\" target=\"_blank\" rel=\"noopener\">RFC 2397<\/a>, published in August 1998, defines the form: the <code>data:<\/code> scheme, a media type, an optional <code>;base64<\/code> marker, a comma and then the data. The <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/embedded-content.html\" title=\"HTML Standard\" target=\"_blank\" rel=\"noopener\">HTML Standard<\/a> treats the <code>src<\/code> of an <code>&lt;img&gt;<\/code> element as a URL for an image resource, so a data URL is a valid value there.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Base64 exists so binary bytes can travel as text. <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc4648\" title=\"RFC 4648 - The Base16, Base32, and Base64 Data Encodings\" target=\"_blank\" rel=\"noopener\">RFC 4648<\/a>, published in October 2006, describes how every three input bytes become four output characters. That is the source of the overhead: roughly one third more text than the original image bytes, plus a short prefix and any padding. MDN&#8217;s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/URI\/Reference\/Schemes\/data\" title=\"data: URLs - URIs | MDN\" target=\"_blank\" rel=\"noopener\">data URL reference<\/a> explains the same format, and I checked it on November 7, 2026.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A minifier works on the text structure of the document. An attribute value is just a string that it must keep intact, because changing a single character would corrupt the image. Here is a deliberately truncated example. It is not a real image, and a real one would run for thousands of characters:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=&quot;data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQ...&quot; alt=&quot;Office entrance with glass doors&quot; width=&quot;800&quot; height=&quot;450&quot;&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Minification can shrink the whitespace around that tag. It cannot touch the long value after the comma without breaking the picture. That is why a file can stay huge after you minify it.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-2-735-2-10e9105c420a74c0-1024x576.jpg\" alt=\"Magnifying glass over a tall stack of paper representing a large embedded image string\" class=\"wp-image-781\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-2-735-2-10e9105c420a74c0-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-2-735-2-10e9105c420a74c0-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-2-735-2-10e9105c420a74c0-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-2-735-2-10e9105c420a74c0.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"html-minifier-not-reducing-base64-image-size-run-this-diagnosis-2\">HTML Minifier Not Reducing Base64 Image Size? Run This Diagnosis<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can confirm the cause in a few minutes. The goal is to compare numbers, not to guess from how the file feels.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Save a copy of the original export under a new name and leave the original untouched.<\/li>\n\n\n\n<li>Note its size in bytes. Your file manager&#8217;s properties dialog works, and so does <code>wc -c<\/code> in a terminal.<\/li>\n\n\n\n<li>Open the HTML Minifier, paste the HTML, click minify, then copy or download the result.<\/li>\n\n\n\n<li>Compare the byte size of the minified output with the original. A small drop with a file that is still large means the markup was never the main cost.<\/li>\n\n\n\n<li>Paste the original into the <a href=\"https:\/\/html-editor-online.com\/editors\/html\" title=\"HTML Code Editor\">HTML Code Editor<\/a> and look at the <code>&lt;img&gt;<\/code> tags. Syntax highlighting makes a very long attribute value easy to spot. You are looking for <code>data:image<\/code> and <code>;base64,<\/code> inside an <code>src<\/code> value.<\/li>\n\n\n\n<li>Use the sandboxed live preview to see which image that string produces.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">If you prefer the terminal, these two commands only read your files:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">wc -c export.html minified.html\ngrep -o &#039;data:image\/&#091;a-z+.-&#093;*;base64&#039; export.html<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The first command prints the byte count of each file. The second prints only the matching prefix of each embedded image, so you see how many data URLs exist without flooding the screen with payload text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Be clear about what these steps prove. Neither tool measures the decoded size of the image, and neither compresses images. The comparison shows only that the text outside the data URL was a small part of the file. Also remember that the HTML Code Editor documents its Minify button as able to change significant whitespace or inline scripts, so keep the original and check the rendered result after any minify step.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-3-735-3-4199d4645e80ed95-1024x576.jpg\" alt=\"Three blocks repacked into four to show Base64 encoding overhead\" class=\"wp-image-783\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-3-735-3-4199d4645e80ed95-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-3-735-3-4199d4645e80ed95-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-3-735-3-4199d4645e80ed95-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/11\/html-minifier-not-reducing-base64-image-size-image-3-735-3-4199d4645e80ed95.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-much-does-base64-add-a-worked-calculation-3\">How Much Does Base64 Add? A Worked Calculation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For an input of <em>n<\/em> bytes, the Base64 text length is 4 multiplied by the result of rounding <em>n<\/em> divided by 3 up to a whole number. The padding character <code>=<\/code> fills out the last group when <em>n<\/em> is not divisible by three. The table below is a calculation from that rule, not a measurement of a real export.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Original bytes<\/th><th>Base64 characters<\/th><th>Note<\/th><\/tr><\/thead><tbody><tr><td>300,000<\/td><td>400,000<\/td><td>Divisible by three, so no padding<\/td><\/tr><tr><td>100<\/td><td>136<\/td><td>One byte over a multiple of three, so two padding characters<\/td><\/tr><tr><td>99<\/td><td>132<\/td><td>Divisible by three, so no padding<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The prefix <code>data:image\/jpeg;base64,<\/code> adds 23 more characters. A 300,000-byte JPEG would therefore appear as about 400,023 characters in the HTML source. Minifying the markup around it saves perhaps a few dozen bytes, which is a rounding error next to that string.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep two sizes apart. The saved HTML file contains the full Base64 text, so the overhead is real there. Network transfer size is a different matter. According to MDN&#8217;s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Guides\/Compression\" title=\"Compression in HTTP - HTTP | MDN\" target=\"_blank\" rel=\"noopener\">guide to HTTP compression<\/a>, which I checked on November 7, 2026, a server can compress a response using <code>Content-Encoding<\/code> without changing the file you saved. So do not promise yourself an exact one-third saving in transfer size when you remove the data URL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fix-the-image-instead-of-the-markup-4\">Fix the Image Instead of the Markup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once the data URL is confirmed as the cause, work on the image. The options below are in the order I would try them.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Resize an oversized source.<\/strong> If the original is far larger than the size at which the page displays it, export a smaller version. Changing the <code>width<\/code> and <code>height<\/code> attributes only changes the displayed size. The embedded bytes stay the same.<\/li>\n\n\n\n<li><strong>Match compression and format to the content.<\/strong> MDN&#8217;s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Guides\/Formats\/Image_types\" title=\"Image file type and format guide - Media | MDN\" target=\"_blank\" rel=\"noopener\">image file type guide<\/a> separates formats that suit photographs, which tolerate lossy compression, from formats better suited to sharp-edged graphics such as logos and line art.<\/li>\n\n\n\n<li><strong>Regenerate the data URL from the optimized image.<\/strong> Use whatever tool you normally use to produce data URLs, then replace the old value in the <code>src<\/code> attribute.<\/li>\n\n\n\n<li><strong>Use a separate file when your destination allows it.<\/strong> Save the optimized image as a file and point <code>src<\/code> at its path. This makes the HTML file smaller, but the image bytes still count toward the page&#8217;s total resources.<\/li>\n\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A separate file looks like this, using a fictitious path:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=&quot;images\/office-entrance.jpg&quot; alt=&quot;Office entrance with glass doors&quot; width=&quot;800&quot; height=&quot;450&quot;&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Whichever route you pick, keep meaningful <code>alt<\/code> text and confirm the image still loads. A data URL is still a reasonable choice when you need one self-contained file. In that case, optimizing the image is the only lever, because the text will always be about a third larger than the bytes it encodes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"other-places-large-embedded-images-hide-5\">Other Places Large Embedded Images Hide<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If the <code>src<\/code> attributes do not explain the size, look elsewhere in the file. A <code>srcset<\/code> attribute can list several image URLs, and any of them can be a data URL. A <code>&lt;style&gt;<\/code> block or an inline <code>style<\/code> attribute can hold <code>url(data:...)<\/code> values for backgrounds. Scan for <code>;base64,<\/code> across the whole document, not only inside image tags.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same reasoning applies to the <a href=\"https:\/\/html-editor-online.com\/tools\/css_minifier\" title=\"CSS Minifier\">CSS Minifier<\/a>: it works on stylesheet text, so I would not expect it to recompress an image inside a <code>url()<\/code>. Minifiers can also change meaning as well as size, as the guide on <a href=\"https:\/\/html-editor-online.com\/blog\/css-minifier-removes-space-before-focus\/\" title=\"Why a CSS Minifier Removes Space Before :focus and Breaks .menu\">how a CSS minifier removes space before :focus<\/a> shows, so compare the result with the source.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Large inline scripts are another common weight. For those, the dedicated <a href=\"https:\/\/html-editor-online.com\/tools\/javascript_minifier\" title=\"JavaScript Minifier\">JavaScript Minifier<\/a> uses Terser, which is a real JavaScript minifier and a different transformation from the simple Minify shortcut in the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your file came from a visual editor and looks incomplete, the cause may be unrelated to size. The guide on a <a href=\"https:\/\/html-editor-online.com\/blog\/wysiwyg-html-download-missing-doctype-head-body\/\" title=\"WYSIWYG HTML Download Missing Doctype, Head and Body: Why It Happens\">WYSIWYG HTML download missing doctype, head and body<\/a> explains why an export can be a fragment instead of a full page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"checklist-to-confirm-the-file-is-actually-smaller-6\">Checklist to Confirm the File Is Actually Smaller<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use this short list each time an export feels too big. It keeps formatting, image size and verification separate.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Record the file size in bytes before and after minification.<\/li>\n\n\n\n<li>Identify long data URLs by searching for <code>data:image<\/code> and <code>;base64,<\/code> in <code>src<\/code>, <code>srcset<\/code> and CSS.<\/li>\n\n\n\n<li>Optimize the image itself: resize it, then pick suitable compression and format.<\/li>\n\n\n\n<li>Replace or regenerate the <code>src<\/code> value, or switch to a separate file if your destination supports assets.<\/li>\n\n\n\n<li>Recheck the export: run the byte comparison again, open the preview and confirm the image still renders with its <code>alt<\/code> text.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">I would never treat minification as guaranteed to preserve behavior. Whitespace between inline elements and inside inline scripts can matter, so always keep the original source, compare the rendered result and only then publish the smaller version.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-1\">Does minifying HTML ever shrink a base64 image?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. A minifier can remove whitespace and other markup overhead around the tag, but the Base64 value inside src must stay identical or the image breaks. Only changing the image itself, then regenerating the data URL, reduces that part of the file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-2\">Is Base64 always exactly one third larger?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Roughly. Every three bytes become four characters, so the text is about 4\/3 of the original, plus a short prefix and possible padding. That describes the saved HTML text. Transfer size over a network can differ if the server compresses the response.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-3\">Can I fix the size by changing width and height attributes?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. Those attributes affect how large the image is displayed, not how many bytes are embedded in the src value. To reduce the embedded bytes, resize or recompress the source image and regenerate the data URL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-4\">Will a separate image file make my page lighter?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It makes the HTML file smaller, because the long string disappears from the markup. The browser still has to load the image, so the page&#8217;s total resources still include its bytes. Optimize the image either way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-5\">Which image format should I use for a smaller result?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It depends on the content. MDN&#8217;s image type guide describes lossy compression as suitable for photographs and other formats as better for sharp-edged graphics such as logos. Test the visual result at the size where it will be displayed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-6\">What if I must keep everything in one HTML file?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Then optimize the image before encoding it: resize it to the displayed dimensions, choose suitable compression, and regenerate the data URL. Accept that the text will remain about a third larger than the image bytes it represents.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-7\">How do I check that the minified page still looks right?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Keep the original, open both versions in the HTML Code Editor&#8217;s sandboxed live preview or in your browser, and compare them. Check spacing between inline elements, the image with its alt text, and any inline scripts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An html minifier not reducing base64 image size is a clue, not a bug: the bytes live in the image, not in the markup. Your next step is simple. Take the oversized export, record its byte size, find each <code>data:image<\/code> value, optimize or replace that image, then run the minifier again and compare the numbers. Keep the original file until the rendered page matches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Related tools and resources on HTML Editor Online:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html-editor-online.com\/tools\/html_minifier\">HTML Minifier<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/html\">HTML Code Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/css-minifier-removes-space-before-focus\/\">Why a CSS Minifier Removes Space Before :focus and Breaks .menu<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/wysiwyg-html-download-missing-doctype-head-body\/\">WYSIWYG HTML Download Missing Doctype, Head and Body: Why It Happens<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sources\">Sources and further reading<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/embedded-content.html\" target=\"_blank\" rel=\"noopener\">HTML Standard<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/URI\/Reference\/Schemes\/data\" target=\"_blank\" rel=\"noopener\">data: URLs &#8211; URIs | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/html\">HTML Code Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Guides\/Compression\" target=\"_blank\" rel=\"noopener\">Compression in HTTP &#8211; HTTP | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Guides\/Formats\/Image_types\" target=\"_blank\" rel=\"noopener\">Image file type and format guide &#8211; Media | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/tools\/html_minifier\">HTML Minifier<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc2397\" target=\"_blank\" rel=\"noopener\">RFC 2397 &#8211; The &#8220;data&#8221; URL scheme<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc4648\" target=\"_blank\" rel=\"noopener\">RFC 4648 &#8211; The Base16, Base32, and Base64 Data Encodings<\/a><\/li>\n\n\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>An HTML minifier not reducing base64 image size is normal: it trims markup, not the encoded photo. Here is how to find the data URL and shrink it.<\/p>\n","protected":false},"author":1,"featured_media":777,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[231,235,236,234,238,237],"class_list":["post-776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-tips","tag-base64-images","tag-data-urls","tag-html-file-size","tag-html-minifier","tag-html-troubleshooting","tag-image-optimization"],"_links":{"self":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/comments?post=776"}],"version-history":[{"count":4,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/776\/revisions"}],"predecessor-version":[{"id":784,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/776\/revisions\/784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media\/777"}],"wp:attachment":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media?parent=776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/categories?post=776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/tags?post=776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}