New to the community? Start here

[Smush Pro] Solve “Properly size images” Google Page Quality Insight

Hi,

I’m currently using Smush CDN to ensure a better compression and image serving for enhance my Google Performance Test, but I still gets the “Properly size images” notification on opportunities.

There are images served by the CDN that apparently are not served at the correct size of the container.

Is there a mis configuration or something else that I should do to improve this?

Thanks.

Fri, 13 May 2022 13:57:24
More Smush Pro discussions
Smush Pro
  • Adam
    • Support Gorilla

    Hi Victor

    I hope you’re well today!

    Most (if not all) of these images are product images displayed in the “carousels”. The issue is, indeed, related to HTML markup of these carousels.

    It’s a bit “complex” but let me try to explain what’s happening here.

    The most important part is that automatic resizing in Smush CDN doesn’t really physically resize image to container size “on the fly” and “pixel perfect” (as it’s not necessary and would actually slow things down) but rather than that it adds markup to IMG tag, generating proper “srcset” attribute that gives browser “alternatives”.

    In other words, it “tells” browser “here are multiple images in various sizes that you could use, you decide which one to download depending on container size and additional included parameters”.

    That should do the trick but it depends on actual IMG markup too and, in this case there are two aspects:

    a) the “fixed” width and height attributes of IMG tag that there
    b) actual real image size of image used

    Let me refer to those below:

    a) Smush recognizes biggest possible image size in a given location – that, depending on markup, might be either from $content_width variable or from actual height/width attributes of IMG tag.

    Then it checks what image sizes smaller than that biggest one are available on your site (you can see all registered image sizes on “Smush Pro -> Bulk Smush” page under “Image Sizes” option when you switch it to “custom”.

    Then the “srcset” attribute gives browser the image sizes that are smaller than that maximum image size available for that image.

    In this case images have height/width set as “fixed” to 387 x 387 pixels. So “maximium available size” is 387 pixels wide. Therefore only image sizes (out of all registered images sizes) smaller than this are suggested as “alternatives”.

    If image had width set to e.g. 1500 pixels there’ll be more images included in “srcset” attrtibute – there’d be images for all registered sizes smaller than 1500 pixels width.

    Here we have that maximum width of 387 pixels. That would work fine on smaller screens but in reality if actual viewport width (viewport usually can be associated with just screen width) is bigger than that, then browser doesn’t use any of those “smaller alternative” images but the one that was specifically – originally – set.

    And that’s where the second part “kicks in”.

    b) the images that are added to these carousels seem to be over 1000pixels wide (probably “large” size) so when screen with is higher than defined, the closest matching image size is “originally added” one – in this case that one that’s over 100 pixels wide.

    Of course it’s too big so it’s resized by browser to fit container but that’s just “visually”. In reality it’s still that big image and Google detects it and repots it as it slows down the site.

    I’m not really sure if this is quite clear but I hope it explains things a bit. Here you’ll find more information about resizing:

    https://wpmudev.com/docs/wpmu-dev-plugins/smush/

    —–

    Now, how to fix that then?

    First, you’d need to check if $content_width is set and if yes, to what value. This should be set by theme as explained here (though value may be different):

    https://codex.wordpress.org/Content_Width

    If it’s not set, it should be added. The actual value to use could be the biggest allowed width of content area of the site (think of it as the width above which – on a big screen – the “parent most” content part of site gets centered instead of being “widened” automatically when you resize browser window).

    The next step would be to edit these carousels if they are “editable”. If they are and and there’s an option to choose image size (out of registered sizes, like “full”, “medium”, “thumbnails” etc), you should choose the size that’s the closest one to biggest size that image will ever be displayed on site.

    For example, here the biggest size is 387 pixels width so you should use image size (out or registered image sizes) that’s closest to it – not significantly bigger and not significantly smaller.

    That’s pretty much it and it should do the job.

    Alternative “trick” that may work would be to… instead either set “width” and “height” of these images (as in “width”, “height” attribute of IMG tag) to way bigger or simply remove width and heigth attributes entirely. It is completely counterintuitive but should cause Smush to give browser more “alternative images” to choose from. This should work in terms of browser behavior but I’m not sure how Google Page Speed would treat it.

    Best regards,
    Adam

  • Victor
    • WPMU DEV Initiate

    Hello Adam.

    Thanks a lot for your reply and deep explanation for my question.

    I’m sorry to take some time to respond this, I’ll check everything and I will be back soon to give you a feedback.

    Best regards.

    Victor