WebP Image replacement

Resolved fotov60
(@fotov60)

3 years ago

Hello everyone, I have configured Litespeed with the Image WebP replacement option enabled and I have used image conversion to webp, but I have several doubts.

1. – 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?

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

I attach screenshots of how I have it configured in case it is helpful.

The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 39 total)

← 1 2 3 →

Thread Starter fotov60
(@fotov60)

3 years ago

Ok, so we have identified the problem. Is there anything the Litespeed plugin can do in this case? What would you recommend if I want to ensure that those images are also changed?

serpentdriver
(@serpentdriver)

3 years ago

Ok, so we have identified the problem.

There is and never was a problem.

Is there anything the Litespeed plugin can do in this case?

No.

What would you recommend if I want to ensure that those images are also changed?

Loading images via Javascript is generally not a good idea. So the recommendation is to find an alternative way to load these images normally. But that’s your job.

Thread Starter fotov60
(@fotov60)

3 years ago

No.

Would it be possible for Litespeed to include some sort of feature that can recognize uploaded images?

Loading images via Javascript is generally not a good idea. So the recommendation is to find an alternative way to load these images normally. But that’s your job.

Perhaps it’s not the best approach, but it’s the one I have come across in the theme I use. I didn’t design it myself. If I had more knowledge, I could possibly make this and some other adjustments that I have been trying to make for a while. I really like the aesthetics of this theme and want to keep it, but it’s somewhat outdated and requires a lot of work under the hood.
serpentdriver
(@serpentdriver)

3 years ago
Add this to the very top of the .htaccess outside of LiteSpeed markers. This is magic code…. 🙂
```
<IfModule LiteSpeed>
RewriteCond %{HTTP_ACCEPT} “image/webp” 
RewriteCond %{REQUEST_FILENAME}.webp -f 
RewriteRule ^(.*).(jpg|jpeg|png|gif) $1.$2.webp [T=image/webp,L]
</IfModule>
```
Thread Starter fotov60
(@fotov60)

3 years ago
Thank you for the code, but I think I’m doing something wrong because the images are still appearing as jpg. I’ll copy the beginning of my .htaccess file to confirm if that’s where the code should go.
```
# BEGIN NinjaFirewall
<IfModule Litespeed>
	php_value auto_prepend_file "/home/xxxxxxx/xxxxxx/xxxxxxx/xxxxxx/xxxxxx.php"
</IfModule>
# END NinjaFirewall

<IfModule LiteSpeed>
	<IfModule mod_rewrite.c>
		RewriteCond %{HTTP_ACCEPT} "image/webp"
		RewriteCond %{REQUEST_FILENAME}.webp -f
		RewriteRule ^(.*).(jpg|jpeg|png|gif)$ $1.$2.webp [T=image/webp,L]
	</IfModule>
</IfModule>

# BEGIN LSCACHE
## LITESPEED WP CACHE PLUGIN - Do not edit the contents of this block! ##
<IfModule LiteSpeed>
	RewriteEngine on
	CacheLookup on
	RewriteRule .* - [E=Cache-Control:no-autoflush]
	RewriteRule \.litespeed_conf\.dat - [F,L]
	
### marker MOBILE start ###
	RewriteCond %{HTTP_USER_AGENT} Mobile|Android|Silk/|Kindle|BlackBerry|Opera\ Mini|Opera\ Mobi [NC]

.....etc...etc
```
serpentdriver
(@serpentdriver)

3 years ago

Thank you for the code, but I think I’m doing something wrong because the images are still appearing as jpg.

No, you are doing nothing wrong. It’s the code. It is magic. 🙂

This code leaves the file extension unchanged, but actually loads a webp image if the browser supports webp images. Paste the code back into the .htacces and I’ll show you the magic effect.

Thread Starter fotov60
(@fotov60)

3 years ago

The code is in the .htaccess file, but if you look at the analysis from PageSpeed Insights, it still says that the images are not served in next-generation format. https://pagespeed.web.dev/analysis/https-www-fotov60-com/k4xka8ug7o?form_factor=mobile

serpentdriver
(@serpentdriver)

3 years ago

If an webp image doesn’t exist the original image is used, so you must enable webp Replacement function.

Thread Starter fotov60
(@fotov60)

3 years ago

The option is enabled, but in addition, I manually converted all the images in that folder, so I’m certain that there is an image available with that name and with the .webp extension.
serpentdriver
(@serpentdriver)

3 years ago
How did you convert the images? *.webp or *.jpg.web?
- This reply was modified 3 years ago by serpentdriver.
Thread Starter fotov60
(@fotov60)

3 years ago

*.webp, why?

serpentdriver
(@serpentdriver)

3 years ago

Because the cache plugin and the code from above expects *.jpg.webp

Thread Starter fotov60
(@fotov60)

3 years ago

So, if I rename all the files that I have converted to *.webp to *.jpg.webp, should it work? Is it necessary for the conversion to be done by Litespeed, or are manual conversions in Photoshop also acceptable if renamed? Or could there be any format conflicts in the name or otherwise?

serpentdriver
(@serpentdriver)

3 years ago

Use whatever you like to rename the image extension.

bandreas3
(@bandreas3)

3 years ago

We were looking into this issue not long ago and ultimately gave up due to the same condescension by their support. Good luck in your quest, as we have not seen a webp replacement either.

Viewing 15 replies - 16 through 30 (of 39 total)

← 1 2 3 →

The topic ‘WebP Image replacement’ is closed to new replies.