- Configuration and functions
- Using imgix without a plugin (Asset Manager)
wp-imgix plugin is a lightweight, community-maintained plugin that allows imgix to serve and transform images on your WordPress site.
If you want to manage your images within the WordPress CMS, we recommend using wp-imgix.
- Upload and enable wp-imgix.
- Add define(
your.imgix.net) to your wp-config.php file.
- If you're signing URLs, Add define(
abcdefg123456) to your wp-config.php file.
We strongly recommend installing S3-Uploads, which allows you to offload your images to S3. There are several benefits to offloading your images and uploads to S3:
- Files stored in S3 tend to be more reliably delivered via the imgix service than files stored in the default
- Using an S3 Source gives you automatic access to Asset Manager in imgix
- Offloading files can potentially save you server space for your WP installation
Typically the above steps are all you need to do; however, you can use the following public-facing functions and filters. For more information on modifiable functions and filters, visit the plugin's GitHub repo.
The Asset Manager allows you to use imgix in WordPress posts and pages (not thumbnails or featured images) without needing to install any other plugins. The only requirement is that you use an Asset Manager compatible Source (S3/GCS/Azure).
Once you've configured Asset Manager so that you can upload images into your bucket, you can click on an image to bring up the details pane. Click the
</> icon to copy an image embed code.
You can paste this embed code as HTML in WordPress to render an image.
The generated embed code is an image tag with the
srcset attribute. The
srcset provides the browser with a list of images. From this list, the browser will take the user's device pixel ratio and the sizes attribute and calculate a single image resolution for the user's device.
Note that the Asset Manager does not provide the sizes attribute. Unless you expect your image to be 100% the width of your page, it is essential that you define a
sizes attribute that matches the rendered size of your image. Otherwise, your image performance may worsen.
As an example, we copied an image embed from the Asset Manager. Additionally, we added
sizes="(min-width: 780px) 780px, 100vw" because we expect the max size of the image to be 780px on this page:
When pasted into WordPress, it will generate this image:
wp-imgix plugin automatically changes the image URL so that all your current and new images get served via imgix.
If, for whatever reason, you are still serving images with an old URL and you wish to use imgix for all your WordPress URLs, follow the steps below:
NOTE: Before proceeding, please make a backup of your WordPress site and your database. Failure to do so can leave your WordPress database in an unrecoverable state
- If you are using S3-Uploads, upload a few images and make a note of the folder structure in S3
- (ONLY Upload the rest of your WordPress images to your S3 bucket, making sure to clone the folder structure in your S3
- Do a find and replace in your WP database (instructions vary on how to do this - you can try exporting the database → editing it with a code editor → import it back)
- Back up your database before performing any find and replace operations. Failing to do so may prevent you from restoring your data if you make a mistake.
- Look for old image BASE paths (ex:
- Replace with your new imgix path (ex:
- Save and apply
- This should update all your old image URLs with your new imgix URLs
These are the general instructions for converting WordPress image URLs to imgix. Depending on your WordPress setup, you may need to do more than just edit the database values.
- ContentfulbuildBrowse, search, and add assets into your content quickly and easily via the imgix Asset Manager.TypeScript 10 3 days ago
- Craft Image OptimizeAutomatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.PHP 232 10 days ago
- FigmaBrowse, search, and insert image assets into your Figma designs quickly and easily via the imgix Asset Manager.Invalid date
- Imager X for CraftAn image manipulation plugin for the Craft CMS that supports imgix URLsPHP 23 22 days ago
- Nuxt ImagePlug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using your imgix images.TypeScript 1125 < 1 day ago
- Superbig Craft PluginA plugin for the Craft CMS that adds full access to the imgix API for manipulating imagesPHP 13 a year ago