1 files changed, 35 insertions, 4 deletions

diff --git a/subprojects/docs/src/plugins/loadersPlugin.ts b/subprojects/docs/src/plugins/loadersPlugin.ts
index 325d7f67..8b52667c 100644
--- a/subprojects/docs/src/plugins/loadersPlugin.ts
+++ b/subprojects/docs/src/plugins/loadersPlugin.ts
@@ -1,15 +1,19 @@
 /*
- * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ * Copyright (c) 2016, Jeremy Stucki
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 The Refinery Authors
  *
- * SPDX-License-Identifier: EPL-2.0
+ * SPDX-License-Identifier: BSD-3-Clause AND MIT AND EPL-2.0
  */
 
 import type { Plugin } from '@docusaurus/types';
+// @ts-expect-error No typings available for `responsive-loader`.
+import sharp from 'responsive-loader/sharp';
 
 export default function loadersPlugin(): Plugin {
   return {
     name: 'refinery-loaders-plugin',
-    configureWebpack(config) {
+    configureWebpack(config, isServer) {
       let svgoDisabled = false;
       const rules = [...(config.module?.rules ?? [])];
       rules.forEach((rule) => {
@@ -38,6 +42,8 @@ export default function loadersPlugin(): Plugin {
         ) {
           return;
         }
+        // Skip SVGR when importing SVG files with ?url.
+        svgLoader.resourceQuery = { not: /[?&]url$/ };
         const {
           use: [loader],
         } = svgLoader;
@@ -48,6 +54,7 @@ export default function loadersPlugin(): Plugin {
         ) {
           return;
         }
+
         loader.options = {
           ...(typeof loader.options === 'object' ? loader.options : {}),
           svgo: true,
@@ -78,7 +85,31 @@ export default function loadersPlugin(): Plugin {
           'module.rules': 'replace',
         },
         module: {
-          rules,
+          rules: [
+            // Configuration based on
+            // https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
+            {
+              test: /\.(png|jpe?g)$/,
+              resourceQuery: /[?&]rl$/,
+              use: [
+                {
+                  loader: 'responsive-loader',
+                  options: {
+                    /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment --
+                     * No typings available for `responsive-loader`.
+                     */
+                    adapter: sharp,
+                    format: 'webp',
+                    // See
+                    // https://github.com/facebook/docusaurus/blob/c745021b01a8b88d34e1d772278d7171ad8acdf5/packages/docusaurus-plugin-ideal-image/src/index.ts#L62-L66
+                    emitFile: !isServer,
+                    name: 'assets/images/[name].[hash:hex:7].[width].[ext]',
+                  },
+                },
+              ],
+            },
+            ...rules,
+          ],
         },
       };
     },