Optimizing responsive images for Google PageSpeed?

Question

Google

Hello colleagues. I encountered such a problem, recently in my office they began to test pages using Google PageSpeed, I do not argue that the tool is good. But I have some questions about image optimization. Now I will give an example:
Usually, responsiveness is added to images (following the bootstrap example):

img{
    max-width:100%;
    height:auto;
}

Thus, the image will adjust to the size of the parent block. Well, for example, there is a certain div in which a photo of 640 by 480 is loaded, when the browser window is reduced using media queries, it happens that, for example, it is displayed 320 by 240, and the browser window is even smaller - 160 by 120 :

Accordingly, the size of the parent block changes, and the picture adjusts. Well, Google has it set up in such a way that if a picture is larger in physical dimensions than a div, for example, a picture is 640x480 and shrinks under the action of a div to 320x240, then it will swear, they say, optimize the pictures, compress the size, etc.
Who does what in this case? Is this item some kind of ranking factor in Google?
Here is another situation:

There is a certain gallery where there are small previews, there is a large preview and there is also a huge picture that opens when you click on the preview. We had disagreements and we can't make the right decision, the office split into two camps:
1. The first ones say that for each type of thumbnail you need to submit images of their own sizes.
2. Others say it's better to upload a big preview and for the little ones to serve the same big preview but just squeeze the diva.
In the first case, everything is OK, Google will not swear, everything corresponds to the size, but it turns out that we drive more traffic and more requests to the server: both large and small previews are loaded - two pictures of different sizes.
In the second case, only one picture is loaded - a large preview, and it shrinks to a small preview with a div, but at the same time Google swears why you stuffed a larger image into such a small div.
Who thinks about this?

Answer 1

the factor is
those who chose item 2 - clinical idiots, do not let the CEO

Answer 2

Full & thumb only.
In any case, the ranking should not be affected.
GPS is just a recommendation, nothing more.
PS itself recognizes small ones as thumb and indexes Full.
More requests - well, ce la vie.
Although there are sites with paragraph 2, all zbs.

Answer 3

if you want to optimize both the size and queries, then you need to understand what sizes are often used by users.
if they almost always not only scroll through all the middle pictures, but also almost always expand everything to the full screen, then option 2 is understandable.
but something tells me that God forbid, if half of the users scroll through all the pictures, and no more than 1-5% of pictures. then obviously 1.
most likely users will often scroll through the average size (almost all pictures and almost all users) and rarely open to full screen. it is better to take the average size and use them for small ones. and for the largest - separately.
but it is best to follow the statistics for your users. maybe small details are important to users in the pictures and they will always expand to the fullest.
for p1 there is img srcset

Answer 4

yes in any case it is better to make several different images
why force the same mobile users to download huge pictures?
Or is it useless to download huge pictures on the desktop, if the user, most likely, will not even look at them?

Answer 5

Gentlemen, I probably expressed the thought incorrectly, I'm specifically talking about the second point. I'm not talking about the largest picture (which opens on clicking a link that opens a typical fantasy box), but I'm talking about a medium-sized preview (on which a magnifying glass is drawn, for example it is 640 by 480), which can also be used for tiny previews (thumbs) which are below. That is, we transfer one average 640 by 480 and use it in previews, otherwise we will have to load both average 640 and small thumbs, which, for example, will be 160 by 120, because it will be 2 times more requests, etc.