Two ways to do this without using Javascript:
using <picture> tag for images
As @krazzeniru20 explained in his answer, you can use the <picture> tag in your markup which goes something like this:
<picture alt="description of image">
<!-- low-res, default -->
<source src="small.jpg" media="(min-width: 400px)">
<!-- high-res -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content -->
<img src="small.jpg" alt="description of image">
</picture>
Here, the image mentioned inside the <source> tag would load up as the browser hits the breakpoint mentioned in its media attribute, which is pretty simple and straightforward.
more info here: css-tricks.com/on-responsive-images/
Another way to do this would be:
using srcset attribute with img
If, on responsive screens, you are switching between different versions of the same image, you can just put in an srcset attribute on the <img> tag.
here's the syntax:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="description">
More info here: css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
So.. the question arises, When to use what?
Here's a little help with that :
The reason that image tag with srcset would need different variants of same images is cause the browser actually calculates and load up the best possible image for the user's screen size instead of just replacing the image for a breakpoint.
If you are trying to show a different image for a different breakpoint, <picture> is the solution for you. <picture> with explicit sources, the browser has to do exactly what you say and not make choices for itself.
Hope it helps! 😊