From 187a86263aa8de1aa6cb3f36e1aef846da2a653f Mon Sep 17 00:00:00 2001
From: Aden <adennn@gmail.com>
Date: Wed, 4 Dec 2024 15:51:50 +1100
Subject: [PATCH] Add support for WebP and AVIF image formats (#1119)

---
 .changeset/eighty-masks-hang.md            |  6 ++++++
 docs/docs/extra-features.md                | 12 +++++++++++-
 packages/sku/config/webpack/utils/index.js |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/eighty-masks-hang.md

diff --git a/.changeset/eighty-masks-hang.md b/.changeset/eighty-masks-hang.md
new file mode 100644
index 000000000..466fd0f99
--- /dev/null
+++ b/.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. 
diff --git a/docs/docs/extra-features.md b/docs/docs/extra-features.md
index 409d39cc8..0c35fb0ce 100644
--- a/docs/docs/extra-features.md
+++ b/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.
 
diff --git a/packages/sku/config/webpack/utils/index.js b/packages/sku/config/webpack/utils/index.js
index 05a583524..5e69d2297 100644
--- a/packages/sku/config/webpack/utils/index.js
+++ b/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$/,
 };