---
title: 'WordPress'
description: 'Integrate lazy-loaded, pixel-perfect, highly optimized images to the most popular CMS in the world.'
category: 'integrations'
position: 2
---

# WordPress Plugin Set Up

<docs-page-description :description="description"></docs-page-description>

## Set up your TwicPics domain

### Create your TwicPics account

If you don't have one, you can easily [create your account](https://account.twicpics.com/signup) for free.

### Create your TwicPics domain

Then set your personal TwicPics **domain** (e.g. `xxxxxx.twic.pics`). This step is necessary to optimize your images, as they will be delivered through your TwicPics domain.

### Connect your TwicPics domain to your WordPress website

Apply the following steps to connect your TwicPics domain to your WordPress website.

<doc-alert>These manual operations will be automated in future versions of the plugin.</doc-alert>

1. Select your workspace from the **Workspace** section.
   <illustration src="docs/integrations/wordpress/screenshot-1.png" width="2880" height="1716" alt="dd"></illustration>
2. Then go to the **Domains** section, select your domain, and click on the _Create path_ button.
   <illustration src="docs/integrations/wordpress/screenshot-2.png" width="2880" height="1716" alt="dd"></illustration>
   <illustration src="docs/integrations/wordpress/screenshot-3.png" width="2880" height="1716" alt="dd"></illustration>
   <illustration src="docs/integrations/wordpress/screenshot-4.png" width="2880" height="1716" alt="dd"></illustration>
3. A panel opens, in which you **must set both** _Path_ and _Source URL_ to the URL of your WordPress website. For instance, if your WordPress website is located at `https://www.my-website.com`, then _Path_ should be set to `https://www.my-website.com` and _Source URL_ should also be set to `https://www.my-website.com`.
   <doc-alert type="warning">The Plugin does not support video optimization yet: please select `Images` for _Type of media_.</doc-alert>
   <illustration src="docs/integrations/wordpress/screenshot-5.png" width="2880" height="1716" alt="dd"></illustration>
4. Finally, click on the _Save path_ button, located at the bottom right of the panel window. The new path appears in the list of your domain paths.

<doc-alert>To check if everything was set up properly, find the URL of an image on your WordPress website, prepend `https://<subdomain>.twic.pics/` to it (with `<subdomain>` being your _actual_ subdomain), enter the result in your browser address bar and your image should appear.<br/><br/>
For instance if the URL of the image on your WordPress website is `https://www.my-website.com/wp-content/uploads/picture.jpg`, then entering `https://<subdomain>.twic.pics/https://www.my-website.com/wp-content/uploads/picture.jpg` (with `<subdomain>` being your _actual_ subdomain) in your browser address bar should display the image.<br/><br/>
If it does not work, try to retrace your steps. If you still can't figure out what went wrong, feel free to contact us using the chat box on the bottom right of this very page.</doc-alert>

<doc-alert>If you have multiple WordPress websites, just repeat the operation for each of them. A TwicPics domain can hold as many paths as necessary.</doc-alert>

<doc-alert type="info">
Read more about <nuxt-link to="/docs/essentials/path-configuration">paths configuration</nuxt-link>.
</doc-alert>

Keep the TwicPics back-office open or copy your TwicPics domain name somewhere: you'll need it to configure the Plugin in your WordPress admin area.

## Install the Plugin

Install the [TwicPics Plugin](https://wordpress.org/plugins/twicpics/) just like you would do with any other WordPress plugin.

## Plugin Settings

<doc-alert type="warning">If you have any other image optimization plugin or any lazy-loading plugin installed, please disable them before moving forward.</doc-alert>

In your WordPress admin area:

1. Navigate to your WordPress plugins page and activate the TwicPics Plugin.
2. Navigate to the TwicPics Plugin settings (there is a link at the top level of your WordPress admin menu and in the _Media_ submenu).
3. Fill in the **TwicPics domain** field with your TwicPics domain.
4. Select the **Optimization level** that will be applied to your images:

   - Pixel perfect (default): JavaScript based, pixel-perfect, lazy loaded image replacement.
   - Maximum compatibility: static, purely HTML based image replacement.
     <doc-alert>The default approach should work 90% of the time but some plugins and/or themes, especially JavaScript-heavy ones, may clash with it. Use _Maximum compatibility_ if and when you witness weird image distortions and/or flickering.</doc-alert>

5. Click on the _Save Settings_ button.

<illustration src="docs/integrations/wordpress/screenshot-6.png" width="2880" height="2624" alt="TwicPics Plugin settings"></illustration>

Congratulations! You just have enabled image optimization by TwicPics on your WordPress website.

## Advanced Settings

<doc-alert type="warning">We recommand not to mess with advanced settings unless you know exactly what you are doing.</doc-alert>

### Max width of images

Maximum intrinsic width of images in pixels. This prevents generating insanely large images on very wide screens.

_Default value_: `2000`

<doc-alert type="warning">Using a lower value than the default could severely decrease the quality of the images on your WordPress website.</doc-alert>

### Resize step

Numbers of pixels image width is rounded by.

**Only available with the _Pixel perfect_ optimization level.**

_Default value_: `10`

This will reduce the number of variants generated and help CDN performance.  
With the default of `10`, a `342` pixel-wide image will be rounded down to `340` pixels.

<doc-alert type="warning">The higher the step, the less pixel perfect the result, so use with caution.</doc-alert>

### Placeholder type

Image placeholder (LQIP) displayed while image is loading.

**Only available with the _Pixel perfect_ optimization level.**

- Blank (default): nothing.
- Main color: the most represented color in the image
  <img src="https://assets.twic.pics/demo/anchor.jpeg?twic=v1/cover=100x100/output=maincolor" width="100" height="100" alt="dd">
- Mean color: the average color of the image
  <img src="https://assets.twic.pics/demo/anchor.jpeg?twic=v1/cover=100x100/output=meancolor" width="100" height="100" alt="dd">
- Preview: a blurry preview of the image
  <img src="https://assets.twic.pics/demo/anchor.jpeg?twic=v1/cover=100x100/output=preview" width="100" height="100" alt="dd">

<!--
- lowering it to `5` would potentially double the number of variants requested,
- lowering it to `1` would be pixel-perfect all the time,
- adjusting it up to `1000` would greatly reduce the number of variants but would stress the scaling algorithms of browsers more. -->