Blur all images in Safari, unless clicked

safarisafari-extensions

I know that the 'Develop' menu allows me to block all images in Safari, however I have a couple more requirements:

  • Blur, not block, all images from all webpages
  • Click to show blurred images

I don't like to see images by default, yet still want to retain the ability to selectively 'unhide' them. Blurring the image makes the selection process (of which to show) much easier.

Is there a way to do this in Safari? Perhaps as an extension?

As a bonus, if there is a way to whitelist a set of images or sites (e.g.: the voting buttons in Stackexchange), that would be great.

Best Answer

The following approach comes pretty close, but it does not (nor can it) cover images that are set as background. It might also slow down page loading a bit.

The goal is to inject custom CSS into the page. I'll use the add-on Stylish for that (theoretically you could do it without any external add-ons, but you need a free Safari developer ID to do so - see here - I was wrong, see @markhunte's answer). After installing Stylish, you will see a great 'S' button next to the URL field. Click it and select 'manage'. In the new tab, select 'Edit' to create a new style. Give it a title (perhaps 'Blurred images'), and paste the following CSS into the 'CSS' field:

img {
  -webkit-filter: blur(10px);
}
img:active {
  -webkit-filter: blur(0px);
}

Under 'Applies to:' select 'global (if you want, you could narrow it down to specific URLs, URL prefixes, domains etc.), then save the style to enable it.

If you load a webpage, all images (except for background images) will be blurred. If you click an image it will be un-blurred as long as you hold your mouse-button down. You can customize the degree of blur by editing the pixel value in the first selector as the second selector un-blurs the image.

This is all you can do in plain CSS. If you want a selective whitelist that persists across sessions, you definitely need to write your own extensions. This still comes down to applying the CSS posted above, but the whitelist and the 'click-to-add' part may be a bit more complicated and I do not have enough experience to give you a helpful answer in that case.

Related Question