Is it possible to prevent images for desktop (designed for desktop) from loading on mobile and vice versa?

Question

css

Different pictures under the style of hidden-on-mobile and is-mobile.
But it turns out that the browser still loads all the pictures from the code or not?
Is it possible to make images under the style hidden-on-mobile not loaded on mobile, but is-mobile, respectively, on desktops? To speed up page loading.
Maybe somehow lazy loads to fasten? But no matter how much it also becomes heavier because of js / jquery.
Or do it on divas? div id="hidden-on-mobile" div id="is-mobile" and hide all images in css? Then it will work, div is-mobile on the desktop will not be loaded?

Answer 1

https://www.w3schools.com/tags/tag_picture.asp - help you! :)

Answer 2

Through css you can hardly do it beautifully.
For example, you can change the src attribute through js. https://jsfiddle.net/0ohaLy6n/8/