Blur all images in Safari, unless clicked
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.