[Support request] Blurry images

[Bob]

I’m encountering an issue with image quality that’s probably a settings issue as it was with another one of my sites some time back, but I just can’t figure it out.

The images is the logo on the home page at https://www.solecistband.com

This image is 1024×1025 and I have it set to 50% so it should be displaying at 512×512. On ios both iphone and ipad pro, this looks fantastic but on a PC with Edge (new edge) and chrome (I’ve only tested with these two browsers), the image is fuzzy. I’m certain it’s not my display/monitor because the original image is crisp.

Here’s an example of clear and fuzzy images.

Clear

Fuzzy

[Leo]

Hi there,

I checked using Chrome and it looks pretty clear to me:
https://www.screencast.com/t/HucBPYjdR0

The best solution to have a crisp logo is to use an SVG file type.

[Bob]

Thanks Leo. The one you did the screen shot of does look great. It’s the logo I posted the screen shots of in my first post that’s the problem.

I’ll test out SVG later.

[Leo]

Looks like the image is lazy loaded.

Have you disabled that to test?

[Bob]

I don’t know what that is but will look through options in WordPress/GP.

[Leo]

GP doesn’t have any lazyloading options.

I’d assume it’s done by LiteSpeed caching you are using.

[Bob]

Lazy loading is off in Litespeed. I found an option for optimizing images and turned it off and cleared the cache but that doesn’t seem to have solved it.

I’ll keep searching but neither Jetpack or Litespeed are set to do lazy loads.

Edit: I completely disabled Litspeed, cleared my browser cache but the image is still fuzzy.

[Leo]

I’m still seeing the image being lazyloaded:
https://www.screencast.com/t/NOnZJjMgTi3

The theme itself doesn’t have the ability to change the image quality at all.

Do you see if the same issue if you activate a twenty series WP theme to test?

[Bob]

I just loaded twenty twenty – still shows lazy load. Is that something build into WP now?

This site is very minimal. Below are all of the plugins I’m running and I’ve validated lazy load isn’t enabled in Jetpack.

[Bob]

Looks like lazy load is by default in WP.

https://wpcodeus.com/disable-lazy-loading-in-wordpress-5-5/

[David]

Hi there,

yes that is the browser lazy loading function that WP now includes. But that should not affect its quality.

WP by default does compress images on upload. This post explains how you can disable that function:

https://www.wpbeginner.com/wp-tutorials/how-to-increase-or-decrease-wordpress-jpeg-image-compression/

[Bob]

Thanks David.

Is there a way to use the Elements feature in GP to add this instead of modifying the theme’s code?

add_filter(‘jpeg_quality’, function($arg){return 100;});

Also – with the compression, would I also see this when editing the page? When I’m editing the page, the preview is excellent without fuzziness in the image. It’s only when viewing on the PC with browsers that’s an issue. iPhone and iPad pro are also very crisp (good). Wouldn’t the issue be across the board if it was because the image was being dumbed down upon upload?

[Leo]

That code is a filter so it needs to be added using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

You won’t find that in the theme code either as it’s a WordPress thing.

Also – with the compression, would I also see this when editing the page? When I’m editing the page, the preview is excellent without fuzziness in the image. It’s only when viewing on the PC with browsers that’s an issue. iPhone and iPad pro are also very crisp (good). Wouldn’t the issue be across the board if it was because the image was being dumbed down upon upload?

Do you see this issue when using a twenty series WP theme?

[Bob]

Thanks and yes, it occurs in the Twenty series theme as well.

[Leo]

That case I would recommend checking with the WordPress support team and see if they can provide a clear explanation of how this works.

[Author]

Posts