How to add hyperlin to picture that changes depending media size

i want an image to change depending the size of the screen.
i use this code and it works fine.

<pre>
<picture>
<source srcset="map-small.jpg" media="(max-width: 750px)">
<source srcset="map.jpg">
<img src="map.jpg" alt="map" style="width:auto;">
</picture>	

<picture>
<source srcset="map-small.jpg" media="(max-width: 750px)">
<source srcset="map.jpg">
<a href="index.html" ><img src="map.jpg" alt="map" style="width:auto;"></a>
</picture>	

<picture>
<source srcset="map-small.jpg" media="(max-width: 750px)">
<source srcset="map.jpg">
<a href="index.html" ><img src="map.jpg" alt="map" style="width:auto;"></a>
</picture>