Any web server, e.g., Nginx, ELB, ALB, EC2, Magento, WordPress, etc., or storage that is accessible over HTTP or HTTPS can be configured as an origin in ImageKit.io. This allows you to use ImageKit.io's real-time image and video optimization, transformation, and other features on all existing files.
Before continuing, understand how external storage integration works, what is URL endpoint, and how to troubleshoot 404 errors.
Step 1: Configure origin
- Go to the External Storage section in your ImageKit.io dashboard, and click on the "Add New" button.
- Choose "Web Folder" from the Origin type dropdown.
- Give your origin a name. It will appear in the list of origins you have added. For example - Website Server.
- Fill out the base URL, for example, if your current file URL is
https://www.example.com/rest-of-the-path.jpg
, then enterhttps://www.example.com
as the base URL. - Leave the advanced options as it is for now.
- Click on the Save button.
Whitelist request from ImageKit.io
Make sure that the file URL is accessible from ImageKit.io. Learn more.
Step 2: Access the file through ImageKit.io URL endpoint
When you add your first external source (origin) in the dashboard, the origin is, by default, made accessible through the default URL endpoint of your ImageKit.io account. For subsequent origins, you can either create a separate URL endpoint or edit the existing URL endpoint (including default) and make this newly added origin accessible by editing the origin preference list.
When you request
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg
,
ImageKit.io internally fetches the file from
https://www.example.com/rest-of-the-path.jpg
.
URL endpoint transformation file path ┌─────────────────────────────────────┐┌─────────────┐┌───────────────────┐ https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg
Let's look at a few examples of how to fetch an image file. The same would work for other file types as well.
- Original file through your web server (old URL)
https://www.example.com/rest-of-the-path.jpg - The same file using ImageKit.io URL endpoint
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg - Resized to 300x300px with transformation as path parameter
https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300
/rest-of-the-path.jpg - Resized to 300x300px with transformation as query parameter
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?tr=w-300,h-300
If you get a "Not found" error while accessing the file, check out this troubleshooting guide.
You can also use a custom domain like static.example.com.
Step 3: Integrate and Go live
Start using ImageKit.io URLs in your application to deliver perfect images and videos.
- Checkout quick start guides for different technologies.
- Apply transformations to deliver the perfect visual experience.
- Learn how to optimize images & videos for web delivery.
- Refer to production checklist before going live.
Advanced options for web server origin
Include canonical response header
When enabled, the response contains a Link header with the appropriate URL and rel=canonical
. You will have to specify the base URL for the canonical header.
For example, if you set https://www.example.com
as the base URL for the canonical header, then the response headers for URL https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg
will have a Link header like this:
Link: <https://www.example.com/rest-of-the-path.jpg>; rel="canonical"
Forward Host header to this origin
By default, when ImageKit.io tries to get the file from your origin, the value of the Host header is the same as the base URL specified for the origin. For example, if the base URL is https://www.example.com, then www.example.com
gets forwarded to your origin.
However, when this setting is enabled, the host value from the actual URL, not the base URL, will be forwarded to the origin as the Host header. This is done only when you use a custom domain name for your URLs. For example, if you are using a custom domain name for your file URLs, like static.example.com
, then static.example.com
gets forwarded to your origin as the Host header instead of www.example.com