Skip to main content
Autorender Native adds right-sized images to any website from a single <script> tag — no build step and no code to write. You mark elements with data-ar-* attributes; the runtime measures each one, requests the width the visitor’s screen needs, and loads it lazily as it approaches the viewport. You can use Autorender Native to:
  • Serve responsive images without a bundler, framework, or SDK
  • Add Autorender to a CMS or no-code site (Shopify, WordPress, Webflow) with a single tag
  • Lazy-load images and CSS background images as they approach the viewport
  • Size every image to its rendered box and the visitor’s device pixel ratio
  • Optimize an existing site without touching its build pipeline
Autorender Native runs entirely in the browser and needs no server-side code. The script is served from cdn.autorender.io; the images it requests are delivered from assets.autorender.io.

​
Prerequisites

  • A workspace with your storage connected and at least one image reachable from it.
  • Your workspace ID — the public routing identifier in your delivery URLs (for example, LOKVTtKVGb). It is not a secret.

For AI coding agents — copy this into your agent to add Autorender Native to an HTML page correctly.

​
1. Add the script

Include the script once, ideally in <head> with defer. Replace LOKVTtKVGb with your workspace ID.
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 <img>, pointing at a source path inside your workspace. Set width and height so the browser reserves the layout space before the image loads.
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/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. 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 for where the tag goes in Shopify, WordPress, Webflow, and Google Tag Manager. Use an Autorender SDK when you already build with a framework and want typed helpers, server-side URL construction, or signed URLs.

​
Next steps

Configuration

Tune device pixel ratio, width steps, lazy-load lookahead, and the CSS class prefix from the script URL.

Attributes

Every data-ar-* attribute and how transforms map to Autorender tokens.

Events and classes

The lifecycle classes and DOM events on every element the runtime manages.

Hero and LCP

Preload the largest image so Native never delays your Largest Contentful Paint.

Platforms

Where the script tag goes in Shopify, WordPress, Webflow, and Google Tag Manager.

SDKs

Framework-native helpers for React, Next.js, Vue, and more.