How to block every image on a website?

Solution 1:

tl;dr

Just add one (or both) of these rules to your adblocker's filters:

• example.com##img to block every <img> element
• example.com$image to block every image served from example.com

Check the notes section for more.

Tutorial

1. Install an adblocker (like uBlock Origin) and click on its icon.
2. Click on the "My filters" bar and paste example.com##img and/or example.com$image.
3. Click "Apply changes".

If you would like to temporarily disable the block, just click the large on/off button on the plugins panel as shown in the first image.

Notes

• example.com##img blocks every <img> DOM nodes on the given website. It doesn't matter where the image is served from, if it is inside an <img> tag, it will be blocked, but it won't block images that are displayed with different techniques like using background-image on a <div>.
• example.com$image will block every image served from example.com no matter which site tries to load them. Many sites use a CDN to serve their pics like examplecdn.com so blocking images coming from example.com will have little to no effect, so you have to block examplecdn.com too, just be aware that images on other sites that use examplecdn.com will be blocked as well.
• Sometimes blocking doesn't happen because the images were cached. In this case you need to hit Ctrl+Shift+R to make a hard refresh without using the cache.
• Sometimes images have an identifiable class attribute on the DOM node. After a bit of inspecting with devtools (right click->Inspect Element) you can list the classes that mark most of the images and block them the class selector way: example.com##.image-container
• There is a great cheatsheet on the filter syntax.