The results from Google Search Console are variable. We don’t no which resolution this emulator uses. It can be 375px, 420px or 980px.
First of all add the correct images sizes with the add_image_size function. Let’s start with a simple example with 5 image sizes.
<img srcset="
images/2640.png 2640w,
images/1320.png 1320w,
images/750.png 750w,
images/660.png 660w,
images/330.png 330w"
src="
images/1320.png"
sizes="100vw"
/>If the viewport is 375px (mobile) the 750px wil be used on an iPhone due to the 2x pixel density of the screen. The default for the sizes attribute is 100vw. As default for the src you use the 1x image for the biggest resolution.
In the case of a grid layout you can use the sizes attribute to address the best possible image. In the case below the 100% image will be shown on large devices. On small devices a small image will be shown. In this case the 660px image with a pixel density of x2.
<div class="col-6 col-md-12">
<img srcset="
images/2640.png 2640w,
images/1320.png 1320w,
images/750.png 750w,
images/660.png 660w,
images/330.png 330w"
src="
images/1320.png"
sizes="(min-width: 991px) 100vw, 300px"
/>
</div>
<div class="col-6 col-md-12">
<img srcset="
images/2640.png 2640w,
images/1320.png 1320w,
images/750.png 750w,
images/660.png 660w,
images/330.png 330w"
src="
images/1320.png"
sizes="(min-width: 991px) 100vw, 300px"
/>
</div>If you want to test the responsive images in your browser pay attention to the following:
- Open Chrome Developer Tools.
- “Disable cache” in the “Network” tab.
- Don’t use multiple images with variable sizes on one page. The browser will always pick the largest image so it won’t be representative for testing purposes.