WebP Image replacement

Does this function detect whether the browser is compatible with the webp format or not and show the image in the correct format that it can recognize?

Yes, but this detection is a bit faulty, but works in most cases.

2. – Does it apply to all images, including those that make up the active theme, or only those published within the published entries?

The replace function applies to all images in HTML Output. The filter searches for <img> tag in HTML code and replaces .jpg to .jpg.webp or .png to .png.webp or any other supported media type if the browser supports webp. Otherwise the original image is used.

Does this answer your Questions?

• This reply was modified 1 year, 10 months ago by serpentdriver.
• This reply was modified 1 year, 10 months ago by serpentdriver.

Not entirely. When I run PageSpeed Insights, I get the message “Serve images in next-gen formats” with some images from the WordPress theme. Does this mean that it is not working properly by replacing them for Insights or for all cases in general? When I inspect with Google Chrome, I can’t find the webp version of those images. I am attaching a screenshot of the Insights notice so you can identify which images I am referring to.

Not entirely. When I run PageSpeed Insights, I get the message “Serve images in next-gen formats” with some images from the WordPress theme. Does this mean that it is not working properly by replacing them for Insights or for all cases in general?

This can mean that not all images have been converted in webp format yet, so before you make a new test verify if all images have been converted. You can see the status on dashboard of the cache plugin.

As you can see in my first message, I have posted a screenshot in which the plugin tells me that it has converted all the images. The only thing I can think of is that either Litespeed does not convert the images of the theme, or it is not able to serve them instead of the originals. In case this option is intended to have this function, can you confirm to me that it does?

There are cases where no webp images are delivered. This includes that if the original image is smaller than the webp version, then the original image will be used. If a browser does not support webp images, then the original image will also be used. This affects the Safari browser on iphone if its version is less than or equal to 13.

Read also this:

https://docs.litespeedtech.com/lscache/lscwp/ts-media/#webp-not-loading

https://docs.litespeedtech.com/lscache/lscwp/ts-media/#some-webp-load-some-do-not

https://docs.litespeedtech.com/lscache/lscwp/ts-media/#webp-images-not-generated

• This reply was modified 1 year, 10 months ago by serpentdriver.

Reading what you have sent me, I have seen the following:

“The plugin can only perform WebP replacement on the HTML <img> tag. If the image is loaded via CSS, JS, or some other means, LSCache may not be able to correctly insert the WebP file.”

If I’m not mistaken, the images of the theme are formatted via CSS, which would fall into the category that this paragraph mentions as probably not loadable.

Thinking about it, would it be a good and viable option to use Litespeed together with WebP Express, which mentions that it does convert theme images? In its FAQ, it talks about creating two versions of each cached page, but I don’t quite understand it. If it is possible to do it by combining both plugins or if it requires some more complicated configuration. PS: WebP have the problem that doesnt convert gif archives

I am on a Litespeed server

You do not have to do anything special for it to work on a Litespeed server. You should be able to use WebP Express in any operation mode. For best performance, I however recommend that use the LiteSpeed Cache plugin for page caching.

LiteSpeed Cache can be set up to maintain separate page caches for browsers that supports webp and browsers that don’t. Through this functionality it is possible to use ?Alter HTML? with the option ?Replace image URLs? and ?Only do the replacements in webp enabled browsers? mode.

The setup was kindly shared and explained in detail by @ribeiroeder here https://github.com/rosell-dk/webp-express/issues/433

Formatting using CSS is irrelevant and therefore has no influence on whether webp images are displayed. However, the LiteSpeed cache plugin requires the correct file extension, because the webp replacement in the HTML code changes the file extension from e.g. image.jpg to image.jpg.webp. If a plugin for providing webp images only changes the MIME type via .htaccess, then this plugin is incompatible with the webp replacement function of the LiteSpeed cache plugin.

In order for a plugin from a 3rd party provider to work together successfully, it must first be ensured that it has a corresponding filter function that works in the same way as the filter of the cache plugin. In addition, this plugin must also be able to change the file extension in the HTML code. And finally, the correct cache vary must also be able to be set in the .htaccess. According to my findings, the WebP Express plugin does not meet these requirements, which is also the reason for the problems. You should therefore only use the webp replacement function of the LiteSPeed cache plugin. Any other support when using another plugin for webp use cannot be guaranteed.

Currently, I am only using Litespeed. The WebP Express option is just an alternative that was suggested to me when I didn’t get the desired results. If you could visit my website https://www.fotov60.com and tell me the formats in which the images appear to you, I would appreciate it. That way, I could check if the Litespeed replacement function is working or not.

Taking a look at the screenshots from my first message, is the function configured correctly?

The LiteSpeed webp replacement function works as expected. However, you must not expect that another plugin that has the designation “webp” in the plugin name is automatically compatible with the LiteSpeed cache plugin. In this specific case, this does not seem to be the case, so I can only recommend that you only use the webp replacement function and no other plugin for webp. In addition, it is difficult or impossible to provide support when using several plugins.

@serpentdriver I insist that I am not using any other plugin at the same time. I only mentioned it as an option. Litespeed is the only plugin that is attempting to perform that function on my website, which is why I come here seeking help since I am not getting the expected results.

Even the imaginary thought of using another plugin as an option is out of the question. I can only tell you that the webp replacement of the LiteSpeed cache plugin works without any problems. Otherwise, other users would have complained about a problem with it several times. If it doesn’t work for you, there must be reasons, because a problem doesn’t arise without a reason. A not uncommon problem is that plugin programmers do not pay attention to the fact that not all files and changes are completely removed when deactivating or uninstalling a plugin. This is the typical problem with 9 out of 10 plugins and therefore regularly causes conflicts and problems. This circumstance makes it difficult to find out the cause of the problems in problem cases like yours.

Why do you mention problem cases like mine? I haven’t used any other plugin with that function, so how could an uninstalled plugin that I haven’t used cause a conflict?In my message, I asked you if you could review the screenshots to see how I have it configured and if you could visit the website to check what format appears to you, but you only mentioned that the webp replacement of the LiteSpeed cache plugin works without problems. Could you do that so we can detect where the problem is?

Well, I think I have found the reason why it may not be working. For example, the sidebar is called (if I’m not mistaken) by this code

 <div id="container"> <div id="sidebar" role="complementary">

which refers to a file in a CSS and finally leads to this file https://www.fotov60.com/wp-content/themes/greyzed/images/sidebar-bg.jpg. And by going through all this, I imagine that the function of Litespeed is not able to replace it. Could I be right?

You thought in the wrong direction, but indirectly gave a hint. The images in the sidebar are loaded via Javascript. If images are loaded like this, no replacement and therefore no webp images can be loaded. However, your other images will load correctly, i.e. *.jpg.webp. Use your browser’s developer console to see this. So I see no problem with you. The webp images are loaded correctly and all the excitement was in vain.