Wordpress is the most widely used platform to build websites across the globe. From small blogs to full-fledged e-commerce websites, Wordpress provides the flexibility to build different kinds of websites with minimal technical effort.

Using ImageKit for your WordPress websites has the following advantages -

  1. Advanced features like automatic WebP conversion based on browser support, responsive images, client hints, SVG and GIF optimization, make it a complete image optimzation product.
  2. ImageKit comes with an integrated CDN to speed up image delivery. So you don't have to use any other product or tool for image optimization and delivery.

Steps to optimize images using ImageKit on your Wordpress website

1. Create an account if you have not registered already. While creating an account, choose an appropriate ImageKit ID, as it will be a unique identifier in your image urls.

2. Log in to your ImageKit dashboard and go to the integration section.

3. On your Wordpress website, there could be two ways of storing images - you could be either storing them directly on your server (more likely) or you could be storing your images in an AWS S3 Bucket. If you are using an AWS S3 Bucket to store your Wordpress images, and want to optimize the images from that AWS S3 bucket, you can refer to the AWS S3 integration guide. If you are storing the images on your server, then you can continue following the steps below for integration.

4. Add a new image origin by clicking on the "Add Origin" button.

5. To integrate ImageKit with the images on your server, you need to add your server as an origin for ImageKit. For this purpose, we need to set the origin type as "Web Server - HTTP(S) server and Magento, Shopify, Wordpress etc."

6. The value of base URL should be your website's address with the protocol (http or https) in the beginning. For a website that is accessible on https://www.mywordpresswebsite.com, the image URLs would also begin with https://www.mywordpresswebsite.com. The same should be the value of the base URL as well.

7. Click on Submit.

8. The first image origin that you add is automatically added to the list of origins accessible through the default URL endpoint i.e. https://ik.imagekit.io/your_imagekitId you can modify this by editing "origin sequence". You can either continue to use the “Default URL endpoint” or create a new URL endpoint if you want to manage multiple image origins with ImageKit.

9. Before we move to the next step, let's quickly verify if the images on your Wordpress website are now accessible via ImageKit.

For example, if the image URL on your current Wordpress website is

https://www.mywordpresswebsite.com/images/photo.jpg

and you added https://www.mywordpresswebsite.com/ as the base URL while adding the origin, then for this the URL via ImageKit will be

https://ik.imagekit.io/{imagekitId}/images/photo.jpg

Here, we have replaced the value of the base URL, https://www.mywordpresswebsite.com, with, https://ik.imagekit.io/<your_imagekitId>

You will need to replace <your_imagekitId> with your own ImageKit ID.

If the above change does not work for your images, then you can get in touch with our team to help you with the integration by creating a support ticket from your ImageKit dashboard. 

10. Install and activate the ImageKit plugin in your WordPress installation.

11. Go to Settings->ImageKit setting screen to configure the plugin. In the text field at the bottom, fill the ImageKit ID you entered during registration.

12. Click Save Changes. Clear cache for your Wordpress website if any. Now refresh the webpage for your Wordpress website and check the image URLs. They should now load from URLs beginning with https://ik.imagekit.io/<your_imagekitId>. You can use the Chrome Developer Tools to check that all the images are being loaded via ImageKit and that all images are loading correctly.

We are always there to help you in case of any doubt. You can create a support ticket from your ImageKit dashboard and our team will help you with the integration.

What next?

Now that you have successfully configured ImageKit to fetch images from your WordPress website, it's time to start delivering resized and optimized images. Edit your theme files to load right dimension image. Checkout this guide to deliver responsive images on different device.

Did this answer your question?