How to have  elements with different links on each image?
Yes hacky!
This is very hacky as you are doing a media query the long way. Interpreting the resulting media aware DOM for a URL that you then manually parse.
Learn and use the API
There are many API's available to a modern browser environment. The general rule is if it can be done on the page via HTML/CSS there is an API that can do it in JavaScript.
I never use media queries as I serve to interrogated devices so I am not 100% up on media querie API's, but for static pages you can use matchMedia
Setting up media dependent links.
There are many ways to setup your page. But in code you can access media queries using matchMedia which returns the result of a media query as MediaQueryList
You can access an elements media attribute by name. for example if an image is clicked in your example HTML event.target.parentElement.querySelector(&quot;source&quot;).media
You can store the different links as data attributes.
I think the best approach is to pre-process the markup when it has loaded and just set the link references depending on the associated media query.
Example
The code checks each link (anchor element) for a source element and uses the source elements media attribute to do a media query.
Depending on the result of the media query it gets the appropriate data set item and set the link href property.
Each picture has a different media query. Hover to see link href (I have set title to show the link as example)


// do in page onload event
for (const link of linkedImages.querySelectorAll("a")) {
    const source = link.querySelector("source");
    if (source) {
        const isSmall = matchMedia(source.media).matches;
        link.href = isSmall ? link.dataset.linkSmall : link.dataset.linkNormal;
        link.title = link.href; // just for example 
    }
}
    

    
&lt;div class="item" id = "linkedImages"&gt;
    &lt;a data-link-small="smallLink.com" data-link-normal="normalLink.com"&gt;
        &lt;picture&gt;
            &lt;source media="(max-width:  1700px)" srcset="https://i.stack.imgur.com/C7qq2.png?s=48&amp;g=1"&gt;
            &lt;img class="images" src="https://i.stack.imgur.com/C7qq2.png?s=328&amp;g=1"&gt;
        &lt;/picture&gt;
    &lt;/a&gt;&lt;br&gt;
    &lt;a data-link-small="smallLink.com" data-link-normal="normalLink.com"&gt;
        &lt;picture&gt;
            &lt;source media="(max-width:  500px)" srcset="https://i.stack.imgur.com/C7qq2.png?s=48&amp;g=1"&gt;
            &lt;img class="images" src="https://i.stack.imgur.com/C7qq2.png?s=328&amp;g=1" width="128"&gt;
         &lt;/picture&gt;    
     &lt;/a&gt;
&lt;/div&gt;