Mobile using full size photo

On my Home page, there is a full-width image that is 1280x330. Lighthouse(Mobile) is telling me that on mobile view the 1280px version of that image is being used. I see that Webflow is actually creating a 500px version of that image, so why would it not be using that smaller version in mobile view? This is the only image on that page that is having this issue.


Here is my site Read-Only: https://preview.webflow.com/preview/homes-for-life?utm_medium=preview_link&utm_source=designer&utm_content=homes-for-life&preview=058437d149456e328750085bac718c3d&workflow=preview

hi @sebrame most probably the issue will be related to you background image (hope that is image you talking about) as it have position fixed. Because of it it will cover whole page as background and to be able to do that it need to be full size. Hope that make sense.

Image is relatively small for its size so you should be fine. But you can do some changes for this image on mobile manually by use of css for example.

Sometime is better not strictly follow what Google say and take these more like notes that may or may not be worth to take care about as they do the same.

Nope, it’s actually this image…

HI @sebrame As I didn’t find any problem with image size I have check lighthouse because you are refering to it that you have find your problem there. But all I see is reference to optimisation of image I have mentioned before but I didn’t find any note about image you are referring to. Sorry but I can’t help you with this issue.

You need to manually shrink the background image (using Photoshop). Shrinking an image on a lower screen size will not change the uploaded image on larger screens.

That will solve your issue. I can’t say with 100% certainty, but their shrinking engine doesn’t work on bg images.

hi @Jake_Arredondo image we are talking about is not set as background, I understand confusion as @sebrame didn’t mentioned what image is problematic in first place and then just point HTML screenshot so you have to dig again to find image by its name. So to be clear this is image we are talking about.

CleanShot 2021-08-14 at 08.29.55

Image is responsive and doesn’t cause any issue

That’s why I have said I can’t help with issue where is no issue.

Stan,
Using Deb Tools and setting device to mobile, I don’t see any image size other than the one I uploaded.
How can you see if Webflow generates a smaller size as per there responsive design spec?
I think that is what the OP is asking as lighthouse is reporting to properly resize image to fit the div/container.
UntitledUntitled

Update:
Interesting,
So if you image is 1280x and the display or div size is less than 1080, webflow uses a 1080p

It does this even though I emulate a moto 4G at 360x
I would expect the image downloaded to be 500x

My original experiment image was 640x and it showed that file.

Is there a way to test or see when a 500x size file is downloaded?

1 Like

OK which I think is by design but not how people think responsive images work.

If your image width is not 1080 OR larger you will NOT get a smaller size for smaller breakpoints such as mobile.
That is what I get from my testing. If I am wrong please let me know.

It may be because of this statement
Important: If your original images are compressed enough, Webflow uses your originals.

I make sure my images are compressed correctly and a resize and new compression added by webflow may make the image larger or NOT sufficiently save enough to hit a threshold.
My guess is they expect your initial image to be photo quality.

Interesting this, isn’t it!

Still doesnt answer the OP question or mine, why if there is a 500px image does lighthouse or dev tools mobile emulator see the 1080px and does that mean a REAL mobile will also see the 1080px and not the desired 500px.

I know, I should stop but I don’t like not knowing the answer.
For some reason, the moto G4 even though says its 360 width it is not talking to webflow correctly.
I created my own device, called it MThornton and set it to 400px width and I got a 500px download.

Now who cares you are all asking, Google Pagespeed Insights does, that’s who.

I might log a bug with support.

What you think worth the effort?

Thank you for reply Stan,
I know you are a busy man.
I think you emulated my manual device by resizing the window.
Click the mobile emulation and retry if you don’t mind.
I am logging a call at the moment.

This is the moto G4 as per pagespeed insights


As you see the image is 1080px

This is my manual device


And this is 500px

I hope you can confirm or at least sort me out :wink:

hi @iDATUS mobile emulation is more for how website will look to check responsiveness etc. but it still take a width of browser window. To be able see what happened you have to shrink Window and refresh. Globally are these emulators useless :wink:

I hear what you are saying but not overly convinced all it quite right so I will log the call to see what support says.
Here are screen shots with the browser shrunk but still emulating mobile (which I know is not quite what you are saying).


Hi @sebrame If you don’t have further questions related to your issue feel free to close this request.

hi @sebrame do you need further assistence with your issue?

Sorry, I’m not getting notifications of replies to my posts. I’ve just resorted to creating separate mobile images.

You are pointing to the image that I have manually set for mobile. If I hadn’t done that, you would see the full size 1280x330 image there, which was described in my original post.

Not a big problem, easy enough to do until Webflow figures out why it isn’t using the smaller image automatically.

In my instance, Webflow does not even ceate a smaller sized image, I had to do that myself.

Yes I still have a ticket open with Webflow support. I need to do some more work to show what I am seeing. Busy doing some pagespeed insights evaluation benchmark work for customers so I asked if they can keep the ticket open until end of the week.
Thanks for updating the post.
Good luck.