Plugin changes image sizes

Hello @beats247

I am sorry about the issue you are experiencing and I am happy to assist you with this.
As I can see W3 Total Cache is not enabled at the moment.
Can you please disable the settings one by one in Performance>general settings, save the settings and purge the cache after each setting is disabled, and see which one might be causing the issue?
Also, I’ve sent that you’ve been using different caching plugins in the past. Please make sure that there are no residual files from those plugins so any possible conflict can be avoided and make sure to clear the Cloudflare cache .

Thanks!

Hi again,
thanks for your reply. Again, the W3 plugin is not disabled, it’s enabled.
I disabled all general settings again and deleted the CF cache. It went back to normal then.

When re-enabling everything one by one, the issue occured again when activating ‘Lazy Load Images’. Is there any fix for this as this option really saves some loading speed?

Thanks again

Hello @beats247

Thank you for the information.
You can try changing the Script Embed method: to sync (to head) in Performance>User Experience.
If this does not help the only option is to disable lazy loading. Some themes, plugins are embedding images in a way that conflicts with the lazy load feature.
These issues are one in a 10k.
Thanks!

Hey Marko,
thanks again. Sync to head didn’t fix it, unfortunately. I know why this is happening now. All images on the homepage have the CSS class ‘mf-product-thumbnail’. The 3 lists on the homepage have the CSS class ‘product-thumbnail’ though and I used some custom CSS code to increase them in size:

.mf-products-list-carousel .product-item .product-thumbnail {
width: 150px;
}

The standard was 70px. The lazy load now takes smaller images and stretches them even bigger somehow. Is it possible to exclude only these images from the lazy load?
If I remove the custom CSS code they remain at 70px with lazy load but they are too small then (that’s why I increased their size with CSS). Let me know please. Other than these images everything else looks fine. Thank you very much again!

Edit: I have tried to exclude them with the exclude words section but they are still lazy loaded. I tried

no-lazy-images (gave the whole section that class name)
product-thumbnail

Both have no effect. How can I address these correctly? Thanks

Hello @beats247

Thank you for the information.
The way to use Exclude words is to exclude a specific image class so it won’t work with excluding the div class.
SO in this case you should assign the same class for these images and exclude the specific class.
Alternatively, and this is a bit more work, you can exclude the images by adding the image URL to Exclude words, I.E:
https://2020.beats24-7.com/wp-content/uploads/2021/02/image.jpg
Thanks!

Hello,
alright, thanks. But how is sth. like ‘data-lazy-src=’ an image class f.ex.? There are several entries like this set as standard in this section already. I don’t understand them.
How do I set the class for these images? Can you let me know please?
The page is set up with WPBakery so this is the section: https://prnt.sc/107p46o -> Class setting https://prnt.sc/107p4tq / https://prnt.sc/107p5xi
Isn’t this a way to assign them a class, or is it just a div class? How would you set up a speficic class for them? I am also not sure why lazy load only stretches these images and everything else works, is it because it cannot handle the CSS?

Yes, but that won’t really work as the images change quite often, unfortunately.
Thank you very much again.

Hello @beats247

Thank you for the information.
Can you please disable lazy loading so I can check which words can be used for those images to be excluded from the lazyload?
Thanks!

Hey @vmarko,
ok, I just deactivated lazy loading so you can check it. Thank you again for your help!

Hello @beats247

Thank you for the info.
The issue is with:

.woocommerce ul.products li.product a img.lazy {
    width: 100%;
}

https://2020.beats24-7.com/wp-content/themes/martfury/style.css
and is changing the sizes
When I deactivate that rule it works as expected.
As you can see the lazyload is already applied to those images so you should disable W3TC Lazyload to avoid the issue.
Thanks!

.

Hey Marko,
the theme has a built-in lazy load feature but I already deactivated that. I also deleted the css code from the theme’s CSS file but it keeps popping up when I enable your lazy load option. I don’t know where this CSS code is coming from even when I deleted it… Deactivating your lazy load isn’t really an option because then the complete site has no lazy load function. The lazy load function of my theme isn’t as good as yours, unfortunately.
I guess I’ll have to try yet another caching plugin *sigh*, there’s also still the mobile issue so I guess that’s my only option. Anyways, thanks again for your help Mark, it’s much appreciated. Keep up the great work!

Hello @beats247

Thanks for the info.
I can see that you are using some other plugin for this and as I can see the lazyloading issue remains even with that other plugin.
Thanks!

Hello @vmarko,
I am currently testing with WP Rocket because the theme developer recommended it for his theme. The image lazy load function is working fine so far so I am not sure if you have seen an old cached version at your end?
The images have the correct size for me with WP Rocket’s lazy load. Checked it with different browsers and deleted cache, it’s working fine. Thanks again!

Hello @vmarko,
I switched back to your plugin again as the mobile loading issue was because of Varnish and it also happened with WP Rocket. I disabled the lazy load for now and I am having no issues beside one JS error I’ll try to fix.
However, do you think it is possible to fix the lazy load issue (wrong image size) for the image section below the slider? Can we exclude them somehow or fix this any other way as everything else was working? Lazy load with WP rocket was not giving me this issue so I guess there is a solution for this?
PS: I have W3 TC installed on my main site now -> https://beats24-7.com

Thank you very much again!