What is the optimum way to handle broken images?

Question

Hi all,

So there seems to be quiet a few ways to handle broken images on a html page. I would like to know what ways are in popular use and what ways are viewed to be best practice?

To start I've looked at some myself like:

function imgErr(source) {     
    source.src = /images/missing.jpg";
    source.onerror = "";
    return true;
}
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" />

Pros: works everytime, the event will always be caught. User never sees broken image. Seems to work well across the browsers. Cons: onerror tag required on each image, function imgErr(source) needs to be in the head to catch the errors, slows down the users experienced load time

$('img').error(function(){
  $(this).attr('src', 'missing.jpg');
});

Pros: very little code, works on all images without changing their markup, can be place outside of the head Cons: can miss the error event depending on the speed of the pages onload event, slows down the users experienced load time

$(window).load(function() {
    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            var src = $(this).attr("src");
            var suffix = src.substring(src.length - 6, src.length).split('.')[0];
            suffix = suffix.charAt(suffix.length - 1);            
            $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg");
        }
    });
});

Pros: Can be placed anywhere on the page, will fix the images no matter when it gets to run, doesn't slow down the users experienced load time Cons: shows a broken image till it runs creating a poor user experience

In my situation load time is the greatest issue but I can't get the last option to work in IE properly as it changes broken and none broken images alike!

Cheers, Denis

Answer 1

One thought that does spring to mind is to create an image handler at your web server, i.e.

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" />

Ignore the aspx, obviously it'd be replaced with whatever your preferred server scripting technology was. That handler can then deal with image names that aren't present by delivering your missing.jpg for all unknown image names.

Other than that you are stuck with the options you give as far as I can see. Any javascript that runs before the page has loaded risks not iterating over img tags not yet received and any script that waits for page ready is going to risk the user seeing broken images.

Rock->You<-Hardplace

Answer 2

In my opinion, using the alt tag is enough and there's no need to add complexity to the page by checking for it every time using javascript.

Of course you need to check every once in a while that you don't have broken image. There are tools to do it.

Answer 3

Ideally the alt tag should just be used. If this is vital the javascript solution really isn't ideal because it won't work if JS is turned off. You could however do sort of server side solution. Something in php could be done like this but would require a database or some sort of way of setting variables.

<?php
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?>
}
<?php else {
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?>
} ?>
<?php } ?>