Streaming live at 10am (PST)

Blurry image on Ipad Air / Tablet-Mode

Hey there!

As the title say´s, my image is not rendering well on the iPad Air.

My image-settings are set to: Image is HiDPI.
The resolution of the image is 1800 x 1200px. The largest image width is on landscape by 991px screen-width and a native image dimension of 860px width. So 860 * 2 = 1720 (for HiDPI).
Am I something missing?
Please check out my read-only-link.

Looks sharp on every other screen:

But blurry on iPad Air:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I’m wondering if this is due to webflows image compression. What is the size of the image?

Hey @DFink, the image size is 1800x1200px.

I mean the actual file size in kb/mb

Oh, sorry,- the file size is 261,4 kB.

hmm, interesting. Can you try applying the image as a background to a div instead of inline. Webflow does do some image compression on inline images.

Yes that works … strange. So it is the image compression that is causing the problem.

It could be https://webflow.com/feature/responsive-images

Inline images are treated differently than background images. It likely was loading another version of the image that it compressed and somehow squashing it which resulted in aliasing. If it’s working now, roll with it!

Yes, I already thought of something like that. But it´s a bit annoying. Something like that should work proberly…

I can’t really comment about precisely why it was doing that. it could simply be a browser issue completely independent from Webflow. I know iPad pros, which the 120hz refresh rate can make sites look super weird. it may not even be Webflow related. Sorry it’s not behaving as expected.

Okay, that could be too. Anyway- thank you for helping!

Sure, feel free to post again if you run into anything weird like that again. Webflow is sometimes weird and I’ve come across issues like that in my 7 years here. sometimes you just gotta find a workaround. Good luck!

1 Like

btw if you want a more specific description of this bug then it is as follows: responsive images do not work properly inside grid component and often use lower res images instead of the ones that are better fit for the resolution you are viewing them on. This was reported many times since the grid was introduced. Maybe will be fixed in the future.

1 Like

Yes that sounds understandable! Hopefully it will be fixed soon.