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:


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) {

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.

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. Scott Scott says:

    I ended up having to create the chrome folder and the file, but it worked great. Thanks!

  2. dk king dk king says:

    only one folder in the profile folder. that led to the chorme folder. I made the change in Chrome. What is chrome, an appearance option? I am running Windows 7 pro. tried disabling AdBlock. do i need to move the usercontent.css file somewhere? tried different appearances…i’m lost

  3. Gavin Gavin says:

    I’ve not tested on the stable version of Fx for a while, but just tested on Aurora (v15.0a) and Fx beta (v14.0) and it worked fine so it should be ok on stable too.

    do you have more than one profile folder? possibly not updated the active profile.

  4. dk king dk king says:

    does this still work for 13.0.1 I’m not having any luck

  5. Nick Breen Nick Breen says:

    Hey Gavin. Thank you very much. The tip about -moz-force-broken-image-icon:1; turned an odd problem into a very simple solution.

    Thanks for the post.

    All my best.

  6. Flash Flash says:

    Imagine that, I google this problem and find your answer rofl.
    Worked a treat. Cheers me ol’mucka.

  7. goran goran says:

    how is this going to work for an average web user? do we expect them to learn CSS? why do not FF people make that default as they should?

    • Gavin Gavin says:

      I suppose the best way would be package it into add-on for non-techie users to install. Although the steps arent very difficult (feel free to share this post ;))
      Mozilla do a lot of usability testing so all I can imagine is more people prefer broken images displaying their alt tag rather than a placeholder.

      The only way it will ever become default is if enough people vote on it.

  8. Audrey Audrey says:

    Fantastic!!! I’ve been wanting this for years and for a while there was an add-on that worked but it became incompatible at one point and was never updated. This WORKS in Fx 5.01!! I can’t believe they don’t have this built it, but still this works. Hooray!!!

  9. Tom Tom says:

    Excellent tip thanks, this works great. Also I made the same mistake putting it in userChrome.css so thanks for leaving that comment up haha

  10. Gavin Gavin says:

    lol… no need to delete them, its a mistake someone else may make too so good to keep in place. We’ll just say you took one for the team 😛