diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 3c70c9d..5876912 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -49,4 +49,4 @@ jobs:
node-version: 22
cache: 'pnpm'
- name: Check package.json files
- run: pnpm --package=@trigen/lint-package-json dlx lint-package-json --monorepo
+ run: pnpm --package=@trigen/lint-package-json dlx lint-package-json --monorepo --ignore examples
diff --git a/examples/rspack/index.html b/examples/rspack/index.html
new file mode 100644
index 0000000..cd22c14
--- /dev/null
+++ b/examples/rspack/index.html
@@ -0,0 +1,101 @@
+
+
+
+ srcset + Rspack
+
+
+
+ srcset + Rspack
+
+ Four image imports processed by @srcset/loader at build time, wired through
+ module.rules of Rspack and rendered with the Picture and
+ Image components of @srcset/react.
+
+ `. */}
+
+
+
+
+
+ {/* 2. Blur-up placeholder, and the only place where `priority` is correct. */}
+
+
+
+ {/* 3. Png keeps transparency, webp is added next to it. */}
+
+
+
+
+
+ {/* 4. Gif keeps every frame, animated webp is added next to it. */}
+
+
+
+
+
+ )
+}
diff --git a/examples/rspack/src/DemoSection.jsx b/examples/rspack/src/DemoSection.jsx
new file mode 100644
index 0000000..cb726f9
--- /dev/null
+++ b/examples/rspack/src/DemoSection.jsx
@@ -0,0 +1,42 @@
+/**
+ * List of the generated variants: id, width and url of every one.
+ * @param props - Component props.
+ * @param props.srcSet - All generated variants.
+ * @returns List element.
+ */
+function VariantList({ srcSet }) {
+ return (
+
+ {srcSet.map(({ id, width, url }) => (
+
+ {id} - {width}w - {url}
+
+ ))}
+
+ )
+}
+
+/**
+ * Demo section: a heading, the images, a caption and the variant list.
+ * @param props - Component props.
+ * @param props.title - Section title.
+ * @param props.caption - Caption text under the images.
+ * @param props.srcSet - All generated variants, printed under the caption.
+ * @param props.children - Images to show.
+ * @returns Section element.
+ */
+export function DemoSection({
+ title,
+ caption,
+ srcSet,
+ children
+}) {
+ return (
+
+ {title}
+ {children}
+ {caption}
+
+ )
+}
diff --git a/examples/rspack/src/images/animation.gif b/examples/rspack/src/images/animation.gif
new file mode 100644
index 0000000..6bf942d
Binary files /dev/null and b/examples/rspack/src/images/animation.gif differ
diff --git a/examples/rspack/src/images/felix.jpg b/examples/rspack/src/images/felix.jpg
new file mode 100644
index 0000000..fcb3932
Binary files /dev/null and b/examples/rspack/src/images/felix.jpg differ
diff --git a/examples/rspack/src/images/miguel-sticker.png b/examples/rspack/src/images/miguel-sticker.png
new file mode 100644
index 0000000..a13a18b
Binary files /dev/null and b/examples/rspack/src/images/miguel-sticker.png differ
diff --git a/examples/rspack/src/images/miguel.jpg b/examples/rspack/src/images/miguel.jpg
new file mode 100644
index 0000000..adc4a51
Binary files /dev/null and b/examples/rspack/src/images/miguel.jpg differ
diff --git a/examples/rspack/src/index.jsx b/examples/rspack/src/index.jsx
new file mode 100644
index 0000000..b75582f
--- /dev/null
+++ b/examples/rspack/src/index.jsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { App } from './App.jsx'
+
+createRoot(document.getElementById('app')).render(srcset + Vite
+
+
+
+ srcset + Vite
+
+ Four image imports processed by @srcset/vite-plugin and rendered with the
+ Picture and Image components of @srcset/svelte:
+ responsive widths and modern formats, a blur-up placeholder, transparency and animation
+ kept intact.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/vite/src/Demo.svelte b/examples/vite/src/Demo.svelte
new file mode 100644
index 0000000..aafd00c
--- /dev/null
+++ b/examples/vite/src/Demo.svelte
@@ -0,0 +1,21 @@
+
+
+
+ {title}
+ {@render children()}
+ {caption}
+
+ {#each srcSet as variant (variant.id)}
+ {variant.id} - {variant.width}w - {variant.url}
+ {/each}
+
+
diff --git a/examples/vite/src/images/animation.gif b/examples/vite/src/images/animation.gif
new file mode 100644
index 0000000..6bf942d
Binary files /dev/null and b/examples/vite/src/images/animation.gif differ
diff --git a/examples/vite/src/images/felix.jpg b/examples/vite/src/images/felix.jpg
new file mode 100644
index 0000000..fcb3932
Binary files /dev/null and b/examples/vite/src/images/felix.jpg differ
diff --git a/examples/vite/src/images/miguel-sticker.png b/examples/vite/src/images/miguel-sticker.png
new file mode 100644
index 0000000..a13a18b
Binary files /dev/null and b/examples/vite/src/images/miguel-sticker.png differ
diff --git a/examples/vite/src/images/miguel.jpg b/examples/vite/src/images/miguel.jpg
new file mode 100644
index 0000000..adc4a51
Binary files /dev/null and b/examples/vite/src/images/miguel.jpg differ
diff --git a/examples/vite/src/main.js b/examples/vite/src/main.js
new file mode 100644
index 0000000..dd77e58
--- /dev/null
+++ b/examples/vite/src/main.js
@@ -0,0 +1,6 @@
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+mount(App, {
+ target: document.querySelector('#app')
+})
diff --git a/examples/vite/vite.config.js b/examples/vite/vite.config.js
new file mode 100644
index 0000000..3dc56de
--- /dev/null
+++ b/examples/vite/vite.config.js
@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { srcset } from '@srcset/vite-plugin'
+
+export default defineConfig({
+ plugins: [
+ svelte(),
+ srcset({
+ // Default rules for every processed image import.
+ // A rule in the import query replaces them for that import.
+ rules: [
+ // Photos: full and half width, jpg first - it is the `src` fallback.
+ {
+ match: '**/*.jpg',
+ width: [1, 0.5],
+ format: ['jpg', 'webp', 'avif']
+ },
+ // Stickers: png stays for the transparency, webp is the smaller twin.
+ {
+ match: '**/*.png',
+ width: [1, 0.5],
+ format: ['png', 'webp']
+ },
+ // Animations: gif stays for the widest support, webp keeps all the frames.
+ {
+ match: '**/*.gif',
+ width: [1, 0.5],
+ format: ['gif', 'webp']
+ }
+ ]
+ })
+ ],
+ optimizeDeps: {
+ // `@srcset/svelte` resolves to its workspace source through the `svelte` export
+ // condition, so the svelte plugin must compile it instead of vite prebundling it.
+ exclude: ['@srcset/svelte']
+ }
+})
diff --git a/examples/webpack/index.html b/examples/webpack/index.html
new file mode 100644
index 0000000..f138ab5
--- /dev/null
+++ b/examples/webpack/index.html
@@ -0,0 +1,109 @@
+
+
+
+ srcset + webpack
+
+
+
+ srcset + webpack
+
+ Four image imports processed by @srcset/loader at build time, rendered with the
+ Picture and Image components of @srcset/preact. Every
+ variant listed below was generated by this build.
+
+ ` share the same `sizes`.
+const sizes = '(max-width: 48rem) 100vw, 48rem'
+
+/**
+ * The demo page: four image imports, each rendered by the components
+ * of `@srcset/preact` from the variants the loader generated.
+ * @returns Page content.
+ */
+export function App() {
+ return (
+ <>
+ renders one per format, ordered by efficiency; renders the fallback
+
+
+
+ : the 16px data-url is its background '
+ + 'until the image loads, and `priority` makes it eager with a high fetch priority. `priority` belongs on a '
+ + 'standalone image only - inside a it would preload the fallback format.'}
+ srcSet={felixImage.srcSet}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/webpack/src/Demo.jsx b/examples/webpack/src/Demo.jsx
new file mode 100644
index 0000000..18682d0
--- /dev/null
+++ b/examples/webpack/src/Demo.jsx
@@ -0,0 +1,45 @@
+/**
+ * List of the image variants the build generated for one import.
+ * @param props - Variants to list.
+ * @returns Variants list element.
+ */
+function Variants({ srcSet }) {
+ return (
+
+ {srcSet.map(variant => (
+
+
+ {variant.id}
+
+ {` — ${variant.width}w — ${variant.url}`}
+
+ ))}
+
+ )
+}
+
+/**
+ * One demo section: a heading, the demo itself, a caption and the list
+ * of variants generated for the image it was built from.
+ * @param props - Section props.
+ * @returns Section element.
+ */
+export function Demo({
+ title,
+ caption,
+ srcSet,
+ children
+}) {
+ return (
+
+
+ {title}
+
+ {children}
+
+ {caption}
+
+
+
+ )
+}
diff --git a/examples/webpack/src/images/animation.gif b/examples/webpack/src/images/animation.gif
new file mode 100644
index 0000000..6bf942d
Binary files /dev/null and b/examples/webpack/src/images/animation.gif differ
diff --git a/examples/webpack/src/images/felix.jpg b/examples/webpack/src/images/felix.jpg
new file mode 100644
index 0000000..fcb3932
Binary files /dev/null and b/examples/webpack/src/images/felix.jpg differ
diff --git a/examples/webpack/src/images/miguel-sticker.png b/examples/webpack/src/images/miguel-sticker.png
new file mode 100644
index 0000000..a13a18b
Binary files /dev/null and b/examples/webpack/src/images/miguel-sticker.png differ
diff --git a/examples/webpack/src/images/miguel.jpg b/examples/webpack/src/images/miguel.jpg
new file mode 100644
index 0000000..adc4a51
Binary files /dev/null and b/examples/webpack/src/images/miguel.jpg differ
diff --git a/examples/webpack/src/index.jsx b/examples/webpack/src/index.jsx
new file mode 100644
index 0000000..07301b0
--- /dev/null
+++ b/examples/webpack/src/index.jsx
@@ -0,0 +1,7 @@
+import { render } from 'preact'
+import { App } from './App.jsx'
+
+render(
+