Image are distorted Re: Attachment Srcset causing images to be distorted

[Dagaloni]

I have the exact same problem with the exact same behaviour: Attachment Srcset causing images to be distorted

It is very unpredictable and I can’t reproduce it every time but different customers have reported experiencing the issue on our site.

I have a feeling the it’s a combination between srcset, aspect ratio and image size. But I can’t prove it since it’s is so difficult to reproduce the problem.

I’m also running FlyPress for cache.

Do others have the issue as well?

[prakash_s]

Hello @Dagaloni,

Thanks for writing to us.

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[Dagaloni]

Hi @prakash_s, thank you! I added the login details to my post.

The problem is, I can’t reproduce it. On my end everything looks good, but I have reports from users who still see the distorted images.

[prakash_s]

Hello @Dagaloni,

Thanks for sharing the login credentials. I went ahead and checked your site, and it seems that it is working fine on my end. I have tested it on the Google Chrome browser version 140.0.7339.133. It might be the issue of browser cache. I would suggest you please purge all the browser cache and recheck it again.

Thanks

[Dagaloni]

Hi @prakash_s thank you! Yes I know. I found a page where I currently see images distored: https://sanopharm.com/achtergrond/emulsan-vetoplosbare-vitaminen/

Cache is purged multiple times, without effect.

There are three suspects. The effect is fixed when I turn one of these css-lines off in the inspector:

img {height: auto;}
.mmkr-2.x-image img {aspect-ratio: auto;}
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }

I’m also on Chrome 140.0.7339.133.

I can only see it in Chrome. I tried to replicate it in Safari and Firefox but failed.

[Dagaloni]

Alright! I think I found the answer. In the last post I noticed that the effect was only in Chrome and found that I could replicate the issue in Chrome.

It looks like a setting called Properly Size Images in FlyingPress was causing the issue. I turned if off and it’s fixed now.

Still, the might be interesting to look into as there might be a conflict between Pro and FlyingPress. I have also notified FlyingPress about the problem.

[ruenel]

Hey @Dagaloni,

Thanks for letting us know that you have found the cause of the issue.

Cheers.