How to set a microdata image property, without letting the browser download the image?

Question

I have a website on which images are displayed. The images which are displayed are resized and then cached by the web application. But the cache is volatile. For the microdata I want to link to non-volatile images.

My current solution for this is

Click to copy

<img src="cache/image-resized.jpg" />
<img src="static/image.jpg" itemprop="image" style="display:none;"/>

This works. Google interprets the microdata correctly and the resized image is displayed. But the users browser also downloads the static image, which is a large image.

So how do I set a microdata image property, without letting the browser download the image?

Answer 1

_{(Note: a now deleted answer suggested the use of the meta element)}

Instead of the meta element, you should use the link element, because the content is a URI:

When a string value is a URL, it is expressed using the a element and its href attribute, the img element and its src attribute, or other elements that link to or embed external resources.

It’s even required:

If a property's value, as defined by the property's definition, is an absolute URL, the property must be specified using a URL property element.

So it should be:

Click to copy

<link itemprop="image" href="static/image.jpg" />