Maxlab · August 10, 2022 06:16 · Jun 6, 2019
diff --git a/webp.markdown b/webp.markdown
@@ -0,0 +1,121 @@
+## Configure WebP
+
+Make sure the mime.types has type `webp`
+
+`/etc/nginx/mime.types`
+
+include
+
+`image/webp webp;`
+
+### Way 1
+
+Create a location file and name it /etc/nginx/locations/wp-content-uploads-webp.conf:
+
+```
+location ~* /wp-content/uploads/.+\.(png|jpe?g)$ {
+  
+  try_files $uri.webp $uri =404;
+}
+```
+
+Include /etc/nginx/locations/wp-content-uploads-webp.conf inside the root location from your blog, just before the try_files:
+
+```
+location / {
+    include locations/wp-content-uploads-webp.conf;
+    try_files $uri $uri/ /index.php?$args;
+  }
+```
+
+### Way 2
+
+```
+http {
+    # ...
+
+    map $http_accept $webp_ext {
+        default "";
+        "~image\/webp" ".webp";
+    }
+
+    map $uri $file_ext {
+        default "";
+        "~(\.\w+)$" $1;
+    }
+
+    # ...
+}
+```
+
+```
+server {
+    # ...
+
+    location ~* "^(?<path>.+)\.(png|jpeg|jpg|gif)$" {
+        try_files $path$webp_ext $path$file_ext =404;
+    }
+
+    # ...
+}
+```
+
+### Way 3
+
+```
+# http config block
+map $http_accept $webp_ext {
+    default "";
+    "~*webp" ".webp";
+}
+
+# server config block
+location ~* ^(/wp-content/.+)\.(png|jpg)$ {
+    add_header Vary Accept;
+    try_files $1$webp_ext $uri =404;
+}
+```
+
+### Way on My project :)
+
+```
+# in http block of file /etc/nginx/nginx.conf
+# Webp
+  map $http_accept $webp_ext {
+    default "";
+    "~image\/webp" ".webp";
+  }
+
+# in server block of file /etc/nginx/site-availables/xxx.conf
+
+  location ~* ^(?<path>.+)\.(png|jpeg|jpg|gif)$ {
+    set $img_path $1;
+    add_header Vary Accept;
+    try_files $img_path$webp_ext $uri =404;
+  }
+  
+  location @unicorn_xxx {
+  }
+```
+
+### Reload & Restart
+
+`sudo nginx -t && sudo service nginx reload`
+
+### Testing
+
+Testing webp successfully configure:
+
+`curl -I -L -H "accept:image/webp,image/apng,image/*,*/*;q=0.8" <png's url here>`
+
+check the content-type of response header is `webp`
+
+### Some explain for way 2
+
+It works really nice, but what’s under the hood? For every request nginx creates two variables $webp_ext and $file_ext
+
+$webp_ext equals .webp if current browser sends image/webp in the Accept header. Or it equals empty string otherwise.
+$file_ext equals file extension (e.g. .png) of current URI if current URI has it. Or it equals empty string otherwise.
+In the location for images, the $path without extension is captured from incoming URI. And after that nginx tries to find a WebP version by concatenating $path and $webp_ext variables. If the file doesn’t exist nginx will try the next $path and $file_ext.
+You will see a legacy file extension in the URI whether it’s WebP or not, but browsers are okay with that because nginx sends correct Content-Type for WebP files.
+[https://alexey.detr.us/en/posts/2018/2018-08-20-webp-nginx-with-fallback/]