[Support request] Hero images on mobile are blurry

[Josue]

Hi guys,

I’m using GP premium + GP pro, and very happy with both by the way! I’m hopping you guys are able to help me with an issue I’m having with the hero images on mobile, they are blurry. The hero images on desktop look fine, but in mobile they are blurry.

At the moment, I’m replacing all the images on my website for images I’m serving from Bunny CDN. My website is quite big, it has about 180 pages (including posts and pages), so you may see some pages that still have images served from WordPress.

Here are some links of pages where you can see that they look all right in desktop but quite blurry on mobile:
https://mayangateway.com/guatemala-getaway/
https://mayangateway.com/easter-antigua-guatemala/
https://mayangateway.com/trek-el-zotz-tikal/
https://mayangateway.com/ecotour-guatemala/

It is a travel agency website, so basically if you go to all the trips in the section of Guatemala you may see the issue on mobile.

Would you guys please help me to solve this issue?

I appreciate in advance your assistance.

[Josue]

Hi again,

Would the best solution be to use different images by implementing advance backgrounds? Let’s say one for Desktop and one for Tablet + Mobile?

If that is the solution, do you guys think that it could create a conflict with the Cache Everything page rule from CloudFlare which is implemented by the WP CloudFlare Super Cache plugin? because the content would be a little different in the mobile than in the desktop versions of the website, so it’d be more dynamic.

[Elvin]

Would the best solution be to use different images by implementing advance backgrounds? Let’s say one for Desktop and one for Tablet + Mobile?

That would be ideal. Because if we use just 1 image for all viewports, if it’s too small then it will be blurred on really large viewports (8k, 4k and 1440p). But if its too large, you’ll get LCP performance flags on mobile.

If that is the solution, do you guys think that it could create a conflict with the Cache Everything page rule from CloudFlare which is implemented by the WP CloudFlare Super Cache plugin? because the content would be a little different in the mobile than in the desktop versions of the website, so it’d be more dynamic.

You can always purge the cache after implementing the change. I believe CloudFlare faithfully caches everything on the page.

[Josue]

Hi Elvin,

Thank you for your answer. That is what I thought, I’m going to implement it.

If I have two different hero images, how do I preload the images in Tablet & mobile though? At the moment I have created Hook Elements for the hero images like this <link rel="preload" as="image" href="imagelink" /> – but is there a way to preload the images I will be using in tablet & mobil?

[Josue]

one more thing please… I just started making two advance backgrounds for desktop and tablet+mobile – but I am not able to see the photos on the preview of tablet and mobile as you may see in this image: https://mayangatewayimages.b-cdn.net/Screen%20Shot%202021-10-21%20at%2011.48.08.png – I can see them only when I save the changes

[David]

Hi there,

Preload supports media queries

<link rel="preload" media="(max-width: 768px)" as="image" href="imagelink-below-769"/>
<link rel="preload" media="(min-width: 769px)" as="image" href="imagelink-above-768"/>

Missing background image in the editor for tablet / mobile views, sometimes i find scrolling up and down or selecting a different block in the editor will force the view to ‘update’ – its a Gutenberg/React thing that is not the best.

[Josue]

I understand David, thank you for your help!

[David]

You’re welcome

[Author]

Posts