diff --git a/website/_dogfooding/_docs tests/tests/img-tests.mdx b/website/_dogfooding/_docs tests/tests/img-tests.mdx
index bddaf876340e..df7d9ee0221e 100644
--- a/website/_dogfooding/_docs tests/tests/img-tests.mdx	
+++ b/website/_dogfooding/_docs tests/tests/img-tests.mdx	
@@ -10,6 +10,10 @@ import docusaurusImport from '@site/static/img/docusaurus.png';
 
 export const docusaurusRequire = require('@site/static/img/docusaurus.png');
 
+import docusaurusWebPImport from './img/docusaurus.webp';
+
+import docusaurusAVIFImport from './img/docusaurus.avif';
+
 ![URL encoded image](./img/oss_logo%20%282%29.png)
 
 ## Regular images
@@ -20,6 +24,16 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png');
 
 ## Ideal images
 
+PNG
+
 <Image img={docusaurusImport} />
 
 <Image img={docusaurusRequire} />
+
+WebP
+
+<Image img={docusaurusWebPImport} />
+
+AVIF
+
+<Image img={docusaurusAVIFImport} />
diff --git a/website/_dogfooding/_docs tests/tests/img/docusaurus.avif b/website/_dogfooding/_docs tests/tests/img/docusaurus.avif
new file mode 100644
index 000000000000..9be208e0b115
Binary files /dev/null and b/website/_dogfooding/_docs tests/tests/img/docusaurus.avif differ
diff --git a/website/_dogfooding/_docs tests/tests/img/docusaurus.webp b/website/_dogfooding/_docs tests/tests/img/docusaurus.webp
new file mode 100644
index 000000000000..f4cb121e0807
Binary files /dev/null and b/website/_dogfooding/_docs tests/tests/img/docusaurus.webp differ
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 156ab21d68d6..802dfc730665 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -238,6 +238,8 @@ module.exports = async function createConfigAsync() {
           max: 1030,
           min: 640,
           steps: 2,
+          // For ideal-image-plugin test
+          enableWebpAvif: true,
           // Use false to debug, but it incurs huge perf costs
           disableInDev: true,
         }),