How to optimize images?

Question

Image processing

Screenshot from PageSpeed ​​Insights

Google wants to optimize images.
I am a beginner web developer and in many ways have not yet had time to figure out which links I didn’t follow from him, I came across all kinds of documentation in English, or texts that I didn’t understand, even with translation. What methods can be used to implement lazy-loading and image resizing with a smaller client screen width (And if the image has no alternative)? Please explain in more detail and with examples from the code, if possible. Thanks in advance.

Answer 1

there is a habré, I forgot the name of the article,
I found it in part of the code (I copied the function for myself)
https://habr.com/post/261625/

Answer 2

Here is an image compression service - https://tinypng.com
If the original image is larger than the block, then you need to resize it (for example, your picture is 1000x1000, but the image block has dimensions of 200x200).
In general, if I'm not mistaken, Google should give already compressed pictures (at least in the old version it was like that).