ENGCOM-8925: Add WEBP + AVIF Support by default #32400

 - Merge Pull Request #32400 from in-session/magento2:2.4-develop
 - Merged commits:
   1. 59a5e8d
   2. f578f02
   3. 59161f2
   4. 81882e7
   5. 73f6c3f
   6. 7e4e074
   7. 760ab36
   8. 1e5cf5b
   9. c4bc0c1
   10. c3f7262
   11. 28f539b
   12. 27c93ab
   13. 8f4e06f
   14. 9993844
   15. d2bd6cf
   16. d265e96
   17. 203dbf4
   18. 73c94d4
   19. c416e6b
   20. b877a4a
   21. 3530c6c
   22. ea1f90a
   23. 9c8c61b
   24. 8960823
   25. 9d778c8
   26. 8313833
   27. de5c558
   28. 5188dcf
   29. 22643ae

Author: magento-engcom-team

nginx.conf.sample

@@ -112,7 +112,7 @@ location /static/ {
         rewrite ^/static/version\d*/(.*)$ /static/$1 last;
     }
 
-    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)$ {
+    location ~* \.(ico|jpg|jpeg|png|gif|svg|svgz|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2|html|json|webmanifest)$ {
         add_header Cache-Control "public";
         add_header X-Frame-Options "SAMEORIGIN";
         expires +1y;
@@ -166,7 +166,7 @@ location /media/ {
         deny all;
     }
 
-    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {
+    location ~* \.(ico|jpg|jpeg|png|gif|svg|svgz|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2)$ {
         add_header Cache-Control "public";
         add_header X-Frame-Options "SAMEORIGIN";
         expires +1y;

pub/media/.htaccess

@@ -52,9 +52,12 @@ AddType image/gif gif
 AddType image/png png
 AddType image/jpeg jpg
 AddType image/jpeg jpeg
+AddType image/webp webp
+AddType image/avif avif
+AddType image/avif-sequence avifs
 
 # SVG
-AddType image/svg+xml svg
+AddType image/svg+xml svg svgz
 
 # Fonts
 AddType application/vnd.ms-fontobject eot
@@ -63,9 +66,6 @@ AddType application/x-font-otf otf
 AddType application/x-font-woff woff
 AddType application/font-woff2 woff2
 
-# Flash
-AddType application/x-shockwave-flash swf
-
 # Archives and exports
 AddType application/zip gzip
 AddType application/x-gzip gz gzip
@@ -75,7 +75,7 @@ AddType application/xml xml
 
 <IfModule mod_headers.c>
 
-    <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
+    <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|svgz|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2)$>
         Header append Cache-Control public
     </FilesMatch>
 
@@ -111,15 +111,18 @@ AddType application/xml xml
     ExpiresByType text/css "access plus 1 year"
     ExpiresByType application/javascript "access plus 1 year"
 
-    # Favicon, images, flash
-    <FilesMatch \.(ico|gif|png|jpg|jpeg|swf|svg)$>
+    # Favicon, images
+    <FilesMatch \.(ico|gif|png|jpg|jpeg|svg|svgz|webp|avif|avifs)$>
         ExpiresDefault "access plus 1 year"
     </FilesMatch>
     ExpiresByType image/gif "access plus 1 year"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType image/jpg "access plus 1 year"
     ExpiresByType image/jpeg "access plus 1 year"
     ExpiresByType image/svg+xml "access plus 1 year"
+    ExpiresByType image/webp "access plus 1 year"
+    ExpiresByType image/avif "access plus 1 year"
+    ExpiresByType image/avif-sequence "access plus 1 year"
 
     # Fonts
     <FilesMatch \.(eot|ttf|otf|svg|woff|woff2)$>

pub/static/.htaccess

@@ -37,7 +37,6 @@ AddType application/javascript js jsonp
 AddType application/json json
 
 # HTML
-
 AddType text/html html
 
 # CSS
@@ -49,9 +48,12 @@ AddType image/gif gif
 AddType image/png png
 AddType image/jpeg jpg
 AddType image/jpeg jpeg
+AddType image/webp webp
+AddType image/avif avif
+AddType image/avif-sequence avifs
 
 # SVG
-AddType image/svg+xml svg
+AddType image/svg+xml svg svgz
 
 # Fonts
 AddType application/vnd.ms-fontobject eot
@@ -60,8 +62,8 @@ AddType application/x-font-otf otf
 AddType application/x-font-woff woff
 AddType application/font-woff2 woff2
 
-# Flash
-AddType application/x-shockwave-flash swf
+# Manifest
+AddType application/manifest+json webmanifest
 
 # Archives and exports
 AddType application/zip gzip
@@ -72,7 +74,7 @@ AddType application/xml xml
 
 <IfModule mod_headers.c>
 
-    <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)$>
+    <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2|html|json|webmanifest)$>
         Header append Cache-Control public
     </FilesMatch>
 
@@ -100,6 +102,12 @@ AddType application/xml xml
     ExpiresByType application/zip "access plus 0 seconds"
     ExpiresByType application/x-gzip "access plus 0 seconds"
     ExpiresByType application/x-bzip2 "access plus 0 seconds"
+    
+    # Manifest
+    <FilesMatch \.(webmanifest)$>
+        ExpiresDefault "access plus 0 seconds"
+    </FilesMatch>
+    ExpiresByType application/manifest+json "access plus 0 seconds"
 
     # CSS, JavaScript, html
     <FilesMatch \.(css|js|html|json)$>
@@ -111,14 +119,17 @@ AddType application/xml xml
     ExpiresByType application/json "access plus 1 year"
 
     # Favicon, images, flash
-    <FilesMatch \.(ico|gif|png|jpg|jpeg|swf|svg)$>
+    <FilesMatch \.(ico|gif|png|jpg|jpeg|svg|svgz|webp|avif|avifs)$>
         ExpiresDefault "access plus 1 year"
     </FilesMatch>
     ExpiresByType image/gif "access plus 1 year"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType image/jpg "access plus 1 year"
     ExpiresByType image/jpeg "access plus 1 year"
     ExpiresByType image/svg+xml "access plus 1 year"
+    ExpiresByType image/webp "access plus 1 year"
+    ExpiresByType image/avif "access plus 1 year"
+    ExpiresByType image/avif-sequence "access plus 1 year"
 
     # Fonts
     <FilesMatch \.(eot|ttf|otf|svg|woff|woff2)$>
@@ -129,5 +140,7 @@ AddType application/xml xml
     ExpiresByType application/x-font-otf "access plus 1 year"
     ExpiresByType application/x-font-woff "access plus 1 year"
     ExpiresByType application/font-woff2 "access plus 1 year"
+    ExpiresByType font/opentype "access plus 1 year"
+    ExpiresByType font/truetype "access plus 1 year"
 
 </IfModule>