Add support for WebP and AVIF image formats (#1119)

.changeset/eighty-masks-hang.md

@@ -0,0 +1,6 @@
+---
+'sku': minor
+---
+Add WebP and AVIF image format support to sku
+
+Support for `webp` and `avif` image formats has been added. Note that browser support for these formats may vary. To ensure compatibility across browsers, consumers are advised to use the `<picture>` element with fallback formats. 

docs/docs/extra-features.md

@@ -3,7 +3,17 @@
 ## Images
 
 The following images types are supported in sku:
-`bmp`, `gif`, `jpeg`, `png` and `svg`.
+`bmp`, `gif`, `jpeg`, `png`, `svg`, `webp` and `avif`.
+
+?> Browser support for `webp` and `avif` varies. To ensure compatability across browsers, consider providing fallback image formats using the [`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
+
+```html
+<picture>
+  <source srcset="image.avif" type="image/avif" />
+  <source srcset="image.webp" type="image/webp" />
+  <img src="image.png" />
+</picture>
+```
 
 If you want to use a currently unsupported format feel free to submit a PR or contact #sku-support.
 

packages/sku/config/webpack/utils/index.js

@@ -13,6 +13,6 @@ module.exports = {
   resolvePackage,
   TYPESCRIPT: new RegExp(`\.(${extensions.ts.join('|')})$`),
   JAVASCRIPT: new RegExp(`\.(${extensions.js.join('|')})$`),
-  IMAGE: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+  IMAGE: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/, /\.avif$/],
   SVG: /\.svg$/,
 };