WP-Optimize does not serve webp images

Can you add the following to your .htaccesss.

This snippet detects if the browser supports WebP images and then serves a .webp image instead of jpg/png if a .webp file is available at the same location as the supplied jpg/png/gif

<IfModule mod_rewrite.c>

  RewriteEngine On

  # Check if browser supports WebP images

  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists

  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead

  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]

</IfModule>

<IfModule mod_headers.c>

  # Vary: Accept for all the requests to jpeg, png and gif

  Header append Vary Accept env=REQUEST_image

</IfModule>

<IfModule mod_mime.c>

  AddType image/webp .webp

</IfModule>

Thank you for your reply.

I added your snippet to my .htaccess (root) but it doesn’t seem to work.

I uploaded a new image and added it to the test page https://www.vinicartasegna.it/prova/ . The WebP file il available https://www.vinicartasegna.it/wp-content/uploads/2023/05/virginia.jpeg.webp but it doesn’t be served .

If it helps, inside the wp-content/uploads directory there’s a .htaccess file with this code:

# BEGIN Register webp mime type
<IfModule mod_mime.c>
	AddType image/webp .webp
</IfModule>
# END Register webp mime type
# BEGIN WP-Optimize WebP Rules
<IfModule mod_rewrite.c>
	RewriteEngine On
	
# Redirect to existing converted image in same dir (if browser supports webp)
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
	RewriteCond %1%2\.webp -f
	RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1%2\.webp [T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]
	
# Make sure that browsers which does not support webp also gets the Vary:Accept header
# when requesting images that would be redirected to webp on browsers that does.
	<IfModule mod_headers.c>
		<FilesMatch "(?i)\.(jpe?g|png)$">
			Header append "Vary" "Accept"
		</FilesMatch>
	</IfModule>
	
	</IfModule>

# Rules for handling requests for webp images
# ---------------------------------------------
	
# Set Vary:Accept header if we came here by way of our redirect, which set the ADDVARY environment variable
# The purpose is to make proxies and CDNs aware that the response varies with the Accept header
	<IfModule mod_headers.c>
	<IfModule mod_setenvif.c>
# Apache appends "REDIRECT_" in front of the environment variables defined in mod_rewrite, but LiteSpeed does not
# So, the next lines are for Apache, in order to set environment variables without "REDIRECT_"
		SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
		SetEnvIf REDIRECT_ADDVARY 1 ADDVARY=1
		
		Header append "Vary" "Accept" env=ADDVARY
		
# Set X-WPO-WebP header for diagnose purposes
		Header set "X-WPO-WebP" "Redirected directly to existing webp" env=EXISTING
	</IfModule>
</IfModule>
# END WP-Optimize WebP Rules

Hi,

The snippet I gave you does the same as the one in the .htaccess file that you have copied above so you can remove the snippet I gave you.

Can you check if mod_rewrite is enabled on your hosting?

As we have no heard from you in a while, we are marking this thread as resolved.

I’m sorry, I’ve been waiting for the response from the hosting provider: mod_rewrite is enabled.

WebP images are not shown yet

• This reply was modified 1 year, 6 months ago by lsponza.