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.