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. Image transformations (resize, crop etc.) and optimizations are done in real-time and on the cloud. So your server doesn't have to do the image processing part which is a costly operation. And you can achieve new image transformations in real-time just by changing the image URLs.
2. 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.
3. 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. When you register for ImageKit, you are asked to select an ImageKit ID for yourself. The ImageKit ID is the unique identifier in your URLs for your images. Normally, your URLs would begin like this
https://ik.imagekit.io/<your_imagekit_id>/
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 guide "Optimize images in AWS S3 storage with ImageKit". If you are stroing the images on your server, then you can continue following the steps below for integration.
4. Click 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.
(You can refer to the use of the field "Include Canonical Response Header" amd "Forward Host header to this origin" here[link])
8. In the “Image URL Patterns” section, you will find this new source added in “Image Origin preference” list with the “Default URL pattern”. In the screenshot below, the origin "My Wordpress Website" now appears in the origin preference list.
9. Before we move to the next step, we will 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/<your_imagekit_id>/images/photo.jpg
Here, we have replaced the value of the base URL, https://www.mywordpresswebsite.com, with, https://ik.imagekit.io/<your_imagekit_id>.
You will need to replace <your_imagekit_id> 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. If the above image did work correctly, we can now proceed to make the changes in our Wordpress admin to switch the image delivery and optimization to ImageKit. 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_imagekit_id>. 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.
13. This change alone would reduce the image size by 20% plus.
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.
