Blocking Animated GIF Images with User CSS (Updated)

Warning: The instructions here are obsolete in that Blink (the engine underneath Chrome) does not support user style sheets. If you find animations a problem, the single best solution is to use Slimjet, an alternative browser built on Blink/Chrome. In the configuration options for Slimjet is a toggle to disable animations as a built-in function. So far as I have tested, all of the Chrome extensions work in Slimjet.

Original post:

This basically applies to Google Chrome. Since I am not a CSS expert, this took a lot of digging. Why it is so very many tutorials leave this out, I don’t know.

You cannot selectively block animated GIFs. You can only block all GIFs, but even that is a little complicated. Since Internet Explorer, Firefox and Opera all include switches in the configurations for turning off animated images, this is an issue only with Webkit browsers, such as Chrome and Safari. For the latter, see this. For Chrome, you have to use a secret incantation.

First, start Chrome from the command line with the proper switch:

google-chrome --enable-user-stylesheet

This creates a folder in the config system where you can add a User CSS:

~/.config/google-chrome/Default/User StyleSheets/Custom.css

Open this in your favorite editor. You should add this one line to block all GIF images:

img[src*="gif"] { display: none !important; }

It took some digging to find out how to set the selector. Adding that asterisk before the equal sign indicates any item on the displayed webpage where the img tag defines a src which includes the sequence “gif” in any portion of the URL. This line tells your browser not to display it regardless. That “!important” makes it imperative, and the power of CSS is to honor the user’s style sheet over that of any webserver instructions.

Granted, it makes some pages look funny, but at least in Chrome I can read without fighting the animations. Since the “Pause! Pause! Pause!” extension is broken, causing a race condition on many pages, there really is little else you can do. Maybe someday the Webkit developers will listen, since this has been a rather noisy demand on the Chrome discussion boards, but I am dubious.

Oh, and if you want to remove that broken extension from Chrome, just delete the entire folder at:

~/.config/google-chrome/Default/Extensions/gpgcolmilkcnccpllfdleobpflemehec

Update: Better yet, there is a greasemonkey script which simply removes only the animated GIFs, allowing the others to remain when you press the ESC key. Here’s how.

Go here and copy the JScript from the display box, and save to a file. I named it stop-animation.user.js and left it in my Home directory. Then I opened Chrome, hit CTRL+O for “open” and found my JScript file and clicked on it. Chrome asked if I was sure I wanted to install this “extension” and I clicked “Continue.” Now when I visit a page with animated GIFs, I hit ESC and they all disappear.