How to adapt images on the site?

Question

HTML

I ask to help knowledgeable people in my question.
There is a site. It has a high resolution image in its header.
I would like to reduce the loading time of the site when accessing from a mobile device.
How to make it so that when you visit the site from a mobile device, another image (with a lower resolution) is loaded in the header?
It was loading another image, not scaling the current one.
Tell me how it's done or what to google.

Answer 1

this is done on the back-end, the browser always sends the user-agent in the request. Depending on which user-agent a different image is issued.

Answer 2

It is possible like this:
Insert the desired sort from the date attribute