> ## Documentation Index > Fetch the complete documentation index at: https://autorender.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # Introduction > Add one script tag and Autorender Native turns plain HTML attributes into optimized, lazy-loaded, responsive images — no build step, no JavaScript to write. Autorender Native adds right-sized images to any website from a single `` * Mark images with `data-ar-src="PATH"` where PATH is the source path inside the workspace. ATTRIBUTE REFERENCE * `data-ar-src` — source path (or an `https://` URL to fetch). Required on each image. * `data-ar-background` — set on any element to load a CSS background instead of an ``. * `data-ar-eager` — skip lazy loading for above-the-fold images. * `width` / `height` — set both, or a CSS `aspect-ratio`, to reserve layout space. ALWAYS DO 1. Load the script with `defer`, once per page, ideally in ``. 2. Pass `ws=WORKSPACE_ID` on the script URL. Without it the runtime stays disabled. 3. Give every image a `width` and `height` (or CSS `aspect-ratio`) to avoid layout shift. 4. For the largest hero image, add a `` to a hand-built delivery URL — do not rely on a real `src`, which the browser fetches in full before the runtime replaces it. See the hero pattern at [https://autorender.io/docs/native/hero](https://autorender.io/docs/native/hero). NEVER DO 1. Do not add `data-ar-src` and a real `src` to the same non-hero `` — it double-fetches on every JavaScript-capable visit. Use `

`. The browser honors `srcset` over the `src` the runtime sets, so the optimized image is ignored. Mark a plain `` with no `srcset`. 3. Do not treat `ws` as a secret or put an API key in the page — Native is public, client-side delivery only. VERIFY * The element gains the `ar-done` class once loaded. * Its `src` resolves to `https://assets.autorender.io/WORKSPACE_ID/...`. MORE * Where to place the tag on Shopify, WordPress, Webflow, and Google Tag Manager: [https://autorender.io/docs/native/platforms](https://autorender.io/docs/native/platforms) * Machine-readable docs index: [https://autorender.io/docs/llms.txt](https://autorender.io/docs/llms.txt) * Every page inlined for context: [https://autorender.io/docs/llms-full.txt](https://autorender.io/docs/llms-full.txt) ## 1. Add the script Include the script once, ideally in `` with `defer`. Replace `LOKVTtKVGb` with your workspace ID. ```html {2} wrap theme={null} ``` `ws` is **required**. Without a valid workspace ID the runtime logs a fatal error and stays disabled. ## 2. Mark an image Add `data-ar-src` to any ``, pointing at a source path inside your workspace. Set `width` and `height` so the browser reserves the layout space before the image loads. ```html {2} theme={null} Modern lounge chair

``` The runtime measures the rendered box, requests a device-appropriate width, and assigns the optimized source as the image approaches the viewport. ## 3. Verify Open the page and inspect the image element. On a successful load the runtime: * adds the `ar-done` class to the element, and * sets `src` to a delivery URL such as `https://assets.autorender.io/LOKVTtKVGb/w_1600/products/chair.jpg`. That's it. Every marked image on the page now loads an optimized, right-sized variant, lazily, with no further configuration. The next section explains how that `w_1600` is chosen. ## How does it work? For each marked element the runtime measures the rendered width, multiplies it by the display's device pixel ratio, rounds the result up to the next width step, and builds the delivery URL. It assigns the final source lazily, as the element approaches the viewport. The generated URL follows the standard Autorender anatomy — delivery domain, workspace ID, transforms, then the source path:

[https://assets.autorender.io/](https://assets.autorender.io/) LOKVTtKVGb / w\_1600 / products/chair.jpg

Here the runtime measured an **800 px** wide box on a **2×** display, multiplied by the device pixel ratio to **1600 device px**, and requested `w_1600`; the height follows the source aspect ratio. On a **1×** display the same box requests `w_800`. ## Which browsers are supported? Autorender Native runs on any evergreen browser with `IntersectionObserver`, `ResizeObserver`, and `MutationObserver` — Chrome **64+**, Edge **79+**, Firefox **69+**, and Safari **13.1+**. There is no legacy or Internet Explorer code. A missing API degrades gracefully rather than failing: * Without `IntersectionObserver`, lazy loading is disabled and every image loads immediately — costlier on bandwidth, still fully functional. * Without `ResizeObserver`, each element is measured once and not re-measured on layout change. * Without `MutationObserver`, images added to the page after load are not discovered. ## What does it cost to install? The script is **\~6.9 KB** gzipped (**\~6.3 KB** with Brotli), loaded once with `defer` so it never blocks rendering. It fetches only the image variants your elements need. If your site sends a Content Security Policy, allowlist the two hosts the runtime uses: * `script-src https://cdn.autorender.io` — where the script loads from * `img-src https://assets.autorender.io` — where images (and CSS backgrounds) are delivered from A blocked host is the most common silent install failure: no images, no console error. Check the CSP first when the script tag returns **200** but nothing loads — see [Troubleshooting](/docs/native/troubleshooting). The `v1` script URL always serves the latest **1.x** build, so bug fixes reach your site automatically without a redeploy. Do not add a Subresource Integrity (`integrity`) hash to it — a patch changes the file's bytes, and the browser refuses to execute a script whose hash no longer matches. ## Is the workspace ID safe to expose? Yes. `ws` is a public routing identifier, not a secret, and it grants image delivery only — never uploads, deletes, or account access. Every Autorender delivery URL already contains it. It is not access-controlled, though. There is currently no referrer or domain allowlist, so anyone who copies your `ws` can request transforms against your workspace and consume quota. Treat your transform quota as public-facing, and contact support if you see delivery from domains you don't recognize. ## When to use Native instead of an SDK Use Autorender Native when you cannot or do not want to change a build pipeline — a CMS theme, a landing page, or a no-code builder. See [Platforms](/docs/native/platforms) for where the tag goes in Shopify, WordPress, Webflow, and Google Tag Manager. Use an [Autorender SDK](/docs/resources/sdks) when you already build with a framework and want typed helpers, server-side URL construction, or signed URLs. ## Next steps Tune device pixel ratio, width steps, lazy-load lookahead, and the CSS class prefix from the script URL. Every `data-ar-*` attribute and how transforms map to Autorender tokens. The lifecycle classes and DOM events on every element the runtime manages. Preload the largest image so Native never delays your Largest Contentful Paint. Where the script tag goes in Shopify, WordPress, Webflow, and Google Tag Manager. Framework-native helpers for React, Next.js, Vue, and more.