In this guide, we will look at the steps for integrating ImageKit for images stored on any HTTP or HTTPS accessible web server. If you are looking to integrate ImageKit on a specific platform or with AWS S3 storage, we have specific guides for the following platforms and storages.
4. Wordpress Integration Guide
Steps for integrating ImageKit with any web server
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. Click on the "Add Origin" button
4. 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."
5. The value of base URL should be your web server's address with the protocol (http or https) in the beginning. It could be a domain name or an IP address with the protocol. If the image URLs begin with https://www.myhttpsserver.com/ then the base URL in the origin should also be the same.
6. 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])
7. 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 HTTP Server" now appears in the origin preference list.
8. You can either continue to use the “Default URL pattern” or create a new pattern for your web server images as described here[link].
9. Now, we will verify if the images from your web server are now accessible via ImageKit.
For example, if the image URL on your web server is
https://www.myhttpsserver.com/photo/image.jpg
and you added https://www.myhttpsserver.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>/photo/image.jpg
Here, we have replaced the value of the base URL, https://www.myhttpserver.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.
Note
After performing the above steps, ImageKit does not start downloading objects from the web server to optimize images. Whenever you request an image on you webserver, using an ImageKit URL and when the image is not available in ImageKit’s storage, only then will it get the image from your web server. Image optimization and transformation is done in real time.
Example URL Construction for Web Server Images
Original Image URL
https://www.myhttpsserver.com/path/to/my/image.jpg
Base URL
https://www.myhttpsserver.com
With default URL pattern
https://ik.imagekit.io/{imagekitId}/path/to/my/image.jpgWith custom URL pattern
https://ik.imagekit.io/{imagekitId}/{pattern}/path/to/my/image.jpgWith a custom domain name (default pattern or mapped to a particular pattern)
https://images.example.com/path/to/my/image.jpg
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.
