Enable broken image placeholders in Firefox

Something that has always bugged me about Firefox is that if it encounters a broken image it doesn’t display an image place-holder. Instead it displays the alt attribute as in-line text. This can cause problems if your primary development browser is Firefox, as you may not notice broken images on a page.

For a while there has been an option in the config to display image place-holders while a page loads but not for broken images as on IE (yes I’m praising an IE feature!).

Image placeholders on load is set to ON by default, your can change this if you want by going to about:config and searching for ‘image’. The option your looking for is:

browser.display.show_image_placeholders

Just double click to change the value.

As I said before, this doesn’t affect broken images after the page has loaded, and after several searches it looks like the option just isn’t available to Fx users as a general setting. There is however a solution…

Firefox allows users to specify custom CSS to be applied to websites on a global basis, e.g if you want your default link colour on unvisited links to be black instead of the default blue.

You do this by making changes to your global content css file. You can find it at the following location (OS Specific – I’m on windows 7) ‘%appdata%\Mozilla\Firefox\Profiles\\chrome’ (if your on a domain you will need to edit it in your roaming folder), look for a file called ‘UserContent-example.css’ and rename it to ‘UserContent.css’, this will then be loaded by Firefox when it fires up.

Add the following CSS to the file and restart Firefox..
/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
img:-moz-broken{
-moz-force-broken-image-icon:1;
width:24px;
height:24px;
}
}

Thats it… when you next come accross a broken/missing image, you will get a box the size you have defined in its place with the alt inside it.

Update:
I was asked if I could add a broken image in this post as an example to see the css tweak in action, so here it is -> <-

Tags: , , , , , ,

Enough of me, let me know your thoughts below...

  1. Gavin Gavin says:

    I don’t use GreaseMonkey scripts myself and would advise doing this manually but reckon someone will find it useful, thanks for linking back to my post 🙂

  2. ewolfman ewolfman says:

    GreaseMonkey script based on this blog post: http://userscripts.org/scripts/show/169432

  3. inthenick inthenick says:

    Does this still work in Firefox 17?

  4. Kat Kat says:

    Brilliant, thanks so much.

  5. JR JR says:

    Thanks for this “fix”! (Why Firefox has such a good reputation, with all these “persistent bugs”, is beyond me.)

    FYI: On Firefox 12.x, I couldn’t find a “chrome” folder and it’s “userContent-example.css” file under it’s profile. So, I created the “chrome” folder and the file “userContent.css” inside it, for your code. And it works perfect, as expected!

  6. MrCold MrCold says:

    No, it just shows a broken image icon. If I remove the CSS code then it just shows the alt-text with no indication it was supposed to an image (the default behaviour).
    I’m on FF 14.0.1 currently, on Linux.

  7. MrCold MrCold says:

    Thanks, I’d been looking for that.

    However, is it possible to have the best of both worlds and have the broken icon appear as well as the ALT text? I’m pretty sure that’s what IE does, and this is a feature I’d like.

  8. dk king dk king says:

    Working great now! I screwed up copying the code above. Thanks!