CODEWITHSUNDEEP
apachecontent-negotiation
jamacoe
jamacoe

Reputation: 549

How to configure Apache 2.4 to use 'content negotiation' in order to serve webp images?

In my HTML file there are several <img src="images/<filename>.jpeg">

The directory "images" holds these files:

    <filename>.jpeg  
    as well as   
    <filename>.webp  
    and  
    <filename>.jpeg.webp

The latter two are identical webp versions of the jpeg file.

Now I want to configure Apache 2.4 on Oracle Linux 8.6 for 'content negotiation'. I am expecting that Apache returns a .webp file instead of the requested .jpeg file, if the browser supports .webp. I don't want to use the HTML <picture> tag or 'srcset' for several reasons, but leave the code untouched.

I have found several promissing configuration examples for nginx, but unfortunatly only litte on Apache:

https://gist.github.com/sergejmueller/5500879
https://stackoverflow.com/a/58857260/4335480

These two links outline 'rewrites' that are to go to the .htaccess file in the /images directory. I tried them both as '.htaccess' in the 'image' directory and it didn't work. I also put them directly in the httpd.conf and it didn't work either. And I tried these lines in the root directory's .htaccess

'AllowOverride All' is included in all section. Even the 'images' directory is explicitly listed.

In Chrome Dev Tools I verified that the request headers include 'image/webp'.

Probably not necessary: In my despair I have disabled nosniff on the Apache server and verified in the response header that it isn't set.

Whatever I try, the server only returns the jpeg file. I can verify this not only by the file name but also by the content-length field in the response header.

So what can I do to have Apache serve avif, webp and (fall back) jpeg in that order, whenever a jpeg file is requested?

Upvotes: 1

Views: 677

Answers (1)

jamacoe
jamacoe

Reputation: 549

Found the error myself. Note to self: don't just copy code snippets to use them. Read and understand them to find errors or identify necessary adaptions.

Vincent Orback's code is often cited for this problem, so I blindly trusted and used it: https://github.com/vincentorback/WebP-images-with-htaccess

It contains the following line:

RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

The outcome is that .webp images are only searched for in the web server root directory. On my site, images are in a subdirectory called 'images'.

Trying to load an image in the browser would fail (deliver the jpeg, not the webp version):

https://<my domain>/images/<image name>.jpeg

But after altering above line to

RewriteCond %{DOCUMENT_ROOT}/images/$1.webp -f

eventually everything worked!

All the other things were unnecessary. You only need one AllowOverride All before the virtual host containers for <Directory / > and all servers and subdirectories would have .htaccess enabled, if present. For this problem, only one .htaccess in the image subdir was necessary, none in the root and no special httpd.conf entries. I turned nosniff on again. The alternativ .webp files just need the extention .webp, not .jpeg.webp

Upvotes: 1

Related Questions