I have a Problem with Automatic Scaling

Hi @lazylonewolf!
The auto-scaling isn’t actually a new feature, we just never gave folks the option to disable it before (from the UI, it’s always been something you could override via constant or filter).

I’d be interested to see if we can figure out why it’s not working for you, so let me know if you want to dig into this further. At the very least, I’d be interested to see an example page to examine the markup of images that were having trouble with our auto-scaling.

We just had someone else encounter an issue with the lazy loader in W3TC that sounds an awful lot like what you experienced. I would recommend seeing what happens if you disable LL in W3TC and re-enable Lazy Load in EWWW IO.

@nosilver4u

The auto-scaling isn’t actually a new feature, we just never gave folks the option to disable it before (from the UI, it’s always been something you could override via constant or filter).

Is that so… well it’s either something weird going on with EWWW, or something with W3TC causing that. I’ve only got Browser and Page cache activated in W3TC, plus the Cloudflare extension. I haven’t seen this problem before I turned on Automatic Scaling through EWWW options, even with Browser and Page caching activated though.

I’ve made sure to check it by clearing the W3TC cache, Cloudflare in Developer Mode just in case it was on Cloudflare’s side, and logged-out in private browsing mode, but it was still happening IIRC.

We just had someone else encounter an issue with the lazy loader in W3TC that sounds an awful lot like what you experienced. I would recommend seeing what happens if you disable LL in W3TC and re-enable Lazy Load in EWWW IO.

I’ve never used W3TC’s Lazyloading even once so that’s probably not it.

One of the main new features in 6.1.0 was the addition of width/height attributes to img elements that were missing them. There were other improvements and additions related to lazy loading, but all of those just tweaked existing features. I know several other folks had trouble with the height/width attributes, and I totally screwed up in not having a UI option for that… Had this nagging feeling I was forgetting something, but at least now that’s “fixed” in 6.1.1.

So at this point, I’d try lazy load with autoscale again (Add Missing Dimensions is now off by default), see what happens. If Autoscaling still breaks things, then just leave it off, and we’ll leave it at that (unless you want to dig in further, then I’d need to see the page in action to narrow it down at all).

Hmm… it’s still happening. It really is Automatic Scaling and/or that lazyautosizes class.

I also noticed that Automatic Scaling seems to overwrite the img’s sizes attribute:
sizes="(max-width: 640px) 100vw, 640px"
overwritten with:
sizes="1093px"

Here’s the HTML for one of my images.

• Cloudflare Development Mode On.
• Made sure to Clear Cache and Hard Reload while Private Browsing in Chrome for each test.
• W3TC is disabled.

Both Automatic Scaling and Add Missing Dimensions enabled. Images are still resized beyond it’s real size:
<img width="640" height="580" class="alignleft size-full wp-image-10071 lazyautosizes lazyloaded" src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" alt="Bonus artwork of Myan awarding herself" data-src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" data-sizes="auto" data-eio-rwidth="640" data-eio-rheight="580" data-src-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" sizes="1093px" srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w">

Both Automatic Scaling and Add Missing Dimensions disabled. Images normal:
<img width="640" height="580" class="alignleft size-full wp-image-10071 lazyloaded" src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" alt="Bonus artwork of Myan awarding herself" sizes="(max-width: 640px) 100vw, 640px" data-src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" data-eio-rwidth="640" data-eio-rheight="580" data-src-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w">

Automatic Scaling enabled, Add Missing Dimensions disabled. Images are still resized beyond it’s real size:
<img width="640" height="580" class="alignleft size-full wp-image-10071 lazyautosizes lazyloaded" src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" alt="Bonus artwork of Myan awarding herself" data-src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" data-sizes="auto" data-eio-rwidth="640" data-eio-rheight="580" data-src-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" sizes="1093px" srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w">

Automatic Scaling disabled, Add Missing Dimensions enabled. Images normal:
<img width="640" height="580" class="alignleft size-full wp-image-10071 lazyloaded" src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" alt="Bonus artwork of Myan awarding herself" sizes="(max-width: 640px) 100vw, 640px" data-src="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" data-eio-rwidth="640" data-eio-rheight="580" data-src-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp" data-srcset-webp="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w" srcset="https://cat-nine.net/wp-content/uploads/2020/05/ranks.jpg.webp 640w, https://cat-nine.net/wp-content/uploads/2020/05/ranks-300x272.jpg.webp 300w">

Thanks for the thorough testing, must be that the lazy loader runs at a point where something from your theme hasn’t shrunk the images down to the correct size yet: I’m thinking perhaps width:auto is being applied prior to the container/div being correctly sized. It’s quite odd that they should be stretched beyond the actual image dimensions, but anything’s possible if width:auto is in use.