Webp info

content/docs/programming/web.adoc

@@ -1,6 +1,8 @@
 +++
 +++
 
+:source-highlighter: pygments
+
 == Web development
 
 === Quick reference
@@ -8,6 +10,33 @@
 Text area resizing::
 `resize: vertical`, `resize: horizontal`, `resize: none`
 
+=== Webp support
+
+To convert images to WebP:
+
+[source,console]
+----
+$ cwebp -m 6 -mt -o "$file.webp" -- "$file"
+----
+
+To make nginx serve `.webp` files if the relevant accept header is sent:
+
+[source,nginx]
+----
+http {
+    map $http_accept $webp_suffix {
+        "~*webp"  ".webp";
+    }
+
+    server {
+        location ~ \.(png|jpe?g)$ {
+            try_files $uri$webp_suffix $uri =404;
+            expires 1y;
+        }
+    }
+}
+----
+
 === Useful links
 
 - https://simpleicons.org/ - SVG icons for brands, including social media sites and programming languages