Unable To Serve Webp Images Through htaccess mod_rewrite

Question

Before I start explaining my problem I want to point out that I'm a BCA student and currently in the learning phase. I'm not an experienced developer. I work part-time in an IT firm as an senior in-house SEO executive (Senior because I have been working here for more than 2 years.) I'm currently learning python and have good knowledge in HTML and CSS.

The problem Recently I decided to update all the large size png/jpg images of my website with next-gen (As referred by Google Page Speed) webp format. I followed this guide from web.dev (https://web.dev/articles/serve-images-webp) and one from Digital ocean (www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website), As my company's website is quite humongous with around 70-80K pages and 100K+ images, I decided to go with mod_rewrite method. Though I can utilize PHP or even Python to edit the htmls, but due to the sheer number of pages, I opted mod_rewrite method. I added this code to my .htaccess file, which is at the root of my website.

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}/assets/webp/$1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Here I made a slight change and added a separate directory to store the webp (ROOT/assets/webp/). Unfortunately this rewrite is not working.

I surfed the internet for possible solutions but all my attempts were futile. I tried plenty of things to troubleshoot the problem but was unable to do so.

1. I changed the counterpart webp filename to img.png.webp
2. I Presumed as there are plenty of redirects setup by me the mod_rewrite is on in apache configuration.
3. As we are self hosted, I asked the IT guy to reload the Apache server.

Nothing is working. In my desperate attempt I even asked GPT AI Model to rectify the problem but was suggested with same troubleshooting methods that I performed above.

More Info

1. Structure of my assets/webp folder is domain.com/assets/webp/ The pngs are in dir domain.com/assets/img/
2. No rewrite errors in Apache logs
3. mod_rewrite and mod_headers are enabled.
4. .htaccess location is root i.e mydomain.com/.htaccess (Maybe I'm putting it at wrong place IDK.)

After some R&D and suggestions from comments I updated the code to this:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(png|gif|jpe?g)$
RewriteCond /assets/webp/%{REQUEST_FILENAME}.webp -f
RewriteRule ^ /assets/webp/%1.webp [L,T=image/webp,E=accept:1]

<IfModule mod_headers.c>
    <FilesMatch "\.(png|gif|jpe?g)$">
        Header append Vary Accept
    </FilesMatch>
</IfModule>

But this is also not working. I'm at my wits end. Tried so many things since yesterday nothing is working.

Finally @arkascha 's fix have given me the resolution final rules in my htaccess -

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI}  ^/assets/img/(.+)(?:\.jpe?g|\.png)$    
RewriteCond %{DOCUMENT_ROOT}/assets/webp/%1.webp -f
RewriteRule ^ /assets/webp/%1.webp [L,T=image/webp,E=accept:1]

<IfModule mod_headers.c>
    <FilesMatch "\.(png|gif|jpe?g)$">
        Header append Vary Accept
    </FilesMatch>
</IfModule>

Answer 1

I use that code:

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(png|gif|jpe?g)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteRule ^ %{REQUEST_FILENAME}\.webp [L,T=image/webp]

<IfModule mod_headers.c>
    <FilesMatch "\.(png|gif|jpe?g)$">
        Header append Vary Accept
    </FilesMatch>
</IfModule>

as arkascha mentioned, the "R" looks wrong.