Well, there are two way to do that. For one, you could use the taglib.
https://dev.liferay.com/de/develop/tutorials/-/knowledge_base/7-1/displaying-adapted-images-in-your-app

The problem with that approach is that it just inserts the image src and some media queries. While this may sound nice and clever, it is actually quite useless. It inserts a link based on the resolution of your screen. So, want to show a tiny thumbnail there and the user has a 4K monitor? Gratulations, he gets 4K icons.


The other way is a bit annoying. I'd recommend to write your own service to do that and do just a call like

<#assign imageurl = myImageFinder.getImageForResolution(fileEntryId, resolution) />

in the template. Writing the image finding code in a template is probably more effort. In the Java code of your imagefinder component, you would need to use MediaQuery to find the configured resolutions:

List<mediaquery> mediaq = _mediaQueryProvider.getMediaQueries(fileEntryId);</mediaquery>

And now iterate through the list to get the images for the resolutions you need.
hth to set you on the right track.