htaccess Server-side WEBP detection in conjunction with WordPress htaccess rules

Solution:

This worked for me,

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /DPA/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /DPA/index.php [L]
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /DPA/
  # check if browser accepts webp
  RewriteCond %{HTTP_ACCEPT} image/webp 

  # check if file is jpg or png
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$

  # check if corresponding webp file exists image.png -> image.webp
  RewriteCond %1\.webp -f

  # serve up webp instead
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

</IfModule>

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

AddType image/webp .webp

I added RewriteBase /DPA/ to the webp check and now it works fine.

I just realised I included the default WordPress pretty permalinks code, but it should have been the one for directories. I will edit the question now.