WordPress is the most widely used platform to build websites across the globe. From small blogs to full-fledged eCommerce websites, WordPress provides the flexibility to build different kinds of websites with minimal technical effort.
You can easily integrate ImageKit.io into your WordPress website using our official WordPress plugin.
Plugin capabilities
| Feature | Available |
|---|---|
| Serve images in next-gen formats (automatic image format conversion) | Yes All new and old images in existing posts are automatically delivered in the right image format, including WebP, using ImageKit.io. |
| Automatic image optimization (metadata removal and quality optimization) | Yes All new and old images in existing posts are automatically optimized during delivery using ImageKit.io. Original images are not modified. |
| Automatic image resizing (Resizing image as per layout) | No WordPress 4.4 has added native support for responsive images. Learn more to make your theme's image responsive. |
| Lazy loading images | No You can use a plugin like a3 Lazy Load to lazy-load images. |
Integration steps
Here is what you need to do:
Step 1: Configure origin in ImageKit.io dashboard
Configure origin based on where your images are stored. For example, Amazon S3 bucket origin or web server.
Step 2: Fetch image through ImageKit.io endpoint
Let's quickly fetch the image using ImageKit.io URL endpoint and see if it's working.
When you add the first origin in your account, it automatically becomes accessible through the default URL endpoint, that is https://ik.imagekit.io/your_imagekit_id. Otherwise, you will have to configure an existing URL endpoint or create a new one to fetch images from this newly added origin.
If your old image URL was https://www.example.com/wp-content/uploads/image.jpg, then the same image should be accessible through ImageKit.io URL-endpoint, i.e., https://ik.imagekit.io/your_imagekit_id/wp-content/uploads/image.jpg
Step 3: Install and configure ImageKit.io plugin in WordPress
- Install and activate ImageKit.io WordPress plugin.
- Go to Settings:arrow_right:ImageKit.io setting.
- Fill the ImageKit URL endpoint (or CNAME) with
your_imagekit_url_endpoint. Copy and paste from the ImageKit.io dashboard. - Click the "Save changes" button.
- Flush cache, if any.
Now all the image files under theme directory on your WordPress site (with extensions matching one of gif, png, jpg, jpeg, bmp, ico, webp) will be loaded via ImageKit.io.
Using ImageKit.io to deliver non-image static assets like JS or CSS
By default, ImageKit.io plugin is configured to load only image files through ImageKit.io URL endpoint, but you can override this setting by changing the value in File types field.
Enter the semicolon-separated list to allow JS and CSS files as well, for example - *.js;*.css;*.gif;*.png;*.jpg;*.jpeg;*.bmp;*.ico;*.webp
Loading files from custom directories outside theme folder
By default, the ImageKit.io WordPress plugin loads files from the theme folder. But you can override this setting by adding new paths in Custom files field. All the values in this field are separated by a new line. Wildcard (*) is allowed.
Restrict loading specific files through ImageKit.io
There could be a case where you don't want the files on a specific path or pattern to be loaded via ImageKit.io. This can be done by setting the right values in Rejected files field. All the values in this field are separated by a new line. Wildcard (*) is allowed.
For example, we want to avoid loading captcha assets through ImageKit.io, so we can enter wp-content/uploads/wpcf7_captcha/* under rejected files, as shown in the screenshot above.