Skip to main content
The Autorender WordPress plugin rewrites your media URLs to serve through the Autorender edge network, optimizing image formats (WebP, AVIF) and sizes on demand. It also adds an “Import from Autorender” button to the editor so you can insert assets from your cloud library.

​
How does it work?

The plugin works in two ways:
  1. URL rewriting — it hooks into WordPress rendering (the_content and attachment hooks) to rewrite your existing image and media URLs to point at your Autorender CDN. It also generates responsive srcset resolutions automatically.
  2. Media picker integration — it adds an “Import from Autorender” button to the Gutenberg block editor and the Classic media modal, so you can browse and insert assets from your cloud library.

​
1. Install the plugin

  1. Download the latest autorender.zip plugin file.
  2. Log in to your WordPress admin dashboard.
  3. Go to Plugins → Add New, then click Upload Plugin.
  4. Choose the autorender.zip file, click Install Now, then Activate.

​
2. Create a source in Autorender

A source tells Autorender where to fetch your original files from.
  1. Open Configurations → Sources in the Autorender dashboard (app.autorender.io/sources).
  2. Click Create Source.
  3. Fill in the form:
  1. Click Create source.

​
3. Connect the plugin

Use the setup wizard built into the plugin to finish the connection.
  1. In your WordPress admin menu, click Autorender.
  2. Click Next on the welcome screen.
  3. Enter your Autorender API Key. Generate one in the dashboard — see Create an API Key.
  4. Enter the Origin Name you chose (e.g. wordpress).
  5. Click Next.
  6. Choose which asset types (Images, Videos, Documents) Autorender handles. All are selected by default.
  7. Click Connect & Finish.
Your dashboard now shows you are connected, and the background hooks are active.

​
4. Configure image delivery and responsive sizes

These settings control how images are processed globally and resized for smaller screens.
  1. Go to Autorender → Image Settings in WordPress.
  2. Global Transformations — enter any base Autorender transforms here (e.g. q_auto,f_webp) to apply them to every image.
  3. Responsive Images — toggle on to let Autorender calculate srcset versions of your images.
    • Set the Maximum image variations (e.g. 5 to 15).
    • Set the Image size step (e.g. 150 px to generate sizes at 300w, 450w, 600w, and so on).
  4. Click Save Changes.
Autorender leaves your original files on your server untouched. It rewrites the src and srcset tags on the frontend to point to the edge CDN.

​
5. Use the Gutenberg picker

When you upload an image directly to Autorender, or want to reuse an optimized cloud asset, reach the picker from the editor.
  1. Open a post or page in the Gutenberg editor.
  2. Add a new Image Block.
  3. In the placeholder, click Import from Autorender.
  4. The media modal opens to the Autorender interface.
  5. Select an image. Autorender generates the img markup (including responsive srcset) and inserts it into the editor.

​
Next steps

Automatic format

Serve AVIF or WebP per browser with f_auto.

Resize and aspect ratio

Control width, height, and fit on every delivery URL.