[Support request] Featured image on home page blurry

[Bob]

The featured image on my home page looks a bit soft/blurry.

When you click on it and go the the original image it looks sharp and clear.

How do I get it to look sharp and clear on my home page?

I’m wondering if the theme automatically compresses it… or maybe one of my plugins is doing it. But I can’t see how I can exclude that one image through one of my plugins.

Can you help with this?

Website: https://adventuretravelplanning.com/

[Elvin]

When you click on it and go the the original image it looks sharp and clear.

This happens because the image is a link to itself. Is this on purpose?

As for the image: The image being served is of low resolution or smaller size. Likely because of the size picked on the Image Block.

If I may suggest: Consider changing the way the page hero is served.

Try our recommended way of doing a page hero –

[Bob]

OK, thanks. Things are working right now.

One more thing… I just noticed that when I look at the mobile version of my website and tap on the Adventure Travel Planning logo (font version) at the top, I go to a page full of gibberish and symbols.

Why is that happening now. It doesn’t happen when clicking on that same thing on desktop… only when tapping there on the mobile version.

https://adventuretravelplanning.com/

Please advise.

[Elvin]

I believe you’re pertaining to this?
https://share.getcloudapp.com/xQujAjQv

It also happens on desktop. That’s usually caused by compression features of a optimization plugin. One of your plugins likely has one enabled.

[Bob]

Yes… that garbage took over my home page.

This never happened before. It started just now when I changed that image on that specific page from “Large” to “Full Size.” Then things broke.

At first, the “Hero” image looked great… sharp and clear like I wanted it too. Then a few minutes later all that garbage took over. And only on my home page where I changed the size of the image. The other pages appear to be fine.

[UPDATE: the blog page is broken as well. but other pages are working]

Why would the home page break when I just change that first image from large to full size?

And how can I fix this now?

Please advise.

[Elvin]

It happens randomly.

Can you try checking your litespeed cache if gzip compression is enabled? disabling it should fix the issue.

I think we should address this first. 😀

It’s quite difficult to inspect the page properly when we get the same gibberish view of the site.

[Bob]

I’m having trouble finding where to enable/disable Gzip in the Litespeed plugin.

I’ve Googled it and haven’t seen where to change that setting.

I’ll keep looking.

[Bob]

I deactivated the Warp “iMagick – Image Compressor” plugin and now my website appears to be working on my mobile phone, but on desktop the homepage and blog are messed up.

When I’m logged into my website, my home page and blog look fine to me. When I log out they turn back to garbage.

I can’t find the gzip setting in Litespeed, so I don’t know what to do about that.

Like you said, this is random. Some pages work on mobile, some pages don’t. And some pages work on desktop, and some don’t. And it’s not the same pages that work/don’t work between mobile and desktop.

It’s hard to believe that making one simple change from going from using a “large” image to a “full size” image in the settings could break my site like this.

I certainly didn’t see that coming.

This is extremely frustrating and time consuming.

[Elvin]

You can disable all the optimization plugins for now so we can focus on the blurry Hero image.

Once we fix the image issue, you can focus on the compression issue from the plugins. For this one you can ask the plugin developers for support for disabling some of they features.

[Bob]

I’ve now disabled the following two in addition to the iMagick – Image Compressor plugin.

A2 Optimized WP
LiteSpeed Cache

I don’t see any other optimization plugins.

Now I’ll clear my caches and see what happens.

OK… As far as I can tell, after deactivating those three optimization plugins, my website appears to be working fine for me at this very moment.

Does it work for you when you click through to the blog and other pages?

And I have that home page image set to full size, so I think it’s about as sharp and clear as it’s going to get.

But as you can imagine, my website is slower as you would expect according to Google page speeds.

So, what’s the next thing to do to keep my website working and optimized for speed?

By the way, getting any help from the plugin developers is a waste of time. They aren’t responsive.

Please advise.

[Elvin]

OK… As far as I can tell, after deactivating those three optimization plugins, my website appears to be working fine for me at this very moment.

I don’t see the gibberish content issue caused by compression now.

As for the optimization issues, I’d suggest changing to a plugin with better support and clearer documentation.

I don’t know about A2 Optimized WP plugin but I think we shouldn’t dismiss Litespeed cache support responsiveness to support topics just yet.

I’ve checked the activity in their support forum and it seemed fine. The support team members reply within 24 hours – https://wordpress.org/support/plugin/litespeed-cache/

It’s worst asking them what may be the settings that causes the site to go haywire.

Note: As much as we’d like to help regarding this issue, it’s really out of the theme’s scope as it’s a third-party plugin. It’s best if the plugin developer/support is asked about their plugin as they know more about its ins and outs.

As for specifics in optimization:

Consider using WP Rocket for the CSS and JS optimization and let another plugin do the image optimization.

Try Smush, Optimole or Imagify. Compress images to a smaller file (you have to fine tune this, too much will cause lossy, blurred image), try converting it into webp and consider serving the images through a CDN.

[Bob]

OK, thanks Elvin.

I appreciate it.

[Elvin]

No problem. 😀

[Author]

Posts