4

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.

|improve this question
9
+100

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.

|improve this answer
  • This is fantastic, and it works. However, as you mentioned, the performance is quite bad when I do this. For e.g.., after having reddit.com front page in a new tab, the CPU usage of that tab alone went to 25-40% on a modern macbook pro. Page loading also feels sluggish. – Sridhar Ratnakumar Dec 29 '14 at 2:20
  • FWIW, doing this without Stylish (per @markhunte below) did not help with the performance either. Perhaps we can compromise on the blur requirement by having the CSS replace images with unique patterns (no blurring of anything) much like this Chrome ext? – Sridhar Ratnakumar Dec 29 '14 at 2:25
  • 2
    The only things causing performance issues would be the blur effect and the Stylish extension. The blur being the biggest. I would suggest using css opacity: 0.1 instead, as it should be much less cpu intensive. As for replacing the image itself, this would require a JS based solution. – Teak Dec 29 '14 at 12:04
  • @Teak - Yes, opacity doesn't worsen performance - though blur is ideal in terms of hiding the details of the image. Thank you for the answer. – Sridhar Ratnakumar Jan 3 '15 at 5:39
6

This is an add on to @thee's answer.

You can add the css code in their answer without third party apps or a Developers id.

create a .css file by pasting the code as plain text in to a text file. You can use TextEdit.app to do this. Save the file as a .css

enter image description here

Then in Safari got to Preferences> Advanced tab. And using the drop down menu> Other.. of the Style sheet option, navigate and select your file.

enter image description here

Safari will immediately pick up the style sheet and start using it.

|improve this answer
  • @klanomath. Thanks for catching that miss credit. :-) – markhunte Dec 28 '14 at 23:06
  • Good catch, I did not know that. I (briefly) edited my answer to reflect this possibility. – thee Dec 28 '14 at 23:24
  • I guess one downside to this simpler solution is that it forcefully applies the CSS to all websites without any choice (via whitelist/ blacklist). – Sridhar Ratnakumar Dec 29 '14 at 2:26
2

img:hover { opacity: 1; }

This allows you to just mouse over the image to have it appear. It has minimal impact on the resources and you don't have a problem where cliking on an image performs an action you may not want.

|improve this answer
  • +1 Was just coming back to add img:hover which works better that Active. And see you use it here for the same reason I was going to add it – markhunte Jan 5 '15 at 17:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .