Articles index

Stop animated GIFs in Safari

October 1 2020 by Jeff Johnson
Support this blog: Link Unshortener, StopTheMadness, Underpass, PayPal.Me

How do you pronounce GIF? I would claim that it's pronounced like "Jeff", but that's not important. What if you don't want to pronounce or indeed see animated GIFs? There's a preference "Reduce motion" in macOS System Preferences, Accessibility, Display, but for some reason this preference doesn't apply to animated GIFs. Fortunately, there's a workaround if you prefer not to display GIFs in Safari: use a style sheet. If you open Safari's Preferences window to the Advanced tab, you can set your own .css file as the style sheet. Here's some sample CSS that should hide GIFs on web pages.

@charset "UTF-8";

img[src*=".gif"], [style^="background-image:"][style*=".gif"] {
  visibility: hidden !important;
}

Hiding GIFs has the additional benefit of reducing Safari's CPU usage, because it turns out that animated GIFs can be very CPU intensive! If you want to get tricky, you can modify the CSS to show a GIF only when you click on it. However, be warned that this trick doesn't work in all cases.

@charset "UTF-8";

img[src*=".gif"], [style^="background-image:"][style*=".gif"] {
    opacity: 0 !important;
}

img[src*=".gif"]:active {
    opacity: 1 !important;
}

The opacity attribute is used here instead of visibility because hidden elements cannot become active. The good news is that in my testing opacity: 0 still reduces the CPU usage from animated GIFs.

Your Safari style sheet applies to every web page that you visit. If you want to write site-specific CSS, that feature is available in my Safari extension StopTheMadness. I wrote a detailed explanation of this feature in an earlier blog post. With StopTheMadness, you can hide animated GIFs on just specific sites instead of every site.

Support this blog: Link Unshortener, StopTheMadness, Underpass, PayPal.Me

Articles index