Redirection by url?

Hello,

I don’t know what wrong.

I have a website with webp express installed.

I have one file on this url: https://www.lereveilsocial.com/wp-content/uploads/talenti-digitali-mini.png

If I open this url directly in the browser, the server to be redirect me to https://www.lereveilsocial.com/wp-content/webp-express/webp-images/uploads/talenti-digitali-mini.png.webp ?

Because it not work… But maybe I don’t understand how the plugin work.

This is the System Info:

Self testing
System info:
- PHP version: 8.2.6
- OS: Linux
- Server software: Apache
- Document Root status: Available and its "realpath" is available too. Can be used for structuring cache dir.
- Document Root: /var/www/vhosts/lereveilsocial.com/httpdocs
- Document Root: Available and its "realpath" is available too. Can be used for structuring cache dir.
- Apache module "mod_rewrite" enabled?: could not be determined
- Apache module "mod_headers" enabled?: could not be determined
Wordpress info:
- Version: 6.2.2
- Multisite?: no
- Is wp-content moved?: no
- Is uploads moved out of wp-content?: no
- Is plugins moved out of wp-content?: no

Image roots (absolute paths)
uploads: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/uploads
themes: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/themes
plugins: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/plugins
wp-content: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content
index: /var/www/vhosts/lereveilsocial.com/httpdocs
Image roots (relative to document root)
uploads: wp-content/uploads
themes: wp-content/themes
plugins: wp-content/plugins
wp-content: wp-content
index: .
Image roots (URLs)
uploads: https://www.lereveilsocial.com/wp-content/uploads
themes: https://www.lereveilsocial.com/wp-content/themes
plugins: https://www.lereveilsocial.com/wp-content/plugins
wp-content: https://www.lereveilsocial.com/wp-content
index: https://www.lereveilsocial.com
WebP Express configuration info:
- Destination folder: separate
- Destination extension: append
- Destination structure: image-roots
(To view all configuration, take a look at the config file, which is stored in /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/config/config.json)
Live tests of .htaccess capabilities / system configuration:
Unless noted otherwise, the tests are run in wp-content/webp-express/htaccess-capability-tester.
WebPExpress currently treats the results as they neccessarily applies to all scopes (upload, themes, etc),
but note that a server might be configured to have mod_rewrite disallowed in some folders and allowed in others.
- .htaccess files enabled?: yes
- mod_rewrite working?: yes
- mod_headers loaded?: yes
- mod_headers working (header set): yes
- passing variables from .htaccess to PHP script through environment variable working?: yes
- Can run php test file in plugins/webp-express/wod/ ?: yes
- Can run php test file in plugins/webp-express/wod2/ ?: yes
- Directives for granting access like its done in wod/.htaccess allowed?: yes
.htaccess files that WebP Express have placed rules in the following files:
- /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/uploads/.htaccess
- /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/themes/.htaccess
- /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images/.htaccess
WebP rules in uploads:
File: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/uploads/.htaccess

