LiteSpeed Cache Plugin WebP Issues

[rafalkukla]

Hi guys,

I need some help please.

LiteSpeed server has ability to optimise images and add webP version with htaccess rewrite rules.

It works with Pro when page is created with Gutenberg editor when you add some images, or on blog post when feature image is added, but it won’t re-write images when page is created with Pro and images added.

It’s probably because the way Pro adds images attributes?

LiteSpeed server has this option:
Specify which element attributes will be replaced with WebP. Only attributes listed here will be replaced.
Use the format element.attribute or .attribute (element is optional). One per line.

By default this is the list that is added

img.src
div.data-thumb
img.data-src
div.data-large_image
img.retina_logo_url

How would you configure this to match Pro image attributes?

I’ve tried many different setups like this one:
background-image.url

Any help is much appreciated.

[rafalkukla]

I also added image manually with custom CSS

$el .x-bg {
background-image: url(https://URL.png); background-repeat: no-repeat; background-position: center; background-size: 50%;"
}

But no result.

[friech]

Hi @rafalkukla,

Thank you for writing in, the images in Cornerstone is output in standard way, img element and src attribute. and background image as background-image: url() so I’m sure why LiteSpeed cant see that, please try purging all caching features you might have on your site, including the LiteSpeed Cache.

Please follow this thread, this might help

• https://wordpress.org/support/topic/webp-background-image-replacement/
• https://wordpress.org/support/topic/webp-support-for-template-images/

Cheers!

[rafalkukla]

Hi Friech,

Yeah it’s strange one, the Blog page, that has featured image rewrite ok with webp version, but other images, including logos, or footer images, background won’t re-write.

The webP version is optimised and accessible by URL if you add .jpg.webp at the end of any image, so I know its there, but the LiteSpeed just for some reason is not able to re-write jpegs in Pro

[rafalkukla]

Cache cleared, purged, CDN disabled.

[christian]

Hey @rafalkukla,

The best people who could answer your question are the LightSpeed devs. Please have them look at a page you’ve created with Pro and they might have insights as to why they’re WebP conversion doesn’t work.

I personally don’t know how LightSpeed Cache works but I believe its image optimization feature should work like the rest of the image optimization plugins. They convert images to WebP out of the box.

Thank you for understanding.

[rafalkukla]

Hi @christian @friech Thanks, I’m getting closer to figure this bug out. I understand this is out of scope of your support, but I thought we can exchange ideas, and maybe someone else find this useful.

Firstly, I found that my custom code that I had in header.php was preventing from rewrite, I was playing with layout option of the page with no header, and all of the sudden, webP appeared on my footer and rest of the test page.

But then I’m left with half of the images that are re-write as WebP and others won’t. So this lead me to believe this may be related to how WordPress or your theme import images.

For example, after disabling Wordpress re-sizing images and putting 0, the imported image is still re-sized in different sizes, I guess but your theme?

The Litespeed then it will re-write the other copies of the images with -1000x980.jpg instead of originals.

Can you confirm if your Theme resizes images upon adding them to WordPress?

[update]

It turns out, if original image is well optimised, and smaller then webP version, LiteSpeed won’t show and re-write. After looking into debug logs, and some forums comments, this I believe to be true, and it sort of make sense.

Thanks

[christian]

We’re glad that you’ve discovered what’s causing the issue, @rafalkukla.

I’d just clarify that our theme does not resize images.

Thanks.