> ## 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.

# WordPress

> Integrate Autorender into your WordPress site to automatically optimize media delivery and use the native Gutenberg media picker.

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](https://app.autorender.io/sources)).
2. Click **Create Source**.
3. Fill in the form:

| Field           | Value                                                                                  |
| :-------------- | :------------------------------------------------------------------------------------- |
| **Origin Name** | A short identifier, e.g. `wordpress` (letters, numbers, hyphens, and underscores only) |
| **Origin Type** | Image Source / Web Server                                                              |
| **Base URL**    | `https://your-wordpress-site.com` (your main site URL)                                 |

4. 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](/docs/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**.

<Info>
  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.
</Info>

***

## 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

<CardGroup cols={2}>
  <Card title="Automatic format" icon="wand-magic-sparkles" iconType="solid" href="/docs/optimization/automatic">
    Serve AVIF or WebP per browser with `f_auto`.
  </Card>

  <Card title="Resize and aspect ratio" icon="crop-simple" iconType="solid" href="/docs/transformations/resize-and-aspect-ratio">
    Control width, height, and fit on every delivery URL.
  </Card>
</CardGroup>