# Rules for handling requests for source images
# ---------------------------------------------

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Escape hatch #1: Adding ?dontreplace to an url can be used to bypass redirection
  RewriteCond %{QUERY_STRING} dontreplace$
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteRule . - [L]

  # Escape hatch #2: Placing an empty file in the same folder as the jpeg/png which has same file name, but ".dontreplace" appended will bypass redirection
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %1%2\.dontreplace -f
  RewriteRule . - [L]

  # Deprecated escape hatch: Adding ?original to an url can be used to bypass redirection
  RewriteCond %{QUERY_STRING} original$
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteRule . - [L]

  # Deprecated escape hatch: Placing an empty file in the same folder as the jpeg/png which has same file name, but ".do-not-convert" appended will bypass redirection
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %1%2\.do-not-convert -f
  RewriteRule . - [L]

  # Avoid redirecting to webp files that are bigger than the original
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME} (?i)(/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/uploads/)(.*)(\.jpe?g|\.png)$
  RewriteCond /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images-bigger-than-source/uploads/%2%3.webp -f
  RewriteRule . - [L]

  # Redirect to existing converted image in cache-dir (if browser supports webp)
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME} (?i)(/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/uploads/)(.*)(\.jpe?g|\.png)$
  RewriteCond /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images/uploads/%2%3.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ /wp-content/webp-express/webp-images/uploads/%2%3\.webp [T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

  # Redirect images to webp-on-demand.php (if browser supports webp)
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
  RewriteRule (?i).*$ /wp-content/plugins/webp-express/wod/webp-on-demand.php [E=WE_WP_CONTENT_REL_TO_WE_PLUGIN_DIR:../../,E=WE_SOURCE_REL_HTACCESS:$0,E=WE_HTACCESS_ID:uploads,NC,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>

WebP rules in themes:
File: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/themes/.htaccess

# Rules for handling requests for source images
# ---------------------------------------------

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Escape hatch #1: Adding ?dontreplace to an url can be used to bypass redirection
  RewriteCond %{QUERY_STRING} dontreplace$
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteRule . - [L]

  # Escape hatch #2: Placing an empty file in the same folder as the jpeg/png which has same file name, but ".dontreplace" appended will bypass redirection
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %1%2\.dontreplace -f
  RewriteRule . - [L]

  # Deprecated escape hatch: Adding ?original to an url can be used to bypass redirection
  RewriteCond %{QUERY_STRING} original$
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteRule . - [L]

  # Deprecated escape hatch: Placing an empty file in the same folder as the jpeg/png which has same file name, but ".do-not-convert" appended will bypass redirection
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %1%2\.do-not-convert -f
  RewriteRule . - [L]

  # Avoid redirecting to webp files that are bigger than the original
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME} (?i)(/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/themes/)(.*)(\.jpe?g|\.png)$
  RewriteCond /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images-bigger-than-source/themes/%2%3.webp -f
  RewriteRule . - [L]

  # Redirect to existing converted image in cache-dir (if browser supports webp)
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME} (?i)(/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/themes/)(.*)(\.jpe?g|\.png)$
  RewriteCond /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images/themes/%2%3.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ /wp-content/webp-express/webp-images/themes/%2%3\.webp [T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

  # Redirect images to webp-on-demand.php (if browser supports webp)
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME} (?i)(.*)(\.jpe?g|\.png)$
  RewriteRule (?i).*$ /wp-content/plugins/webp-express/wod/webp-on-demand.php [E=WE_WP_CONTENT_REL_TO_WE_PLUGIN_DIR:../../,E=WE_SOURCE_REL_HTACCESS:$0,E=WE_HTACCESS_ID:themes,NC,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>

WebP rules in webp image cache:
File: /var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images/.htaccess


# Rules for handling requests for webp images
# ---------------------------------------------

# WebP Realizer: Redirect non-existing webp images to webp-realizer.php, which will locate corresponding jpg/png, 
# convert it, and deliver the freshly converted webp
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule (?i).*(\.jpe?g|\.png)\.webp$ /wp-content/plugins/webp-express/wod/webp-realizer.php [E=WE_WP_CONTENT_REL_TO_WE_PLUGIN_DIR:../../,E=WE_DESTINATION_REL_HTACCESS:$0,E=WE_HTACCESS_ID:cache,NC,L]
</IfModule>

# 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-WebP-Express header for diagnose purposes
    Header set "X-WebP-Express" "Redirected directly to existing webp" env=EXISTING
  </IfModule>
</IfModule>

# Register webp mime type 
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Enable direct redirection to existing converted images:

Testing redirection to existing webp
uploads
Copying files for testing
Copying JPEG to uploads folder (webp-express-test-images/oDzGxH.JPEG). ok
We now have a jpeg stored here:
/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/uploads/webp-express-test-images/oDzGxH.JPEG

Copying dummy webp to the cache root for uploads. ok
We now have a webp file stored here:
/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images/uploads/webp-express-test-images/oDzGxH.JPEG.webp

Lets check that browsers supporting webp gets the WEBP when the JPEG is requested
Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
Request URL: https://www.lereveilsocial.com/wp-content/uploads/webp-express-test-images/oDzGxH.JPEG
Response: 200 OK
Response headers:
- server: nginx
- date: Tue, 13 Jun 2023 16:37:45 GMT
- content-type: image/webp
- content-length: 6964
- vary: User-Agent,Accept
- last-modified: Tue, 13 Jun 2023 16:37:45 GMT
- etag: W/"1b34-5fe057473dbbe"
- x-webp-express: Redirected directly to existing webp
- x-cache-status: MISS
- x-powered-by: PleskLin
- accept-ranges: bytes

Alrighty. We got a webp. Just what we wanted. Great!
Notice: No cache-control or expires header has been set. It is recommended to do so. Set it nice and big once you are sure the webps have a good quality/compression compromise.

Now lets check that browsers not supporting webp gets the JPEG
Making a HTTP request for the test image (without setting the "Accept" header)
Request URL: https://www.lereveilsocial.com/wp-content/uploads/webp-express-test-images/oDzGxH.JPEG
Response: 200 OK
Response headers:
- server: nginx
- date: Tue, 13 Jun 2023 16:37:45 GMT
- content-type: image/jpeg
- content-length: 3195
- last-modified: Tue, 13 Jun 2023 16:37:45 GMT
- cache-control: max-age=2592000
- expires: Thu, 13 Jul 2023 16:37:45 GMT
- etag: "64889b59-c7b"
- x-cache-status: MISS
- x-powered-by: PleskLin
- accept-ranges: bytes

Alrighty. We got the jpeg. Great!.
However, we did not receive a Vary:Accept header. That header should be set in order to tell proxies that the response varies depending on the Accept header. Otherwise browsers not supporting webp might get a cached webp and vice versa.
Too technical?
Here is an explanation of what this means: Some companies have set up proxies which caches resources. This way, if employee A have downloaded an image and employee B requests it, the proxy can deliver the image directly to employee B without needing to send a request to the server. This is clever, but it can go wrong. If B for some reason is meant to get another image than A, it will not happen, as the server does not get the request. That is where the Vary header comes in. It tells the proxy that the image is dependent upon something. In this case, we need to signal proxies that the image depends upon the "Accept" header, as this is the one browsers use to tell the server if it accepts webps or not. We do that using the "Vary:Accept" header. However - it is missing :( Which means that employees at (larger) companies might experience problems if some are using browsers that supports webp and others are using browsers that does not. Worst case is that the request to an image is done with a browser that supports webp, as this will cache the webp in the proxy, and deliver webps to all employees - even to those who uses browsers that does not support webp. These employees will get blank images.
So, what should you do? I would recommend that you either try to fix the problem with the missing Vary:Accept header or change to "CDN friendly" mode.
Deleting test images
themes
Copying files for testing
Copying JPEG to themes folder (webp-express-test-images/XKDTWl.JPEG). ok
We now have a jpeg stored here:
/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/themes/webp-express-test-images/XKDTWl.JPEG

Copying dummy webp to the cache root for themes. ok
We now have a webp file stored here:
/var/www/vhosts/lereveilsocial.com/httpdocs/wp-content/webp-express/webp-images/themes/webp-express-test-images/XKDTWl.JPEG.webp

Lets check that browsers supporting webp gets the WEBP when the JPEG is requested
Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
Request URL: https://www.lereveilsocial.com/wp-content/themes/webp-express-test-images/XKDTWl.JPEG
Response: 200 OK
Response headers:
- server: nginx
- date: Tue, 13 Jun 2023 16:37:45 GMT
- content-type: image/webp
- content-length: 6964
- vary: User-Agent,Accept
- last-modified: Tue, 13 Jun 2023 16:37:45 GMT
- etag: W/"1b34-5fe057474a6e2"
- x-webp-express: Redirected directly to existing webp
- x-cache-status: MISS
- x-powered-by: PleskLin
- accept-ranges: bytes

Alrighty. We got a webp. Just what we wanted. Great!
Notice: No cache-control or expires header has been set. It is recommended to do so. Set it nice and big once you are sure the webps have a good quality/compression compromise.

Now lets check that browsers not supporting webp gets the JPEG
Making a HTTP request for the test image (without setting the "Accept" header)
Request URL: https://www.lereveilsocial.com/wp-content/themes/webp-express-test-images/XKDTWl.JPEG
Response: 200 OK
Response headers:
- server: nginx
- date: Tue, 13 Jun 2023 16:37:45 GMT
- content-type: image/jpeg
- content-length: 3195
- last-modified: Tue, 13 Jun 2023 16:37:45 GMT
- cache-control: max-age=2592000
- expires: Thu, 13 Jul 2023 16:37:45 GMT
- etag: "64889b59-c7b"
- x-cache-status: MISS
- x-powered-by: PleskLin
- accept-ranges: bytes

Alrighty. We got the jpeg. Great!.
However, we did not receive a Vary:Accept header. That header should be set in order to tell proxies that the response varies depending on the Accept header. Otherwise browsers not supporting webp might get a cached webp and vice versa.
Too technical?
Here is an explanation of what this means: Some companies have set up proxies which caches resources. This way, if employee A have downloaded an image and employee B requests it, the proxy can deliver the image directly to employee B without needing to send a request to the server. This is clever, but it can go wrong. If B for some reason is meant to get another image than A, it will not happen, as the server does not get the request. That is where the Vary header comes in. It tells the proxy that the image is dependent upon something. In this case, we need to signal proxies that the image depends upon the "Accept" header, as this is the one browsers use to tell the server if it accepts webps or not. We do that using the "Vary:Accept" header. However - it is missing :( Which means that employees at (larger) companies might experience problems if some are using browsers that supports webp and others are using browsers that does not. Worst case is that the request to an image is done with a browser that supports webp, as this will cache the webp in the proxy, and deliver webps to all employees - even to those who uses browsers that does not support webp. These employees will get blank images.
So, what should you do? I would recommend that you either try to fix the problem with the missing Vary:Accept header or change to "CDN friendly" mode.
Deleting test images

Thanks

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