Can someone help me with .htaccess file

[thambyz]

Hi,
I have a folder /assets/admin/images/products which contains .jpg and .png files and another folder /assets/admin/images/products/webp with the webp version of .jpg and .png files with name filename.webp (jpg and png is not added in file names)

How do i serve webp version in supported browsers using htaccess

I found some information at https://github.com/vincentorback/WebP-images-with-htaccess but it only serves from same folder.

Thanks

 

[mbudhia]

Hi I can help you with this

 

[thambyz]

Hi I can help you with this

Thank you. This code is working if webp image is in same folder. I need to modify it to look in another folder.

  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]

 

[tradesman]

Thank you. This code is working if webp image is in same folder. I need to modify it to look in another folder.

  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]

what's the dir or name of the folder?

 

[thambyz]

what's the dir or name of the folder?

This is the folder with jpg,jpeg and png images (ex: image.png)
/assets/admin/images/products


This is the folder with webp version(eg: image.webp)
/assets/admin/images/products/webp

 

[tradesman]

The solution is already in the GitHub link that you posted.

replace the "path to image" with the actual path to the file/folder of your resources.




You can check these info too:

Trying to get Apache to serve webp instead of png/jpg (from /img folder of prestashop)

First post here, so I hope I did it well. I converted all png/jpg starting from my prestashop public_html folder to webp, and added rewrite rules to the .htaccess in order to have the webp served

serverfault.com

.htaccess file to allow access to images folder to view pictures? - codetag team

Thanks to drubeedoo for solving the issue of linking the files directory to a folder below my web folder at Private files. This article is for system administrators who wish to restrict access to i...

codetagteam.com

 

[thambyz]

The solution is already in the GitHub link that you posted.

replace the "path to image" with the actual path to the file/folder of your resources.

Thanks for the update. But the issue is it is not possible to edit the actual code. The code is in PHP with codeigniter framework which i don't have idea and i don't want to touch the actual code, that is the reason i am looking for htaccess option. And this is also the reason i don't want to put optimized webp images in actual folder so i can easily revert the changes done. But i think this is the easiest way to put webp images inside images folder and later delete webp images later if required.

 

[thambyz]

Below code is working.

<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}/assets/admin/images/products/webp/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png|gif)$ webp/$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>