HOW TO Hide Data URI Base64 Images in Firefox Without Extensions - Using userContent.css
If an image on a site is flashy, animated, and distracting, and you inspect it only to see this as its HTML source:
src="data:image/webp;base64,UklGRiQAAABXRU..."
What really is a Base64 Image?
Normally, an image is a file. Your browser downloads logo.png from a server. A base64 image is different. The image data is converted to a long text string and pasted directly into the HTML.
Instead of this:
<img src="/images/logo.png">
You get this:
<img src="data:image/webp;base64,UklGRiQAAABXRUJQ...">
Sites do this to load a small icon a bit faster, or to hide tracking pixels, or to inline ads without a separate file request. The downside is you can’t block it like a normal file. It’s not a URL you can block in your hosts file. It’s baked into the page itself.
Browsers don’t have a built-in “block base64 images” button. But they do let you apply your own CSS to any site. That’s how we hide them.
The Native Way: userContent.css
Firefox has a feature called userContent.css. It’s a stylesheet you control that runs on every website you visit. It was made for exactly this kind of customization.
Step 1: Find your profile folder
Type about:support in Firefox’s address bar. Next to Profile Folder, click Open Folder.
Step 2: Create the file
Inside that folder, create a folder called chrome if it isn’t there already. Inside chrome, create a file called userContent.css.
Step 3: Add your rule
Here is the CSS rule to block base64 WebP images on a specific domain:
@-moz-document domain(example.com) {
img[src^="data:image/webp;base64"] {
display: none !important;
}
}
What this does is simple. @-moz-document domain(example.com) says only run this on example.com. img[src^="data:image/webp;base64"] says find any image whose source starts with that string. display: none !important says hide it and override the site’s own CSS. Change example.com to any site you want.
If you want to block base64 everywhere, remove the @-moz-document wrapper entirely, but keeping the domain scope is safer.
Step 4: Enable it
Type about:config in the address bar, search for toolkit.legacyUserProfileCustomizations.stylesheets, and set it to true.
Restart Firefox. The image will be gone.
Does This Really Block the File?
Not exactly. This method hides the image after the browser has already read it. For a base64 image, that doesn’t matter much because there was no separate download anyway. The data was already in the HTML.
If your goal is to stop a normal image file like ad.jpg from downloading to save data, CSS hiding won’t help.
For base64 images, though, hiding is blocking. There is no file to block. The image is the text string itself, and CSS removes it from view.
Why sites use Data URI base64 images
Normally a page loads an image with a separate request: <img src="/logo.png">. A data URI skips that request by converting the binary image into a long text string and pasting it into the HTML or CSS.
Sites do it for three reasons:
1. Speed for tiny assets. For a 2KB icon, one less HTTP request can be faster than downloading a separate file.
2. No broken links. Email templates, single-file widgets, and tracking pixels use data URIs so the image always loads even if the external server is down.
3. Obfuscation. Ad networks and flashy promo badges often inline images as base64 so simple ad blockers that block ad.jpg can't find them. You can't block a URL that doesn't exist.
The tradeoff is the HTML becomes huge, it can't be cached separately, and you as a user can't easily block it.
The Firefox feature that lets you block it
Firefox lets you inject your own stylesheet into any website you visit. The file is called userContent.css. You create it inside your profile's chrome folder.
This is not a new hack. Guides for placing userContent.css in ~/Library/Application Support/Firefox/Profiles/.../chrome go back to at least 2004. The @-moz-document rule you use to target a specific domain has been available since Firefox 1.5.
For a long time Firefox loaded these files automatically. Starting with Firefox 69, Mozilla disabled loading of userChrome.css and userContent.css by default to improve startup time. New installs now require you to flip one preference:
about:config > toolkit.legacyUserProfileCustomizations.stylesheets = true
After that and a restart, your file works on every page, including dynamically inserted content. It also bypasses the site's Content Security Policy, which extensions sometimes can't.
This is different from @-moz-document being disabled for web pages in Firefox 61. In user stylesheets like userContent.css, @-moz-document still works.
When to Use This Firefox feature
Use userContent.css when you want a lightweight, permanent, no-addon solution that survives Firefox updates and works on sites where you can’t install extensions. It’s perfect for removing an annoying banner, logo, or tracking pixel that uses a data URI.
If you need true network-level blocking or want to toggle rules quickly, an extension is still easier. But for a native, set-and-forget fix, this one CSS rule is all you need. No addon, no subscription, just one file Firefox has supported for over 20 years.
Why you would want to block them beyond "flashy"
Flashy and distracting is a valid reason, but there are others:
1. Performance. A page with ten 500KB base64 images embeds 5MB of text directly in the HTML. Your browser has to parse it all before it can render. Hiding it doesn't save the download, but it saves the paint and animation cost, especially for Lottie or looping WebP badges.
2. Privacy. Many 1x1 tracking pixels are delivered as data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7. They exist only to trigger JavaScript. Hiding them breaks some trackers.
3. Accessibility and focus. Auto-playing, high-contrast badges in sidebars are a problem for ADHD, motion sensitivity, and screen reader clutter. Removing the data URI badge makes the article readable.
userContent.css is a nifty Firefox feature that let's you not just hide but also manipulate the HTML that has already downloaded into the browser including changing the visual order.
Co-written with Meta AI
Comments
Post a Comment