[Resolved] Image don’t scale properly on mobile

[David]

Hello!

This is not a question about image resizing for visual purposes. This is about serving images that aren’t larger than necessary to save load time.

If you look at this article: https://socialpronow.com/blog/how-to-act-party/, the image scales properly and serves a scaled-down, 649×365 version: https://socialpronow.com/wp-content/uploads/2021/01/How-to-act-at-parties-649×365.png

So far, everything is fine and in line with our image settings: https://www.dropbox.com/s/m95m7fiykd8yala/Capture.PNG?dl=0

The problem occurs on mobile devices. Suddenly, it serves the non-scaled version: https://socialpronow.com/wp-content/uploads/2021/01/How-to-act-at-parties-1298×730.png.webp

It’s not enough to squeeze the browser window together and hard refresh to see that it serves the incorrect image. But if you in google site inspector choose to visualize a phone, hard refresh, then disable the phone view again, you’ll see that it suddenly serves the 1298 by 730 version if you right-click and choose to open the image in a new tab.

Optionally, you can open the page on a phone and open image in a new tab – it will serve the full size version.

Do you have any idea why this might be? Another forum said it might be a theme issue, therefore I’m asking here.

We’re using Litespeed for serving WebP but I can’t find anything weird in those settings: https://www.dropbox.com/s/1m5bq9uo0fhx30d/Capture2.PNG?dl=0

Thank you!
David

[David]

Hi there,

How does it behave with the Litespeed WebP option disabled ?

[David]

Hi!

I tried disabling WebP, purged cache, the issue persisted (But no longer WebP).

Then, I disabled the LiteSpeed caching plugin altogether, and hard refreshed the page. The issue persisted: It still downloads the full version of the image on mobile, but scales it on desktop.

What do you make of this? 🙂

(I’m working on the dev mirror: https://dev.socialpronow.com/blog/learn-how-to-be-more-outgoing/)

David

[David]

So this is the HTML being output:

<img src="https://dev.socialpronow.com/wp-content/uploads/2020/10/be-more-outgoing-649x365.jpg" srcset="https://dev.socialpronow.com/wp-content/uploads/2020/10/be-more-outgoing.jpg 2x" width="649" height="365" alt="How To Be More Outgoing" class="webpexpress-processed" loading="lazy" itemprop="image">

All of my devices which are x2HD/Retina are making the request for the large file because of 2x attribute.

I am not ‘seeing’ the scaling up on desktop because i am on a retina device

Aside of this I see the image width is set to 800px wide – which i assume is because you have set a width in the Customizer > Layout > Blog –> Featured Image. Don’t think that is necessary and you should remove that as it can interfere with src-set sizing.

[David]

Hello! I solved it now by using WP Smush cdn, they do the scaling off site so I didn’t have to bother (In case someone else has the same issue)

[David]

Glad to hear you found a solution.

[Author]

Posts