WebP and mobile version?

Question

css

In general, there is a parallax on the site , you need to make sure that on tablets and laptops SOME pictures DO NOT LOAD AT ALL (and one changes to another special one for tablets and mobiles), and not just loaded and hidden with dis-none. I ask you to help with the implementation, I read about <pictures>, but there is a bias in the retina, I did not understand anything.
Essence:
If a normal browser and a large screen - then load everything and webp.
Otherwise: If a normal browser and a small screen, then load one and webp.
Otherwise: If a bad browser and a big screen, then load everything and png.
Otherwise: If a bad browser and a small screen - then load one jpg.

Answer 1

You are right here: YouTube channel
Here, direct instructions: video , starting from 23 minutes +\-
Another bonus: cool report .
Good luck!