[Support request] Hero images on mobile are blurry

Home Forums Support [Support request] Hero images on mobile are blurry

Home Forums Support Hero images on mobile are blurry

  • This topic has 7 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1969850
    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.

    #1969952
    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.

    #1970247
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1970434
    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?

    #1970462
    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

    #1970490
    David
    Staff
    Customer Support

    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.

    #1970533
    Josue

    I understand David, thank you for your help!

    #1970550
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.