Clickable and non-clickable images on the same page

Question

In my portfolio I have case studies, where I explain a bit of my projects and place images of different sizes along with the text. While in some smaller images the user is able to click and view the large version, some other images are clear enough on the page (with no clicking the user is able to see the image in almost it's original size). So my options are:

1. differentiate clickable images and non-clickable images (I didn't want to do that as it won't look so good when for example in one column you have an image with a border and on another an image without it)
2. make everything clickable even if some images when zoomed in will just repeat the image
3. keep the way it is, some images will be clickable and others won't.

The question is: Is it a real issue for users? If there is an image that is clear enough will they still try to click to see a larger version of it? Will they be more frustrated to try to click and nothing happens, or will they be more frustrated to click and see a similar image? (guess is more of an issue for touch-device users as they won't have any hover effect)

Answer 1

Offering no way to distinguish between clickable and non-clickable images is going to cause confusion, and having the click provide no benefit will cause annoyance, so I think you're stuck with providing some way to identify which images are clickable and which aren't.

As an alternative to borders (which I agree could look messy), you could add a magnifying-glass icon in the corner of images which are clickable:

A second alternative would be to add borders to all images, but differentiate by colour:

... but there's a trade-off here between making the difference too jarring, and making it discernible for people with e.g. colour-blindness.

Answer 2

Thinking about the end goal for the user - it is to see a larger version. On a touch screen the initial instinct could be to do a spread multi touch action to zoom in to see the image rather than the single tap action. It would be an interesting solution to replace the thumbnail image with the large image when you detect the event so the larger zoomed-in image is not a pixelated mess.

I have not seen this done before and few Google queries turned up nothing. Has anyone experimented with this approach before?

The biggest challenge would be that users don't always perform this multitouch event on the image itself so when there are multiple on a page you would have to replace them all or figure out which one to replace.