Enable responsive-loader for WebP/AVIF

Author: tats-u

packages/docusaurus-plugin-ideal-image/src/index.ts

@@ -46,14 +46,19 @@ export default function pluginIdealImage(
         return {};
       }
 
+      const rulesRegex = new RegExp(
+        `\\.(?:png|jpe?g${options.enableWebpAvif ? '|webp|avif' : ''})$`,
+        'i',
+      );
+
       return {
         mergeStrategy: {
           'module.rules': 'prepend',
         },
         module: {
           rules: [
             {
-              test: /\.(?:png|jpe?g)$/i,
+              test: rulesRegex,
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {

packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts

@@ -46,6 +46,12 @@ declare module '@docusaurus/plugin-ideal-image' {
      * Tip: use network throttling in your browser to simulate slow networks.
      */
     disableInDev?: boolean;
+    /**
+     * You can enable this plugin for WebP/AVIF images
+     * by setting this to `true`.
+     * Note: the default is `false` to keep backward compatibility.
+     */
+    enableWebpAvif?: boolean;
   };
 }