Image Compression Issue on Mobile

[istirton]

Has anyone else had issues with the automatic image compression on mobile devices?

I’m seeing that my image looks fine, (see screenshot) on desktop, but the same image is getting overly compressed on mobile, leaving compression artifacts on the image itself. I’m not sure why it’s doing this and what I can do to fix it.

Might be an oversight on my part, but the image should be large enough to handle a mobile device.

---

Here is my site Read-Only: https://preview.webflow.com/preview/clarifii-product-page?utm_source=clarifii-product-page&preview=0f9e9f3cadc689bdc28db9a762aa5dc7

[mistercreate]

Hi @istirton,

Thanks for posting about your images being too compressed.

Would you be able to disable the responsive image feature for those images?

You can disable this feature for a specific image by hitting CMD+SHIFT+O on Mac or CTRL+SHIFT+O on Windows, then clicking the checkbox that’s revealed in the image settings panel: https://university.webflow.com/article/responsive-images

Afterward, republishing your project should note if the images are still showing the responsive variants

[istirton]

Hi,

Thanks for getting back to me…much appreciated as always.

I’ve gone through and disabled the responsive part of the images, but the images still look like garbage on chrome on my pixel 2. It’s a 1920px wide image, I’m just not sure why it’s looking like this on mobile. I’m not sure I got a note from my project that shows the images.

[webdev]

You can always create your own versions and display with an html embed. I would not expect much when you are trying to use a large “screenshot” png. Generally speaking, the compression is usually ok. But when I am using my interior photography shots on high end designer portfolios, I prefer to drive.

[rileyrichter]

Hi, @istirton!

Thanks so much for trying those steps with responsive images.

I did some more investigating and I think I see a couple things contributing here.

The images are small and pretty compressed to begin with. It looks like you were trying to make them more lightweight to make it work with your scrolling interaction (love this concept, btw).

I think the interaction is also part of the issue here. Loading all of the images in succession on scroll combined with the shorter scroll length on mobile might be causing this.

I turned off the interaction for mobile devices and viewed it on my Pixel 3 XL and the images didn’t look as pixelated:

Can you give that a try on your end and see if you notice a difference? If so, we’ll know it’s more about the interaction. If not, I’ll escalate this up to our engineers and ask them to investigate further!

[istirton]

Thanks for getting back with me.
It looks like the interaction was causing the extra compression here. Which is weird…or is that kind of expected?

I’m not really sure what I should do in this case. Yes, the images are compressed and lightweight, but they’re also fairly large images and should be displaying fine at the mobile size. It seems the interaction is compressing it to bits. I’m not sure what you mean about shorter scroll length on mobile. I think the slider track is the same height on all screens.

Anything you can offer here is greatly appreciated, thanks!

[rileyrichter]

No problem, @istirton! Just glad we can help!

I am not 100% sure, but I don’t think the Interaction itself is compressing the image. I think this is an effect of changing the transparency of 20 images on scroll. I don’t think this is necessarily a Webflow related issue either. I think if you were to hand code this type of interaction you may get the same result.

I think it’s just a limit to what browsers can handle and to the interaction itself. You might find more success using a plugin tooled for this specific functionality that has tweening. Have you seen ScrollMagic?

http://scrollmagic.io/examples/expert/image_sequence.html

There’s also this awesome CodePen that plays video on scroll:

Or you could take a different approach and break this into three images. The first image would be the hand holding the dropper. The second is the camera and goggles. The third is the overlay for the camera and goggles. Then, on scroll you can move the hand down, and animate the overlay image.

Let me know if you have any other questions and I’ll be happy to assist you further!

[istirton]

Ah okay I see the issue is in the complexity of the interaction. Dang, I really wanted bragging rights by doing this in Webflow natively. Okay, I suppose I’ll give these solutions a try. Thanks for your help!

[rileyrichter]

No problem! Loving your ideas and the way you’re pushing things. Keep building awesome stuff!

[system]

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.