[Smush Pro] After enabling Smush CDN wrong image sizes are used in desktop viewport

Please have a look again at this problem. When we enable Smush Pro CDN we see the wrong image size in desktop view. Example: https://strongproductions.wpmudev.host/kristian-farcin-leth/

– have a look at the used image size (1024 * 768) by right click save as to see the file name. The container is 1400 px wide so it should take a higher image size and use that instead.

If Smush Pro CDN is disabled the right image size is back again and the quality is then much better …

Please let me know if there is something we should do to make it work properly – or if you can fix it!

Thanks,

Niels

  • Adam Czajczyk
    • Support Gorilla

    Hello Emil Mikkelsen

    I hope you’re well today and thank you for your question!

    I would need to take a closer look at the site but since it’s a staging site on our hosting, it’s behind http auth and I do not have any access to it. I understand that since you assigned a staging site to the ticket, you’d rather not work with live one.

    In this case, I’ll need additional information so I could access and check the site and investigate the issue.

    Note: Don’t leave your login details in this ticket.

    Instead, you can send me your details using our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question and the template below:

    Subject: “Attn: Adam Czajczyk

    – Site login URL

    – browser auth login and password

    – WordPress admin username

    – WordPress admin password

    – SFTP credentials (host/username/password) or permission for me to create myself an account in case I needed it

    – Link back to this thread for reference

    – Any other relevant urls/info

    Best regards,

    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hi Emil Mikkelsen

    Thank you for your e-mail and I’m sorry for the delayed response.

    I checked the site. The 1024 (width) size is one of the registered sizes of images on site (“large”:wink: and the 1400 (width) one is the “full size” image. If you look into the page source with Smush CDN enabled, you’ll notice that there are actually different sizes of images referenced there within “img” tag attributes and it’s up to browser to decide which one to display to the visitor based on a current viewport (usually just browser windo) size.

    However, additionally with an option to “Enable automatic resizing of my images” the main reference (the one inside “src” attribute of “img” tag) will also be automatically resized based on container size – and that one is “fluid”. It’s not “fixed” to 1400 pixels. For example, when I visited site on a smaller screen, that image (and the one that was saved) was actually… 800 x 600 pixels.

    Just to make sure: have you tried to disable “Enable automatic resizing of my images” option in Smush CDN settings already?

    Also, have you tried switching – just for testing – to core Twenty Nineteen theme to see if images behave the same way with it?

    I realize it’s a staging site but it seems your live site’s hosted somewhere else so I didn’t want to do much changes without your permission as I assume you might be using this staging site for development currently

    Could you tell me also, please, what browsers and on what screen resolutions you’ve tested this with?

    Kind regards,

    Adam

  • Emil Mikkelsen
    • New Recruit

    Hi Adam, thanks for reply.

    You are welcome to play carefully with the site – it is staging and when this problem is solved we will point our DNS and change the staging to primary – and host it on WPMUDEV.

    I have installed the 2019 and 2017 theme.

    On 2019 the same problem is occurring.

    On 2017 the image quality is actually high! The 2017 rightly shows the full size in desktop (where the originally theme and 2019 shows the 1024px wide image in the 1400px container – resulting in a bad image quality).

    I use mostly Chrome but has also tested on Safari (with same results). My monitor is a 24 inch Eizo.

    Adam, any ideas what to do now – why can 2017 theme do the job right where our originally theme and 2019 theme can not?

    – have attached two screenshots. Just look at the eyes on the pictures – much better in 2017 theme :slight_smile:

    Best regards

    Niels

  • Adam Czajczyk
    • Support Gorilla

    Hi Emil Mikkelsen

    Thanks for permission.

    I’ve accessed the site again and did some more “research” on it. I noticed that the full-size images are resized to 1400 pixels width anyway (as this option was applied for bulk-smushing and is applied for automated smushing during upload) but also the max-width of “container” in Elementor settings is set to 1400 pixels.

    This together means that no image will be bigger than 1400 pixels. The test with themes that you run reminded me that most modern themes would actually “print out” more than one image size in page source for the browser to choose from, based on screen size – that’s for responsiveness of the site.

    The question is though why it was still serving the smaller image as a “main” one. Interestingly, when I simply change Elementors content width, cleared all caches (via “Hummingbird -> Dashboard”, not via “Hummingbird -> Caching -> Page Cache” – that’s important!) and then set content width back to 1400 in Elementor and cleared these caches again… the main image (the one in “src” attribute of “img” tag) now is of 1400 width as it’s supposed to be.

    It’s still displayed as smaller on smaller resolution screens because it’s “browser’s choice”. However, It does still seem to be saving 1024×768 image and I admit I’m confused with this.

    Therefore, I’ve asked our developers for help with this. They’ll check the site again and I believe they’ll be able to lend us a hand with the case.

    Please keep an eye on this ticket and we’ll update you here as soon as we get to know more.

    Best regards,

    Adam

  • Emil Mikkelsen
    • New Recruit

    Hello Adam / Support,

    Please give an update – is there any news regarding this ticket?

    Also, at the moment the site is in a state of “technical difficulties” (see screenshot).
    – are you (or others) aware of this (we have not been touching anything lately)?

    Please fix it!

    Let me know what’s going on, thanks.

    Best
    Niels

  • Tho Bui
    • Staff

    Hello Emil Mikkelsen ,

    Your site is working as well now. Regarding the image sizes issue, your parent theme set the content width is 800, so you can fix it by adding this custom snipped code to your child’s theme functions.php file:

    add_action( 'after_setup_theme', 'wpmudev_custom_content_width', 99 );
    
    function wpmudev_custom_content_width(){
      $GLOBALS['content_width'] = 1400;
    }

    Note, I added the snipped code to the child theme of temp site: https://strongproductions.wpmudev.host

    Kind Regards,
    Tho Bui

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.