Make Sure to Test Your Site With Adblockers Enabled

| Web Design
Be Careful With Adblockers and Your Site's Images

Today, we had two of those super-frustrating, but ultimately educational moments in web development. 

We loaded up a new image to our site. It seemed to work perfectly in some browsers, but it absolutely refused to show in others.

Here's how the image should have appeared, on our login screen.

adblock normal image display

And here's how the same screen appeared in several different browsers. The main image with 3 people just completely failed to load:

adblock broken site image

We went round and round for 30 minutes trying to debug the problem.

Finally, it dawned on us that the problem browsers had Adblock software installed. The name of the image was book-club-dashboard-ad-big.jpg, and Adblock was apparently blocking it because of the -ad- in the name.

We changed the image name to book-club-dashboard-image-big.jpeg and everything worked perfectly. I mentioned the problem on Twitter and Chad Windangle responded this way:

Walt Sorenson chipped in with this advice:

I've also seen claims that adblockers will filter out images that use standard banner sizes such as 460 x 60 and 728 x 90.

Apparently, there are blacklists of file names and URLs that are shared by many adblockers. There's a list of blocked URLs that you can find on Github, and also some general adblocking rules for images.

A little while later, we were testing a new banner for on the site, and it just wouldn't appear on mobile devices. All we saw was a blank area above the orange line.

IMG 3381

Thanks for the our experience earlier in the day, the problem was easy to fix. The div containing the banner had a class called "div". A mobile adblocker called NeverAds was hiding the banner. We changed the name of the class, and the banner showed again:

banner showing

Conclusion

There are so many different adblockers that it's difficult to provide blanket solutions. There are also significant differences between different adblockers, and between desktop and mobile versions.

I've seen adblockers wreak havoc with Javascript sites but as adblockers get more popular and more aggressive, even old-fashioned CSS and HTML sites need to adjust.

In your future development work, you would be wise to avoid normal advertizing conventions on image sizes and naming. And, make sure to include browsers with adblockers on your list of things to test.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.