Smush CDN auto resize not working properly

The auto resize feature in Smush CDN doesn't seem to work. Even tho it's enabled it's still loading the native 900x500 image.

GTmetrix etc still says a 0 score for serve scaled images.

  • Nithin
    • Support Wizard

    Hi Peter,

    Hope you are doing good today. :slight_smile:

    Smush CDN can only serve sized images if there are images already registered according to the content width of your theme. In such use case, I guess it would be better to register images size for both content width via add_image_size functions.

    However, could you please enable support access to your website, so I could give a closer look at the dashboard side before suggesting any code changes, and also check with the developer regarding such workflow too.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please let us know once you enable access so that we could get this sorted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi Peter,

    Hope you are doing good today. :slight_smile:

    Thanks for enabling support access, I gave a closer look regarding this in your website, and I'm afraid what I suggested in the previous reply about registering new image size might not help much.

    I brought this into our developer's attention, and on further checking he was able to point that this should have worked fine with the old 400px image size you had before, and making sure the "Automatic Resizing" option in Smush CDN was enabled along with it.

    The mentioned option in Smush CDN should automatically serve resized image sized via scrset, which should have help with resolving in Mach screens too.

    Could you please confirm whether it was tested in Mac 27 inch with Automatic Resizing option of Smush enabled?

    Is it possible to temporarily revert to the 400px you had before so that I could check with the developer, and further test it out to see how it behaves?

    Looking forward to your response so that we could help get you sorted asap. Have a nice day ahead.

    Kind Regards,
    Nithin

  • Peter
    • WPMU DEV Initiate

    I don't want to revert to 400px images, because that doesn't look good on a 27" iMac. Which is why I added the larger images instead. Automatic Resizing for Smush is enabled. But obviously, I'm not resizing stuff down that small (to 400px). But the scaled images feature with Smush CDN doesn't seem to be working...resulting in a bad score on GTmetrix. That feature should work no matter how large the image is, shouldn't it? Please fix. TIA

    • Anton Vanyukov
      • Developer

      Peter,

      The Smush auto resize feature will only work correctly, when the theme has properly registered image sizes and uses common breakpoints for various displays. Your theme doesn't have that. Also, the resolution of a retina 27'' Mac is 5120 x 2880 px. In your layout there are 4 images in a row, so minus the margins, that is roughly 1200px in width per image to display in proper quality. But your images are limited to 600 px. If you want to fix both the goole page speed warning and serve the correct images on Macs, you should revert to the 400px image in src, and provide at least 1200px image for Smush to be able to resize for larger resolutions.

      Best regards,
      Anton

  • Peter
    • WPMU DEV Initiate

    Sorry, you lost me - that's just confusing: you want me to revert to 400px, but to also provide 1200px image. So which is it? Should I change to 1200px? And that will work? (even though 600px doesn't?)...doesn't make sense. Please explain better.

    And btw, this is what images looked like when using 400px images, so that's why we changed the size to 600px - https://imgur.com/QaRGuT6 (notice how the images don't reach to the full sides of the green bars above each image like they should)

    • Anton Vanyukov
      • Developer

      Peter,

      What I mean is there are different types of image sizes. You're using an original image as the source, which in WordPress is not the correct way to use responsive images. Default WordPress installation provides you with these image sizes: thumbnail (150x150px), medium resolution (300x300px), medium large resolution (768x0px), large resolution (1024x1024px) and original image resolution. By uploading a 600px wide images, you are missing out on the medium large and large thumbnail sizes. So having said all that, you should upload larger originals (at least 1200px), but for the image source use the 400px image size. If your theme is properly using responsive image functionality of WordPress, you should not have problems that you are showing on your screenshot.

      Best regards,
      Anton

  • Peter
    • WPMU DEV Initiate

    Ok, so by using the 600px image instead of a 1200px image, I might be missing out on the medium large and large thumbnails, but that's not the problem here. The problem is that the smaller thumbnail/sizes are not being shown for smaller screens. This is the Divi theme by Elegant Themes, which is very popular, so I would think responsive image functionality would be good.

    Bottom-line, is you're saying that WP Smush's CDN cannot automagically show a smaller version of the 600px images for smaller screens, is that correct? It didn't sound like that feature required any other coding on my end. "Automatic Resizing: If your images don’t match their containers, we’ll automatically serve a correctly sized image."

    So what would I need to do then to actually get this magic to work? Uploading a 1200px image wouldn't help (since obviously that's 2x bigger than the 600px image, my score would be even worse).

  • Peter
    • WPMU DEV Initiate

    How is this article supposed to be helpful? I have provided an image that is "at least the width of the column". Are you familiar with the Divi theme and Divi Builder? It doesn't seem like it. You don't define the "src" size manually. You just upload your image to the single image widget and it is sized to fit the width of the column.

    The bottom-line here, is that Smush CDN is not showing a smaller version of the image to smaller screens. Even though the theme is creating the smaller size thumbnails and those are available to use. I thought the point of the Smush CDN auto-resize feature is to show those smaller thumbnails on smaller screens and allow the full-size image to be shown on larger screens...based on how wide the screen is and what the width of the column is. Something along the lines of the code checking the image and the column container width that the image is in to figure out what size image needs to be used. If the column is small enough (on a small enough screen), I thought that Smush would show a smaller image. That's not happening...even though those are available.

    So can you get this feature to work with Divi or not? So far this has been a long thread full of excuses as to why it doesn't work instead of putting a little effort into figuring out how to get it to work. I understand that the Smush CDN is still in beta, so it's still getting these sorts of things figured out, so I hope this helps make it better - which will serve all WPMUDEV customers better (including many that I am sure also use Divi). Please figure it out...and if you guys need to buy a license to Divi to figure it out, that isn't that expensive. (It's one of the major builders out there so it should be worth investing in to test and troubleshoot these sorts of things with WPMUDEV plugins.)

    TIA

    • Anton Vanyukov
      • Developer

      Peter,

      Sorry that you feel that I'm not trying to help you. I have set up a test site with Divi and I cannot replicate the issue there. I have added a single image:

      and ran a speed test, the image did get flagged as incorrectly sized:

      but after I enabled Smush CDN + auto resize feature:

      and PageSpeed test didn't flag the image anymore:

      I have tested this on the the default 2019 theme + Divi builder.

      Please enable support access to your site, so I can fully replicate your site on my test site.

      Best regards,
      Anton

  • Peter
    • WPMU DEV Initiate

    Right, I understand that. And right now, since I went over the 10GB allowed for 30 days (as of the end of May), that is deactivated. So when did/does my 30 days start and end? (e.g. was it May 1-May 30? If so, it should have reset to 0 on June 1, correct? Then shut off again when it hits 10GB...unless I upgrade to allow more.)

    • Anton Vanyukov
      • Developer

      Peter , sorry for the long reply. The bandwidth is calculated based on your monthly usage. It does not reset every month, but rather updates every day. So if you have no usage over a few days, your account is unblocked. In any case, if your monthly average goes above the 10Gb limit, you will have interruptions either way. This is why it is recommended to upgrade to a 50Gb plan, which is just $5/month. But, as I said, you can just disable CDN, wait out a few days until your overall bandwidth for the past 30 days goes below the threshold.

      Best regards,
      Anton

  • Peter
    • WPMU DEV Initiate

    So it's a rolling 30 days then? Regardless, I went ahead and upgraded, so you can re-activate and finish fixing this. Also, is there a place to view the CDN usage breakdown to see how much bandwidth each site is using?

    • Anton Vanyukov
      • Developer

      Hi Peter,

      It took me a while to test this out. I was able to replicate on a test site. But I was not able to find a proper fix, even without Smush. I tried to adjust the srcset and sizes attributes for the images, but because google doesn't scan the site at a predefined resolution, it always resulted in warnings - either the images are too large, or when I was able to get rid of the warnings, the images were too small, and the titles (with the green backgrounds) were larger then the images under them. I would suggest registering an additional image size of 310px and checking if that fixes the issue. Also, you'd need to add this to your functions.php file:

      add_filter( 'wp_calculate_image_sizes', 'update_image_sizes', 15, 5 );
      function update_image_sizes( $sizes, $size ) {
          if ( '600' === $size[0] ) {
               return '(max-width: 1440px) 310px, (max-width: 2560px) 600px, 600px';
          }
          return $sizes;
      }

      Best regards,
      Anton

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.