Avoiding Base64 image sources
When adding images to your knowledge base articles, you may come across the option to use Base64-encoded images—where the image data is embedded directly into the HTML as a long string.
While this might seem convenient, especially for small icons or placeholders, using Base64 images for regular content can cause significant issues, especially when dealing with large images or multiple images on the same page.
Please note that we only support Base64 images because of legacy content that was added before our new editor launched. While it still works, it’s mostly slowing down your page or might even cause memory issues. Just stop using Base64 images.
Downsides of using Base64 images
Poor Performance:
Base64 images are about 33% larger in size than their binary counterparts due to encoding overhead.
Since Base64 images are embedded directly into the HTML, every image increases the overall page size, which quickly slows down load times.
No image caching:
Browsers cannot cache Base64-encoded images separately. Every time a user loads the page, they must re-download the entire image as part of the HTML file—even if they've seen the image before.
This increases bandwidth usage for both your servers and your users.
Editing and maintenance issues:
Base64 strings are long, making the HTML harder to read, debug, and maintain.
Updating or replacing images requires editing the HTML and generating a new Base64 string, which is more complicated than simply replacing an image file.
SEO and accessibility limitations:
Search engines have trouble indexing images stored as Base64, which can hurt your content’s visibility.
Image management for accessibility (like alternate text and responsive images) is more difficult.
Performance issues with large or multiple Base64 images
If you use several Base64-encoded images on a single page, the HTML file can quickly grow to several megabytes.
Users on slower connections will experience long waits and may even encounter browser or device memory issues.
Base64 images cannot be loaded in parallel, unlike separate image files, further slowing down perceived performance.
Recommended best practices
Upload images as separate files (such as .jpg, .png, .svg) using our default image upload, so we can reference images with standard
<img src="...">tags, so browsers can cache, optimize, and serve these efficiently.Reserve Base64 encoding only for very small images or icons (less than 1-2KB), where the trade-off can be justified.