I have been working on similar ways to serve small thumbnails up mobile/desktop and a full size image on Java click to get both size images in google image search. Most important, I needed big images for Pinterest and social shares.
First I tried og meta. Then discovered Pinterest and Facebook both ignore og meta image, and take the visible tiny image on page.
Then I tried detecting user agents and serving up fullsized images to google, Pinterest and Facebook . This works but could be interpreted as bad and probably gets an anti trust value from google bot after crawling.
I went as far as adding both image urls so on mouse over tiny image browsers and google can find the big image url, and if no java enabled it would just open a new window and find the big image. But I was gutted to find no big images get indexed after 1 month.
It's a real headache. Google indexes the text I've masked in java (because it needs masking, it's not content it's code) yet the image urls to big images it knows about them but they're not indexed. Even though a mouse click will load the big image on the page in cinematic css/java pop up window.
So I think the only way is to serve fullsize images up based on useragents strings.
Also I checked out loads of sites and found that following google guidelines and pagespeed has no bearing on ranking because sites scale images in the browser and the natural size (a much larger pic) brings good image search traffic to the page. Which totally sucks.
Google only indexes the visible images as is. No need for canonical.
[edited by: Sagacity at 8:32 am (utc) on Apr 17, 2014]