{"_id":"@danilo.riedel/img-fit","_rev":"6-9b28003b5bd52a7216a291bcf2bce794","name":"@danilo.riedel/img-fit","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.4":{"name":"@danilo.riedel/img-fit","version":"0.1.4","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit@0.1.4","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"7e305c4dbeef1b8ea222df2b3588d9f92be6ecb6","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit/-/img-fit-0.1.4.tgz","fileCount":9,"integrity":"sha512-y0kAY3YiDsTq0VUSX6uXrXo6T1k+6xkSb7SOCrcDknU2vrAYVTSz6UEm0GxHCDSi4bwaapb0lPBVAl+HvbhzzQ==","signatures":[{"sig":"MEQCIHbSxYZ9JKs1DN2UMSwBo34nEJ5czkUbLR39vnu3Jm/3AiASguiCzHyWri/0FHNXo2YG1D0Sly8lwDzS4mR92n16Ug==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit@0.1.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":24215},"main":"./src/index.cjs","type":"module","types":"./src/index.d.ts","module":"./src/index.mjs","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.mjs","require":"./src/index.cjs"}},"gitHead":"0719258af69a4f0842e4f38ac783b9a8f825ad47","scripts":{"test":"node test/img-fit.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"_npmVersion":"10.8.2","description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/img-fit_0.1.4_1781570719976_0.16803042788742517","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@danilo.riedel/img-fit","version":"0.1.5","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit@0.1.5","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"a93bc29443992d3c655b7f20029750456dc4120e","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit/-/img-fit-0.1.5.tgz","fileCount":9,"integrity":"sha512-et1/TMFHJNC+3InwoE/Vyw+kek9n9gsh56vc/Knqdn7jidJ2/kxlKHyzwkhlL/sBZsFgSWpe2gQQZ+3ae8NMpQ==","signatures":[{"sig":"MEUCIEc2MLaBvOKkOMLQYxhlBkdwTs+qEL6K3ypvn/S3FEl2AiEA4zNDj86cxiJ02EbZAsS0LGQoZGsjKgkEoIulvhqpIb0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit@0.1.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":24215},"main":"./src/index.cjs","type":"module","types":"./src/index.d.ts","module":"./src/index.mjs","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.mjs","require":"./src/index.cjs"}},"gitHead":"0898b93fc1a8e4aaa4cef1d17a1f91baade47f0a","scripts":{"test":"node test/img-fit.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"_npmVersion":"10.8.2","description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/img-fit_0.1.5_1781571064710_0.5225404962132949","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@danilo.riedel/img-fit","version":"0.1.7","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit@0.1.7","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"65592e779e005a968588c4045b9cd74cb082c7e6","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit/-/img-fit-0.1.7.tgz","fileCount":9,"integrity":"sha512-UVVMmEbEjF3jisCvJdhjh2Xk2QV2SYhsQeQgOL1CMZugRz0t42V1jjcr4NsuJBDJhrW93xzg/lfzkfmDrdWoSA==","signatures":[{"sig":"MEQCIF1fDNEqVTV104MvdUxJN7l/bAggNVhmHEX+VHlZmh7eAiBbxaMw0goLHVQkltHBqCnUMU6AGfYWqVemX+vK2me8jw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit@0.1.7","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":24215},"main":"./src/index.cjs","type":"module","types":"./src/index.d.ts","module":"./src/index.mjs","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.mjs","require":"./src/index.cjs"}},"gitHead":"804e6b1d13802b0ccb89e7c37277888bf2fcc42f","scripts":{"test":"node test/img-fit.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"_npmVersion":"10.8.2","description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/img-fit_0.1.7_1781571261284_0.2574296810606729","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@danilo.riedel/img-fit","version":"0.2.0","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit@0.2.0","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"b635af08087be2de8853c88bd420db61dd97d5b9","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit/-/img-fit-0.2.0.tgz","fileCount":9,"integrity":"sha512-zc222mVtYOU5bWHnuZy3JFOrE6ogdOYmn/vJIARfsaIKnywrlksg+EkZTh8A2vtPRwjnjKRc/xw736rEtRfmnA==","signatures":[{"sig":"MEQCIH6GyNG7RhMGOiIPvXA/Y1r2Daypyj0DLjTV60kidhToAiBNDPepQy0T9biVrkBS7GpkCXiZsvPKrZimV6KYuSx60w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":29137},"main":"./src/index.cjs","type":"module","types":"./src/index.d.ts","module":"./src/index.mjs","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.mjs","require":"./src/index.cjs"}},"gitHead":"63d709c7db5b76788e6c2863160e7927b1ad4e60","scripts":{"test":"node test/img-fit.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"_npmVersion":"10.8.2","description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/img-fit_0.2.0_1781575312695_0.3081567090359405","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@danilo.riedel/img-fit","version":"0.2.1","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit@0.2.1","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"c5d977cd897e5f9152fc7c45dd8dd21fe0589776","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit/-/img-fit-0.2.1.tgz","fileCount":9,"integrity":"sha512-hcKaEqG8+LUyEE/QO1sl2y9hY7nEPbMzwjpstPFeVREB+/A6HWR1IVv5nsFQN5f/kSyMusmFgEQ/Mbs1lE4jAA==","signatures":[{"sig":"MEQCIFm2NMorOKgaWlRAjydpptLqHm/yENp7QEBZSXjKnMt4AiAzqacbGuggI7LPsaQelynqCNktRiFzxCK3YR3XCMMiMA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":30755},"main":"./src/index.cjs","type":"module","types":"./src/index.d.ts","module":"./src/index.mjs","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.mjs","require":"./src/index.cjs"}},"gitHead":"42c3480c0fe7acb58eb26d35bfd6a5295a247af2","scripts":{"test":"node test/img-fit.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"_npmVersion":"10.8.2","description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/img-fit_0.2.1_1781630123171_0.9457902693450451","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"_id":"@danilo.riedel/img-fit@0.2.2","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"0f5316ab6efba64f7a839d2d8c410fc9eb5700fb","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit/-/img-fit-0.2.2.tgz","fileCount":9,"integrity":"sha512-RM2FB2ULytk03EpC5R0rvPDgMh4F+Srz/2af5MXJ8Fe51aGG+pTKb2Gst2UjOm3m8F7fez1GbsIskWWRqakVTA==","signatures":[{"sig":"MEQCIF6t4ytc4Z9ESrsfgPu7kshNAYj4p+0HyUGQ10Y16q9sAiAi3cbHUunDjYF65GQkI7PNNeDT1Vj6ZLdlNCc4Ms1gHA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFVbD/3Fm+wCE7y90Chh0Zd9c4rknhFVzYn8ofUqg+yzAiEAtE95Bg+/glqEEzt2M5wmfRzfuxHX2VqzFCJCljguN9c="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":30755},"main":"./src/index.cjs","name":"@danilo.riedel/img-fit","type":"module","types":"./src/index.d.ts","author":{"name":"Danilo Riedel"},"module":"./src/index.mjs","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.mjs","require":"./src/index.cjs"}},"gitHead":"ce350d3b286e4c54b1865e76b43bdf3cd2556798","license":"MIT","scripts":{"test":"node test/img-fit.test.js"},"version":"0.2.2","_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"homepage":"https://github.com/driedel/img-fit#readme","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"_npmVersion":"10.8.2","description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","directories":{},"maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/img-fit_0.2.2_1789391325167_0.14784768082824917"}}},"time":{"created":"2026-06-16T00:45:19.692Z","modified":"2026-09-14T13:08:45.556Z","0.1.4":"2026-06-16T00:45:20.117Z","0.1.5":"2026-06-16T00:51:04.868Z","0.1.7":"2026-06-16T00:54:21.414Z","0.2.0":"2026-06-16T02:01:52.833Z","0.2.1":"2026-06-16T17:15:23.310Z","0.2.2":"2026-09-14T13:08:45.250Z"},"bugs":{"url":"https://github.com/driedel/img-fit/issues"},"author":{"name":"Danilo Riedel"},"license":"MIT","homepage":"https://github.com/driedel/img-fit#readme","keywords":["image","responsive","img-fwd","optimization","cdn","resize","vanilla-js"],"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git"},"description":"A vanilla JS companion for img-fwd that picks the optimal image width for any rendered container.","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"readme":"# img-fit\n\nA tiny, dependency-free JavaScript library that picks the optimal image width for any rendered container and appends it to an [img-fwd](https://img-fwd.driedel.dev/) URL.\n\nInstead of hard-coding `?rs=800` in your HTML, add `data-img-fit` and let the browser measure the real space available after CSS has been applied.\n\n## Why?\n\n[img-fwd](https://img-fwd.driedel.dev/) resizes images on the fly with the `?rs=<width>` query parameter. Choosing the right width is usually a guessing game:\n\n- Hard-coding one width wastes bandwidth on small screens.\n- Hard-coding many breakpoints is repetitive and error-prone.\n\n`img-fit` bridges that gap: it reads the rendered container size, snaps it to a cache-friendly breakpoint, and writes the correct `?rs=<width>` value for you.\n\n## Installation\n\n```bash\nnpm install @danilo.riedel/img-fit\n```\n\n## Quick start\n\n### 1. Add the attribute\n\n```html\n<img data-img-fit=\"https://cdn.example.com/photo.jpg\" alt=\"Photo\" />\n```\n\n### 2. Initialize\n\n```js\nimport ImgFit from '@danilo.riedel/img-fit';\n\nImgFit.init();\n```\n\nThat is it. The library measures the image container, picks a width, and sets:\n\n```html\n<img src=\"https://cdn.example.com/photo.jpg?rs=800\" alt=\"Photo\" />\n```\n\n## HTML usage\n\nYou can place `data-img-fit` directly on an `<img>` or on any wrapper element. When used on a wrapper, `img-fit` injects an `<img>` inside it.\n\n```html\n<!-- Existing image element with extra CDN parameters -->\n<!-- Result: https://cdn.example.com/photo.jpg?f=webp&q=80&rs=800 -->\n<img\n  data-img-fit=\"https://cdn.example.com/photo.jpg\"\n  data-img-fit-params=\"f=webp&q=80\"\n  alt=\"Photo\"\n/>\n\n<!-- Wrapper element — img-fit injects an <img> inside -->\n<div\n  data-img-fit=\"https://cdn.example.com/photo.jpg\"\n  data-img-fit-alt=\"Photo\"\n  data-img-fit-params=\"f=avif\"\n></div>\n\n<!-- Explicit measurement base — measure .card width instead of the img itself -->\n<div class=\"card\">\n  <img\n    data-img-fit=\"https://cdn.example.com/photo.jpg\"\n    data-img-fit-base=\".card\"\n    alt=\"Photo\"\n  />\n</div>\n\n<!-- Fallback URL when data-img-fit may be empty -->\n<img\n  data-img-fit-fallback=\"https://cdn.example.com/placeholder.jpg\"\n  alt=\"Photo\"\n/>\n```\n\n### Data attributes\n\n| Attribute | Description |\n|---|---|\n| `data-img-fit` | Original image URL. |\n| `data-img-fit-alt` | `alt` text for images injected into wrapper elements. |\n| `data-img-fit-params` | Extra img-fwd parameters, e.g. `f=webp&q=80`. |\n| `data-img-fit-base` | CSS selector of an ancestor to measure when the element itself has no width. |\n| `data-img-fit-fallback` | Fallback URL when `data-img-fit` is empty. |\n\n## JavaScript API\n\n### `ImgFit.init(selector?, options?)`\n\nScan the document and start watching every matching element.\n\n```js\nImgFit.init();\n\n// Custom selector and options\nImgFit.init('[data-img-fit]', { dpr: false });\n```\n\n### `ImgFit.watch(element, options?)`\n\nWatch a single element programmatically. The `url` option lets you supply the image URL in JavaScript rather than via a `data-img-fit` attribute.\n\n```js\nconst hero = document.querySelector('#hero');\nImgFit.watch(hero, {\n  url: 'https://cdn.example.com/hero.jpg',\n  dpr: false\n});\n```\n\n### `ImgFit.unwatch(element)`\n\nStop watching an element and disconnect its resize observer.\n\n```js\nImgFit.unwatch(hero);\n```\n\n### `ImgFit.getOptimalWidth(element, options?)`\n\nReturn the snapped width that would be requested for an element.\n\n```js\nconst width = ImgFit.getOptimalWidth(hero);\nconsole.log(width); // 800\n```\n\n### `ImgFit.buildUrl(element, options?)`\n\nReturn the full URL that would be assigned to an element.\n\n```js\nconst url = ImgFit.buildUrl(hero);\n```\n\n## Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `selector` | `string` | `'[data-img-fit]'` | Selector used by `init()`. |\n| `urlAttribute` | `string` | `'data-img-fit'` | Attribute that holds the image URL. |\n| `altAttribute` | `string` | `'data-img-fit-alt'` | Attribute that holds injected image `alt` text. |\n| `paramsAttribute` | `string` | `'data-img-fit-params'` | Attribute that holds extra img-fwd params. |\n| `baseAttribute` | `string` | `'data-img-fit-base'` | Attribute that holds a measurement-base selector. |\n| `fallbackAttribute` | `string` | `'data-img-fit-fallback'` | Attribute that holds a fallback URL. |\n| `dpr` | `boolean` | `true` | Multiply the measured width by `window.devicePixelRatio`. |\n| `observeResize` | `boolean` | `true` | Update the image when the container resizes. |\n| `resizeDebounceMs` | `number` | `100` | Debounce delay for resize updates. |\n| `lazy` | `boolean` | `true` | Watch `loading=\"lazy\"` images with `IntersectionObserver` and recompute before they load. |\n| `lazyRootMargin` | `string` | `'50px'` | Root margin for the lazy-load `IntersectionObserver`. |\n| `lazyThreshold` | `number` | `0` | Visibility threshold for the lazy-load `IntersectionObserver`. |\n\n## Width snapping\n\nExact container widths would fragment caches, so `img-fit` snaps every value up to a breakpoint:\n\n| Range | Step |\n|---|---|\n| `< 300 px` | `20 px` |\n| `300 px – 1000 px` | `50 px` |\n| `> 1000 px` | `250 px` |\n\nThese helpers are exported if you need them elsewhere:\n\n```js\nimport { snapWidth, applyDpr } from '@danilo.riedel/img-fit';\n\nsnapWidth(260); // 260\nsnapWidth(265); // 280\napplyDpr(400, 2); // 800\n```\n\n## Device pixel ratio\n\nDevices like MacBook Retina, iPhone, and AMOLED phones report a `devicePixelRatio` greater than 1 — they pack 2 or 3 physical pixels into every CSS pixel. By default (`dpr: true`) `img-fit` multiplies the container width by `window.devicePixelRatio` before snapping, so every screen gets a sharp image without any extra config.\n\n**Concrete examples:**\n\n| Container (CSS px) | DPR | Raw width | After snap | `?rs=` generated |\n|---|---|---|---|---|\n| 560 px | 1× | 560 | 600 | `?rs=600` |\n| 560 px | 2× | 1 120 | 1 250 | `?rs=1250` |\n| 260 px | 2× | 520 | 550 | `?rs=550` |\n| 260 px | 3× | 780 | 800 | `?rs=800` |\n\nTo request CSS pixel widths only (disables DPR multiplication):\n\n```js\nImgFit.init({ dpr: false });\n```\n\nOr per-element via `watch()`:\n\n```js\nImgFit.watch(element, { dpr: false });\n```\n\n## Lazy loading\n\nImages with `loading=\"lazy\"` are tricky because the browser may not lay them out until they are close to the viewport. `img-fit` solves this by registering an `IntersectionObserver` for every lazy image. When the image is about to become visible, the URL is recomputed using the element's real rendered size, so the requested `?rs=` value is correct.\n\n```html\n<img\n  data-img-fit=\"https://cdn.example.com/photo.jpg\"\n  loading=\"lazy\"\n  alt=\"Photo\"\n/>\n```\n\nYou can disable this behavior per element or globally:\n\n```js\nImgFit.init({ lazy: false });\n```\n\n## Integration with img-fwd\n\n`img-fit` only adds the `?rs=<width>` query string. All other transformation parameters (`f`, `q`, `g`, `blur`, etc.) are passed through untouched.\n\n```html\n<img\n  data-img-fit=\"https://cdn.example.com/photo.jpg\"\n  data-img-fit-params=\"f=webp&q=80\"\n/>\n```\n\nResult:\n\n```html\n<img src=\"https://cdn.example.com/photo.jpg?f=webp&q=80&rs=800\" />\n```\n\nPoint your DNS or application to an [img-fwd](https://img-fwd.driedel.dev/) proxy and the image will be resized and optimized automatically.\n\n## Example\n\nSee the live vanilla example in `examples/vanilla/`:\n\n```bash\nnpx serve examples/vanilla\n```\n\nThen open the browser DevTools Network tab and resize the window. You will see each image request a different `?rs=` value based on its rendered container.\n\n## Framework support\n\n`img-fit` is vanilla JavaScript so it works in any stack. Framework-specific adapters are also available:\n\n- `@danilo.riedel/img-fit-react`\n- `@danilo.riedel/img-fit-next`\n- `@danilo.riedel/img-fit-angular`\n- `@danilo.riedel/img-fit-vue`\n\n## Browser support\n\n`img-fit` uses `ResizeObserver` and `IntersectionObserver` when available and falls back to `window.resize` events. It works in all modern browsers. Internet Explorer is not supported.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}