CLS problem image width and height

[Rico92]

Hello,

 

I am facing some cls problems. One of them is that on my desktop and mobile version of my webshop there is no 'explicit width and height for images' according to pagespeed. 

My website url is https://tcgcenter.nl

 

Can someone help me or make me understand how i can fix this?

 

Thanks in advance.

[webprog]

Hello, your slider in module tm_imageslider generates images without width and height. So, you need to make changes in this module or find another module.

[Rico92]

22 minutes ago, webprog said:

Hello, your slider in module tm_imageslider generates images without width and height. So, you need to make changes in this module or find another module.

Hi, thank you for your answer. It is not just the slider module. It goes for all images on my website according to pagespeed. Every page i look up seems to have this problem. So, i am looking for a one-hit solution that fixes it all

[ps8modules]

Hi.
If it is not a default or classic theme, it is always reasonable to contact the template developer. Apparently he forgot to add the width and height attributes to all TPL templates.
Global javascript could also be used to add the width and height attributes.
But there is a problem with the fact that your template contains a page preloader.
So the javascript would have to wait for the previous javascript to exit.

[ps8modules]

Sample custom.js:

$(document).ajaxStart(function() {
    var imgs = document.getElementsByTagName('img');
    if (imgs){ 
        for (var i = 0; i < imgs.length; i++) {
            var width = imgs[i].naturalWidth;
            var height = imgs[i].naturalHeight;
            imgs[i].setAttribute('width', width);
            imgs[i].setAttribute('height', height);
        } 
    }
});

You can put this code in the file:
./themes/your-theme/assets/js/custom.js
If such a file "custom.js" does not exist, create it.

Edited November 17, 2022 by 4you.software (see edit history)

[eresturamoncin]

I have the same problem, but only with the Logo image of the website. I tried everything, change the picture, modify the class of the logo h-logo to define explicit width and height using @media to diferent screen sizes... and nothing works...  any thoughts?