Fullscreen Image looks Blurry despite Large Size

  • Unknown's avatar
    tedxiiserpuneclub · Member ·

    I have put up a large image on my landing page. But the image seems to look blurred in spite of me uploading larger sizes. I have tried using 3840×2160 instead of the standard 1920×1080 (which most websites say should cover most devices). But the image still looks blurred in the preview and when I visit the site. My device’s resolution is 1920×1080, but the 3840×2160 still appears blurred.

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Are you referring to the quote on the red background?

    It looks like this is a problem with the core WordPress software itself – it seems there’s an issue with how WordPress calculates the size for images in the image block set to the full-width alignment, resulting in a smaller-than-needed version of the image being loaded, and then stretched.

    For example, if I load your site on my Macbook, it loads a 640px-wide version of the image, and on my 27 inch monitor it only loads a 1024px-wide version, even though the screen in both cases is much wider than that.

    It looks like the team over on WordPress.org has been trying to figure this out for a while now, but they still don’t have a fix, and the latest comment on that thread appears to indicate that this might be a problem with how browsers themselves handle responsive images, so it doesn’t look like something that will be fixed soon:

    https://core.trac.wordpress.org/ticket/45407

    One thing you can try is using a JPEG/JPG image instead of a PNG – PNG is generally better for the type of image you’re using here, but a compressed JPEG might resize better.

    Or otherwise, you should be able to achieve the same effect without using an image at all. If you use the Pullquote block instead, also full-width alignment, the Style setting on Solid Color, and then specify the text and background colors you want, you should be able to get something very similar.

  • Unknown's avatar
    tedxiiserpuneclub · Member ·

    Oh! Thanks a lot! Trying with JPEG doesn’t give any better results though. I’ll use your alternative with the pull-quote at least till WordPress devs fix it.

  • The topic ‘Fullscreen Image looks Blurry despite Large Size’ is closed to new replies.