Low mobile score as mobile image not loading

[kyrapieterse]

Description

the error is coming from the src-set and sizes attributes of the image. Is hard to explain if you don't know them, but basically src-set is a library of the urls of the same image with different sizes, and size are the conditionals used to load that urls from src-set library. Imagine that src-set has this:

1. small.jpg
2. medium.jpg
3. large.jpg and sizes:
4. if it's smaller than 480px
5. if it's equal or smaller than 1280px
6. if it's bigger than 1281px

So, in our case is not working correctly. It's important to understand src-set and sizes aren't coming from Maxi: this is a native feature of WP. For some reason is not working correctly, and I'd say is related someway with the used Theme, that normally is the responsible of setting the available sizes for the site 👍 in the hero image, for example, we've got a Library in the src-set of 5 different size images, but sizes have just 2 conditionals. It means that we are going to use just 2 of that images, so in a mobile we are loading the same than in desktop. That's scoring down in the lighthouse 👍

Step-by-step reproduction instructions

No response

Screenshots, screen recording, code snippet

No response

URL and/or Code editor

No response

How to fix it

No response

Other information

No response

[kyrapieterse]

https://pagespeed.web.dev/analysis/https-2devdemo-maxiblocks-com/ecxp6kjilu?form_factor=mobile

[Naaaaiix]

Some comments about this situation, hope they might be found helpful 😸

As I understood, there's a strict relation between srcset and sizes, where srcset presents a library of different images with their corresponding size and in sizes we create the conditionals that will select the image from the srcset. The way is selected is done by the browser. Here's a definition coming from this article:

Example:

<img 
   alt="image alt text" 
   src="medium.jpg" 
   srcset=" 
      small.jpg 240w, 
      medium.jpg 300w, 
      large.jpg 720w
   " 
   sizes=" 
      (min-width: 960px) 720px, 
      100vw 
   "
>

With scrset you specify a list of the image in different sizes. In this example we have three sizes of the same image. Behind the file name of each image you specify the width in pixels (w of width). For example, small.jpg 240w means that this image is 240px wide. With sizes you specify the size of the image and in which situation it must be displayed. This is done by a combination of a media query and the width of the image. For me, sizes was the most difficult part to understand. But I think it’s also the most powerful one. The above code for sizes does the following:

1. if viewport width equals to 960px or greater than show the image with a width of 540px,
2. if the viewport width is smaller than 960px than show the image as wide as the viewport (100vw means 100% of the viewport width). Now you may notice that in our example of srcset there’s no image with a width of 540px. That’s not a problem. The browser will select the best image available upwards in size. In this case, large.jpg will be used with a width of 720px.

So, considering the example of this Maxi page, I'm going to check the main image:

Here's the HTML image element:

<img 
    decoding="async" 
    class="maxi-image-block__image wp-image-76" 
    src="https://storage.googleapis.com/stateless-maxi-dress-dev200-co/2023/05/942fc6a8-110.webp" 
    alt="942fc6a8-110" 
    width="2000" 
    height="1835" 
    srcset="
        https://storage.googleapis.com/stateless-maxi-dress-dev200-co/2023/05/942fc6a8-110.webp 2000w,
        https://storage.googleapis.com/stateless-maxi-dress-dev200-co/2023/05/942fc6a8-110-300x275.webp 300w, 
        https://storage.googleapis.com/stateless-maxi-dress-dev200-co/2023/05/942fc6a8-110-1024x940.webp 1024w, 
        https://storage.googleapis.com/stateless-maxi-dress-dev200-co/2023/05/942fc6a8-110-768x705.webp 768w, 
        https://storage.googleapis.com/stateless-maxi-dress-dev200-co/2023/05/942fc6a8-110-1536x1409.webp 1536w
    " 
    sizes="
       (max-width: 2000px) 100vw, 
       2000px
    "
>

As we can easily see, the amount of srcset is not the same of the amount of sizes, so my first approach to the issue is that we aren't constructing the correct amount of sizes considering the amount of srcset. It has many sense: themes are normally the source that defines the sizes of the images on WP using its Responsive Images functions and hooks and I guess there are few sizes by default as Gutenberg offers 3 breakpoints sizes; Maxi probably needs more as we use more breakpoints.

Hope this can help fixing the issue or give a step forward on its investigation 😸

[elzadj]

Problem is that the exact same html works on 2021 theme, but doesn't on Maxi or 2023 But y, great idea to try