How to make static context still execute document-level rewrites?

[Rinart73]

I'm running Wordpress with WebP Express plugin and trying to serve WebP instead of JPEG and PNG for browsers that support it. It started working after I found a way to enable reading .htaccess in subfolders (since the rules are in the "/wp-content/uploads/" folder).

Hovewer the problem is that OpenLiteSpeed doesn't support mod_headers in .htaccess. Which means I can't add (highly?) recommended header "Vary: Accept".
I found out that you can specify Static Context and add headers there. But apparently doing this prevents any subsequent document-level .htaccess rules from working. As a result I get images with "Vary: Accept" but they don't get replaced with WebP.

My context properties:

URI: exp:^.*(jpg|jpeg|png)$
Location: $DOC_ROOT/$0
Accessible: Yes
Header operations: append Vary Accept

Can someone offer any insight? How important Vary Accept actually? And how do I make it work with rewrite rules?

 

[Cold-Egg]

Hi,
With LSCache for WordPress, there's a feature called Image WebP Replacement. It will add the following rewrite to the .htaccess once enabled.

### marker WEBP start ###
RewriteCond %{HTTP_ACCEPT} "image/webp" [or]
RewriteCond %{HTTP_USER_AGENT} "Page Speed"
RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
RewriteCond %{HTTP_USER_AGENT} iPhone.*Version/(\d{2}).*Safari
RewriteCond %1 >13
RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
### marker WEBP end ###

Hope it helps.

 

[Rinart73]

Yeah I tried it. But the LSCache plugin just replaces .jpg with .jpg.webp in HTML via filters. That rewrite doesn't seem to do anything.

UPD: No matter how hard I tried, it seems that .htaccess rewrite rules are completely ignored if a file hits "Context" rules. Idk why. I'm very new to OpenLiteSpeed so if it seems that I don't know what I'm doing, you're correct.

LSCache solution is not suitable for me, because the plugin replaces "src" in HTML. Which means any dynamically added image or CSS image won't be served as WebP.

But it seems I found a weird way to make it work, maybe it will be usable for someone.

1. Disable all WebP related stuff in LSCache. It's a good plugin but we won't need this specific feature.
2. Switch WebP Express to mingled mode (.jpg.webp) and disable all .htaccess for it.
3. In VHost create 2 static contexts:
   

   URI: exp:^/.*(jpg|jpeg|png)$
   Accessible: Yes
   Header Operations: append Vary Accept
   Enable Rewrite: Yes
   Rewrite Inherit: Yes
   Rewrite Rules:
   RewriteCond %{HTTP_ACCEPT} image/webp
   RewriteCond %{REQUEST_URI} (.*)\.(jpe?g|png)$
   RewriteCond %{DOCUMENT_ROOT}%1.%2.webp -f
   RewriteRule .* %1.%2.webp [L,T=image/webp]

   and
   

   URI: exp:^/.*(webp)$
   Accessible: Yes
   Enable Expires: Yes
   Header Operations: append Vary Accept
   Enable Rewrite: Yes
   Rewrite Inherit: Yes

This way when browser that supports WebP requests JPG, it will be served WebP but with Accept: Vary.

 

[elrik]

Yeah I tried it. But the LSCache plugin just replaces .jpg with .jpg.webp in HTML via filters. That rewrite doesn't seem to do anything.

UPD: No matter how hard I tried, it seems that .htaccess rewrite rules are completely ignored if a file hits "Context" rules. Idk why. I'm very new to OpenLiteSpeed so if it seems that I don't know what I'm doing, you're correct.

LSCache solution is not suitable for me, because the plugin replaces "src" in HTML. Which means any dynamically added image or CSS image won't be served as WebP.

But it seems I found a weird way to make it work, maybe it will be usable for someone.

1. Disable all WebP related stuff in LSCache. It's a good plugin but we won't need this specific feature.
2. Switch WebP Express to mingled mode (.jpg.webp) and disable all .htaccess for it.
3. In VHost create 2 static contexts:
   

   URI: exp:^/.*(jpg|jpeg|png)$
   Accessible: Yes
   Header Operations: append Vary Accept
   Enable Rewrite: Yes
   Rewrite Inherit: Yes
   Rewrite Rules:
   RewriteCond %{HTTP_ACCEPT} image/webp
   RewriteCond %{REQUEST_URI} (.*)\.(jpe?g|png)$
   RewriteCond %{DOCUMENT_ROOT}%1.%2.webp -f
   RewriteRule .* %1.%2.webp [L,T=image/webp]

   and
   

   URI: exp:^/.*(webp)$
   Accessible: Yes
   Enable Expires: Yes
   Header Operations: append Vary Accept
   Enable Rewrite: Yes
   Rewrite Inherit: Yes

This way when browser that supports WebP requests JPG, it will be served WebP but with Accept: Vary.

Hi!,
You made my day with this conf, thank you very much for share.
I extend the conf for avif replicating your settings and work very well, in all cases add the header vary accept and this is grate for my cdn.

Thanks again.