WebP and mobile version?

So basically is there a parallax effect on the website, you need to make on tablets and laptops images SOME are NOT LOADED at ALL(and one changed to a different special for tablets and mobile),, not just load and hiding with dis-none. Please help with implementation, read about the <pictures>, but there is a bias in the retina, do not understand.

The bottom line:
If a normal browser and a large screen, it loads everything and webp.
Otherwise: If the normal browser and a small screen, it loads one and webp.
Otherwise: If the bad browser and a large screen, it loads all png.
Otherwise: If the bad browser and a small screen, then load a single jpg.
March 19th 20 at 08:28
1 answer
March 19th 20 at 08:30
Solution
You just here: YouTube Channel

Here, direct instruction: videos, starting with 23 minutes +\-

Another bonus: cool report.
Success!
To be honest from there and came, but thought someone around here is ready code, just copied, but probably will have to immerse and understand, in any case - thank you. - laurence_Grah commented on March 19th 20 at 08:33
@laurence_Grah, Yes, when I decided to do things a beautiful to do, it seemed as if all forgotten how to write) as in the parable about the centipede, but the result of this approach, I felt immediately, Google AIDS test showed 100/100, and audit the lighthouse was almost all parameters close to 100. - Ofelia.Hilpert87 commented on March 19th 20 at 08:36

Find more questions by tags ImagesHTMLCSS