How to Stop AdBlock Blocking Images on Your WebsiteUse Cases
Intrusive and annoying ads on the website are often the reason why the pissed off users set up ad blockers. The most popular one is a browser extension AdBlock. However, AdBlock not only wards off the ads, but also blocks images on the HTML pages, which can become a severe stumper for website owners.
In this blog post, I will tell you how to find and check images, which can potentially get under the AdBlock filter.
1. Why AdBlock Blocks Images on the Website
Ad blockers impose filters on images in case:
- Image URL and file name contain such ad keywords as advert banner, banner, adwords, adv, ad, adsens, eader-ads, adtech footer_ads, sidebar-ads, etc.
- The file name mentions the standard ad banner dimensions, for instance: image_728_90.png, image_300x600.jpg.
- The image size matches the ad banner dimensions in pixels.
When you’re familiar with the fact that AdBlock can block images, check your website to see if the images don’t fall under the risk.
2. How to Find and Check Images that Can Get Blocked by AdBlock
The most obvious way to do it is to ask developers to export all images that contain ad keywords and / or match the ad banner dimensions. But this case will show you how to rely on your own resources without developers' help.
After hours of testing, chasing my tail, and searching for the best solution, I share a working algorithm for image checks.
So we’ll need these tools:
2.1. Detect Image Paths with Ad Keywords with Netpeak Spider
Open the program and complete the following steps:
- On the 'Parameter' tab in the sidebar, tick the 'Image' checkbox in the 'Content' group. All other parameters leave unticked → this will significantly speed up the crawling.
- Enter the website address and start crawling. If you need to check images in the specific website directory, enter its URL in the 'Initial URL' field and select 'Crawl only in directory' in the general settings.
- Wait until the crawling is over, after which open the image report in the 'Database' module.
- Configure the filter, which will help you sort out the word with ad keywords: set the condition 'Include' → 'URL' → 'Matching RegExp'. Then add a regular expression, where all ad keywords are divided by the '|' sign. Example:
advert banner|banner|adwords|adv|ad|adsens|eader-ads|adtech footer_ads|sidebar-ads
Also, you can add the numbers which match the ad banner dimensions in this regular expression:
- When the filter is applied, the table will show only those URLs, which contain ad keywords. In the 'From URL' column, you'll find the page address where these images dwell. Follow these pages, rename the images, and upload the new ones.
- To find ALT attributes with ad keywords, also apply a filter.
After you fixed all ALTs and image URLs, let's move on to the next stage.
2.2. Find Images with Standard Ad Banner Dimensions
The most popular ad banners formats and their dimensions are:
|728 x 90||Leaderboard|
|468 x 60||Full banner|
|392 х 72||Full banner with vertical navigation panel|
|336 x 280||Large Rectangle|
|300 x 250||Medium Rectangle|
|300 x 600||Half-Page Ad|
|250 x 250||Square|
|240 x 400||Vertical Rectangle|
|234 x 60||Half Banner|
|200 х 300||Skyscraper|
|180 x 150||Rectangle|
|160 x 600||Wide Skyscraper|
|125 x 125||Square Button|
|120 x 600||Skyscraper|
|120 x 240||Vertical banner|
|120 x 90, 120 x 60||Button|
|100 х 100||Square banner|
|88 x 31||Micro button|
To check whether images are similar to these sizes, we need to download all images from the website. Extreme Picture Finder will be our go-to tool for this task:
- Open the 'Project' tab → 'Project properties' → 'Target files' and enter file formats.
- On the ‘New project’ tab, enter the website starting address from which you’re going to download images.
- Start and wait until the program completes downloading.
It's possible to check the image sizes in pixels though the context menu → go to the 'Properties' → 'Details'. This way is convenient if you don't have too many images. If you have thousands of images, the manual work will take you ages. That's why for a massive check, I recommend using file manager Total Commander. Here're a few simple steps:
- Download and unpack plugin ImgSize. It's the one which helps you get detailed information about images.
- In Total Commander, go to the tab 'Configuration' → 'Options' → 'Plugins'. Hit the 'Add' button, choose the unpacked plugin, and save the settings.
- In the settings, follow the ‘Custom columns’ section and click on the ‘New’ button.
- In the ‘Custom Columns’ window and hit the ‘Add column’ and a plus.
- In the 'Choose plugin property' window, choose the 'imgsize' plugin and the 'Width' field. Press 'OK'.
- Repeat the same steps from the third point, but this time choose the ‘Height’ field. Save settings in this tab.
- In the 'Column Columns' window, click on 'Apply'.
- In the main window of Total Commander, open the folder with downloaded images. That's when you'll see the list of all images and their sizes. Click on the 'Width' column to sort this parameter according to ascending / descending order. Now you can search for images with the necessary size much quicker.
So you found an image that matches the ad banner dimensions. What’s next? It’s as simple as that:
- Look at the file name.
- Open the ‘Image’ report in Netpeak Spider.
- In this report, set the filter with condition: ‘Include’ → ‘URL’ → ‘Contains’ and put the file name into the empty field.
- And so you can sift out that very page where the necessary image sits.
The only thing left is to resize the image and upload it on the website.
To Wrap It Up
AdBlock extension helps users hide annoying ads, but sometimes it can be a reason for image blocks on the website pages. Not to get under the filter, you should find and change the images which paths contain ad keywords and change the image size if it matches the standard ad banner dimensions. To call it a day, you'll need three programs: Netpeak Spider, Extreme Picture Finder, and Total Commander.