{"_id":"@20dimensions/vite-plugin-liquid-image","_rev":"7-20a603246a7cb2a26df1d8f94e2c5d55","name":"@20dimensions/vite-plugin-liquid-image","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.0":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.0","license":"MIT","_id":"@20dimensions/vite-plugin-liquid-image@0.1.0","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"dist":{"shasum":"1c260501119d0d1a519ca1485e2a7d2ae09722f5","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.0.tgz","fileCount":12,"integrity":"sha512-vZ365WpbrTsmBV5bbqBttIjQ4iIrf86gySsRzuimuH9FjuGnVQar6CUFpci3ZkMmojjDqcIK1J1CUOmNpDHfaA==","signatures":[{"sig":"MEYCIQDbACOBaCCUuX7EEcn7Pu81dMviZY1Q45hlJLK4k+n9LwIhAPiarHQ2QU+Aie1EH8soNjepA/8uulAQ28EWxy3RHGKT","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20042},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"private":false,"scripts":{"dev":"tsc --watch","lint":"eslint . --fix","test":"vitest run","build":"tsc","format":"prettier --write src/","test:watch":"vitest"},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"repository":{"url":"https://github.com/20dimensions","type":"git","directory":"vite-plugin-liquid-image"},"_npmVersion":"10.9.2","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sharp":"^0.33.5"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","eslint":"^10.0.3","vitest":"^4.1.0","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/node":"^25.3.5","typescript-eslint":"^8.56.1","eslint-config-prettier":"^10.1.8"},"peerDependencies":{"vite":">=5.0.0","liquidjs":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-liquid-image_0.1.0_1773526090617_0.41463650193208523","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.1","license":"MIT","_id":"@20dimensions/vite-plugin-liquid-image@0.1.1","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"dist":{"shasum":"9858dc682b9a6ff86462c636489ea6ba8a4de909","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.1.tgz","fileCount":12,"integrity":"sha512-iHfw0VO7FIScQ3YjEnB+27rfNYgDM/I9+TOIZ63Nuy/7uZiRm7IFfzQbq9elWnhxKoU6mcW5eaewB9hu0ya/QQ==","signatures":[{"sig":"MEQCIEM587ze19qhBZfUTU+bybv5VEvkMr1P0hsgZGVMApz+AiB8j46eGPUgcCY+9NMXXp99ebhinQ7h+C+lO6YpmYK4Lw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20310},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"e4143e96c1c13814d25cb6c3b4cd29e539ebdce4","private":false,"scripts":{"dev":"tsc --watch","lint":"eslint . --fix","test":"vitest run","build":"tsc","format":"prettier --write src/","test:watch":"vitest"},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"repository":{"url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git","type":"git"},"_npmVersion":"10.9.2","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sharp":"^0.33.5"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","eslint":"^10.0.3","vitest":"^4.1.0","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/node":"^25.3.5","typescript-eslint":"^8.56.1","eslint-config-prettier":"^10.1.8"},"peerDependencies":{"vite":">=5.0.0","liquidjs":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-liquid-image_0.1.1_1773526960608_0.5493276445397686","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.2","license":"MIT","_id":"@20dimensions/vite-plugin-liquid-image@0.1.2","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"dist":{"shasum":"9b6b1e3f0b9eddfc8d103807c30fa8db6d55876f","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.2.tgz","fileCount":12,"integrity":"sha512-zSX0dJe0048oRkO+aOcvlclPKRpNy18Xb7zxQhvL3CLvGWe+TgUhPuAUZolv5FzPEj2pOow/a/reGGBNMe26Aw==","signatures":[{"sig":"MEYCIQCi539YbR7ggl2+2kX0HkuLuFD3TRD3J6iLvGtcHLFlSQIhAO/5Foh6DF+iqRUsNy/oTdvW3GijpD6O/S/TqDbdVO5A","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21585},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"ec0314b5bf932aa9429a89cdc762a0eb06cd6b06","private":false,"scripts":{"dev":"tsc --watch","lint":"eslint . --fix","test":"vitest run","build":"tsc","format":"prettier --write src/","release":"npm run build && npm run publish:npm && npm run publish:github","test:watch":"vitest","publish:npm":"npm publish --registry https://registry.npmjs.org --access public","publish:github":"npm publish --registry https://npm.pkg.github.com"},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"repository":{"url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git","type":"git"},"_npmVersion":"10.9.2","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sharp":"^0.33.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","eslint":"^10.0.3","vitest":"^4.1.0","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/node":"^25.3.5","typescript-eslint":"^8.56.1","eslint-config-prettier":"^10.1.8"},"peerDependencies":{"vite":">=5.0.0","liquidjs":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-liquid-image_0.1.2_1773612510376_0.2865664903130323","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.3","license":"MIT","_id":"@20dimensions/vite-plugin-liquid-image@0.1.3","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"dist":{"shasum":"a3b40eebc457e32a0c06ae2a7e8842f24957df82","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.3.tgz","fileCount":12,"integrity":"sha512-VsPnMYET37fDx6ViS6TfyezpppPHeqA9NmJ2GctmO77Mz1N7NhzQ3MKQW9dShEfmqDS+HASRNlBxfL8q6MYj1w==","signatures":[{"sig":"MEYCIQDv7ku9UTCHy+qYbHkQS+4fR8wSdQELeFU2Si0HocFwmQIhAMoDpZyGDmIHhYAnwm+BXSmehEB1uY4W03Dwxm2WYluj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27852},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"965943757a72ef96cfc07459b2dd954eeb91bef3","private":false,"scripts":{"dev":"tsc --watch","lint":"eslint . --fix","test":"vitest run","build":"tsc","format":"prettier --write src/","release":"npm run build && npm run publish:npm && npm run publish:github","test:watch":"vitest","publish:npm":"npm publish --registry https://registry.npmjs.org --access public","publish:github":"npm publish --registry https://npm.pkg.github.com"},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"repository":{"url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git","type":"git"},"_npmVersion":"10.9.2","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sharp":"^0.33.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","eslint":"^10.0.3","vitest":"^4.1.0","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/node":"^25.3.5","typescript-eslint":"^8.56.1","eslint-config-prettier":"^10.1.8"},"peerDependencies":{"vite":">=5.0.0","liquidjs":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-liquid-image_0.1.3_1773677423318_0.6348571854514855","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.4","license":"MIT","_id":"@20dimensions/vite-plugin-liquid-image@0.1.4","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"dist":{"shasum":"ff306a317301d43e809203dba0029b6b4b4b4ba4","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.4.tgz","fileCount":12,"integrity":"sha512-IEjcKzJp7+PuU83DWL+Oo5qq5XJQ06txl7BccbdXFNjBH9YecMwiJ88s0R5P8TiNHWzhn57b63JODmi7kaRqqg==","signatures":[{"sig":"MEUCIQDWyn+It5bd9LsOyqQY6FDjlOOytlnwXw2zdznEN5m24wIgLqCqHpYMN4evfh/OgAxpA5XjUGPia04Tn118dWkle6A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32465},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"49c46c468c317e75014d9cab91dc613d43c7eae9","private":false,"scripts":{"dev":"tsc --watch","lint":"eslint . --fix","test":"vitest run","build":"tsc","format":"prettier --write src/","release":"npm run build && npm run publish:npm && npm run publish:github","test:watch":"vitest","publish:npm":"npm publish --registry https://registry.npmjs.org --access public","publish:github":"npm publish --registry https://npm.pkg.github.com"},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"repository":{"url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git","type":"git"},"_npmVersion":"10.9.2","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sharp":"^0.33.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","eslint":"^10.0.3","vitest":"^4.1.0","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/node":"^25.3.5","typescript-eslint":"^8.56.1","eslint-config-prettier":"^10.1.8"},"peerDependencies":{"vite":">=5.0.0","liquidjs":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-liquid-image_0.1.4_1773831795341_0.5191516560952216","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.6","license":"MIT","_id":"@20dimensions/vite-plugin-liquid-image@0.1.6","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"dist":{"shasum":"3d157db05b567be67ef9bdccf4d22f4c265a19c8","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.6.tgz","fileCount":12,"integrity":"sha512-eWyb6sU1hF4JPtG+HN9MRg9fmVuuNMbTFtgj5I0dZfMBzghgE9wN/PeApB9cdTYw1RPK1bw82frmq/PLonoZsg==","signatures":[{"sig":"MEYCIQD/9H5pgpnXSul/jtOwiTAMiBpgYTB2sHFH6zKmiNJvEAIhALILxF5c3SzYamxl1sIeUBYSvA1IE6FSAwI1gJGG4fCC","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35567},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"92bb17fbd248fab110f4e8ea3b7c45bb5ed8752b","private":false,"scripts":{"dev":"tsc --watch","lint":"eslint . --fix","test":"vitest run","build":"tsc","format":"prettier --write src/","release":"npm run build && npm run publish:npm && npm run publish:github","test:watch":"vitest","publish:npm":"npm publish --registry https://registry.npmjs.org --access public","publish:github":"npm publish --registry https://npm.pkg.github.com"},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"repository":{"url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git","type":"git"},"_npmVersion":"10.9.2","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","directories":{},"_nodeVersion":"24.3.0","dependencies":{"sharp":"^0.33.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","eslint":"^10.0.3","vitest":"^4.1.0","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^5.9.3","@types/node":"^25.3.5","typescript-eslint":"^8.56.1","eslint-config-prettier":"^10.1.8"},"peerDependencies":{"vite":">=5.0.0","liquidjs":">=10.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-liquid-image_0.1.6_1773846943470_0.29599786836203856","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@20dimensions/vite-plugin-liquid-image","version":"0.1.7","description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","private":false,"type":"module","license":"MIT","repository":{"type":"git","url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git"},"engines":{"node":">=18.0.0"},"main":"./dist/index.js","types":"./dist/index.d.ts","bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsc --watch","build":"tsc","test":"vitest run","test:watch":"vitest","lint":"eslint . --fix","format":"prettier --write src/","publish:npm":"npm publish --registry https://registry.npmjs.org --access public","publish:github":"npm publish --registry https://npm.pkg.github.com","release":"npm run build && npm run publish:npm && npm run publish:github"},"dependencies":{"sharp":"^0.33.5"},"peerDependencies":{"liquidjs":">=10.0.0","vite":">=5.0.0"},"devDependencies":{"@eslint/js":"^10.0.1","@types/node":"^25.3.5","eslint":"^10.0.3","eslint-config-prettier":"^10.1.8","globals":"^17.4.0","liquidjs":"^10.24.0","prettier":"^3.8.1","typescript":"^5.9.3","typescript-eslint":"^8.56.1","vite":"^8.0.0","vitest":"^4.1.0"},"_id":"@20dimensions/vite-plugin-liquid-image@0.1.7","gitHead":"3859080ca7fabb6339da0e1922c7465e7273ae7b","_nodeVersion":"24.3.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-4FNcfZQSlE+A8LbEYI3tVmaVvn7NqUWAij83lu9R7M9Gjei6ozmnn9Oak5BUjQcwce86Ux2j/qGiYSrVA2TpIg==","shasum":"996078bc3a108afe67d28553efc50fdebbee5029","tarball":"https://registry.npmjs.org/@20dimensions/vite-plugin-liquid-image/-/vite-plugin-liquid-image-0.1.7.tgz","fileCount":12,"unpackedSize":38116,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD9Wl5BGGblV0nO1kifBpfhY57ReBW94fmU+DgQsBxT1wIhANKBZNberrgL1KDi8Gtuc07ImrD3uhYse48ZVmvycBdn"}]},"_npmUser":{"name":"chrisadels","email":"christopheradels@gmail.com"},"directories":{},"maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-plugin-liquid-image_0.1.7_1774084135421_0.8224846654433944"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-14T22:08:10.512Z","modified":"2026-03-21T09:08:55.721Z","0.1.0":"2026-03-14T22:08:10.748Z","0.1.1":"2026-03-14T22:22:40.747Z","0.1.2":"2026-03-15T22:08:30.538Z","0.1.3":"2026-03-16T16:10:23.477Z","0.1.4":"2026-03-18T11:03:15.507Z","0.1.6":"2026-03-18T15:15:43.605Z","0.1.7":"2026-03-21T09:08:55.565Z"},"bugs":{"url":"https://github.com/20Dimensions/vite-plugin-liquid-image/issues"},"license":"MIT","homepage":"https://github.com/20Dimensions/vite-plugin-liquid-image#readme","repository":{"type":"git","url":"git+https://github.com/20Dimensions/vite-plugin-liquid-image.git"},"description":"A framework-agnostic LiquidJS {% optimized_image %} tag + Vite pipeline for responsive WebP/AVIF images using Sharp","maintainers":[{"name":"chrisadels","email":"christopheradels@gmail.com"}],"readme":"# @20dimensions/vite-plugin-liquid-image\n\n[![npm](https://img.shields.io/npm/v/@20dimensions/vite-plugin-liquid-image?color=blue&logo=npm)](https://www.npmjs.com/package/@20dimensions/vite-plugin-liquid-image)\n[![license](https://img.shields.io/npm/l/@20dimensions/vite-plugin-liquid-image)](./LICENSE)\n\nA high-performance image optimization plugin for any Vite + LiquidJS project.\n\nIt seamlessly connects LiquidJS templating to Vite's build pipeline, using `sharp` to automatically generate responsive HTML `<picture>` elements with WebP and AVIF variants, while offering on-the-fly image processing during local development!\n\n## Features\n- **Art Direction & Presets:** Define named presets for different UI components (e.g., \"card\", \"hero\") with specific breakpoints, aspect ratios, and cropping focus.\n- **Responsive Generation:** Emits optimized `<picture>` sets based on configurable width multipliers (e.g., 1x, 2x).\n- **Default \"Original Size\" Logic:** If no widths are configured, the plugin automatically detects the image's native width and applies multipliers from there.\n- **Aspect Ratio & Cropping:** Automatically crop images to specific aspect ratios (e.g., `16:9`, `1:1`) with controllable focus points.\n- **Layout Shift Prevention:** Automatically reads native dimensions with `sharp`, injecting `width` and `height` inline to prevent CLS.\n- **Modern Formats:** Automatically generates `WebP` and `AVIF` alongside your original JPEG/PNG files.\n- **Vite Integration:** Captures image requests from Liquid tags and intercepts them in Vite's Dev Server for instant on-the-fly previews.\n- **Static Asset Compilation:** Crunches and outputs optimized binaries into `dist/assets/images/` during production builds.\n- **Native HTML Feel:** Drop it in your template with standard attributes (`sizes`, `loading`, `class`, `alt`).\n- **Framework Agnostic:** Designed to work with any Vite setup utilizing LiquidJS.\n\n## Installation\n\n```bash\nnpm install @20dimensions/vite-plugin-liquid-image\n```\n\n## Tag Usage\n\nThe Liquid tag is designed to feel like a standard HTML `<img>`, but vastly more powerful.\n\n```liquid\n{% optimized_image \"src/images/hero.jpg\" alt=\"A beautiful hero\" class=\"rounded-xl\" sizes=\"(max-width: 600px) 100vw, 1200px\" loading=\"eager\" %}\n```\n\n### Source Argument\nThe **first argument** is the image source. It can be:\n- **A quoted string**: `\"src/images/hero.jpg\"` or `'src/images/hero.jpg'`\n- **A Liquid variable**: `featured_image` (resolved at render time)\n- **A Liquid expression with filters**: `product.image | append: \".jpg\"`\n- **An explicit keyword**: `src=my_variable`\n\n### HTML Attributes\nYou can pass **any** valid HTML attribute after the source:\n- **Quoted:** `alt=\"Hero Image\"` or `class='rounded shadow'`\n- **Unquoted variable:** `alt=i18n.hero.imageAlt` (Liquid dotted path, resolved at render time)\n\n**Commonly used:**\n| Attribute | Description |\n|---|---|\n| `sizes=\"...\"` | **Highly recommended.** Tells the browser which variant to load. Defaults to `100vw`. |\n| `alt=\"...\"` `alt=i18n.path` | Accessibility text. |\n| `class=\"...\"` | CSS styling hooks. |\n| `loading=\"lazy\"` | Native lazy loading. |\n| `width=N` / `height=N` | Override injected dimensions. If only one is given, the other is auto-calculated from the original ratio. |\n| `preset=\"name\"` | Use an art direction preset. |\n\n## Configuration\n\n**`vite.config.js`**:\n```js\nimport { defineConfig } from 'vite';\nimport { staticImagePlugin } from '@20dimensions/vite-plugin-liquid-image';\n\nexport default defineConfig({\n  plugins: [\n    staticImagePlugin({\n      formats: ['avif', 'webp', 'original'],\n      widths: [],         // Default: [] = uses original image width as base\n      multipliers: [1, 2], // Generates 1x and 2x (retina) variants for every width\n      quality: 80,\n      injectDimensions: true,\n      baseDir: process.cwd(), // Base dir for resolving source image paths\n      tagName: 'optimized_image', // Optionally rename the Liquid tag\n\n      // Art Direction Presets\n      presets: {\n        card: [\n          { \n            media: '(max-width: 480px)', \n            width: 400,\n            sizes: '100vw', \n            aspectRatio: '2:3', \n            position: 'top'\n          },\n          { \n            media: 'default', \n            width: 376,\n            sizes: '(max-width: 1024px) 50vw, 376px' \n          }\n        ]\n      }\n    })\n  ],\n});\n```\n\n## How widths are determined\n\n| Scenario | Base width |\n|---|---|\n| **Preset** | `width` defined per breakpoint |\n| **`widths: [400, 800]`** | Those exact widths |\n| **`widths: []` (default)** | Original image's native width (auto-detected via `sharp`) |\n\nIn all cases, `multipliers` (default `[1, 2]`) are applied. A 1000px image with defaults generates `1000w` and `2000w` variants. Upscaling is supported.\n\n## Art Direction & Presets\n\n```liquid\n{% optimized_image \"src/images/product.png\" preset=\"card\" alt=\"A cool product\" %}\n```\n\nWhen a preset is used, the tag loops through each breakpoint and multiplier and generates `<source>` elements with appropriate `media` and `srcset` attributes.\n\n## Liquid Variable Expressions\n\nThe source argument can be any Liquid expression:\n\n```liquid\n{% comment %} Simple variable {% endcomment %}\n{% optimized_image featured_image alt=\"Hero\" %}\n\n{% comment %} With filters {% endcomment %}\n{% optimized_image image_name | append: \"-hero\" sizes=\"100vw\" %}\n\n{% comment %} Passed from parent template {% endcomment %}\n{% render 'card', image: product.cover_image %}\n{# in card.liquid: #}\n{% optimized_image image preset=\"card\" %}\n```\n\n## Standalone LiquidJS Integration\n\n```js\nimport { imageTag } from '@20dimensions/vite-plugin-liquid-image';\nimport { Liquid } from 'liquidjs';\n\nconst engine = new Liquid();\nengine.plugin(imageTag({ \n    baseDir: 'src',\n    tagName: 'optimized_image'\n}));\n```\n\n## With `@20dimensions/liquid-site-builder`\n\nUse the unified `liquidImagePlugin` wrapper to register both the Vite and LiquidJS pieces in one call:\n\n**`vite.config.js`**:\n```js\nimport { defineConfig } from 'vite';\nimport { liquidSitePlugin } from '@20dimensions/liquid-site-builder/vite';\nimport { liquidImagePlugin } from '@20dimensions/vite-plugin-liquid-image';\n\nexport default defineConfig({\n  plugins: [\n    liquidSitePlugin({\n      domain: 'https://example.com',\n      defaultLanguage: 'en',\n      plugins: [\n        liquidImagePlugin({\n          formats: ['avif', 'webp', 'original'],\n          widths: [],        // Uses original image width by default\n          multipliers: [1, 2],\n          quality: 80,\n          injectDimensions: true,\n          baseDir: process.cwd()\n        })\n      ]\n    })\n  ],\n});\n```\n\n## How It Works\n1. When Liquid parses `{% optimized_image %}`, it constructs a `<picture>` element with `srcset` URLs pointing to `avif` and `webp` variants.\n2. Each request is cached in a module-level store.\n3. During local Vite `dev`, a middleware intercepts these asset URLs and processes images on-the-fly with `sharp`.\n4. During Vite `build`, the `writeBundle` hook processes the full queue and writes optimized binaries into Vite's output folder.\n\n## Contributing\nContributions are always welcome! Feel free to open an issue or submit a Pull Request.\n","readmeFilename":"README.md"}