You can access any file on a publicly-available URL using Web Proxy origin. This allows you to use ImageKit.io's real-time optimization, transformation, and streaming features on all existing images and videos in your storage. With this integration, you will also be able to deliver non-media files like JS, CSS, and more.
Before continuing, understand how external storage integration works, what is URL endpoint, and how to troubleshoot 404 errors.
Prevent account abuse
Attaching this origin on an URL endpoint allows anyone to access any publicly accessible file using your account. To prevent this abuse, we strongly recommend you restrict the use of unsigned URLs. Encode the complete URL before signing it. For example, instead of using https://example.com/image.jpg
as input for the signed URL, you should usehttps%3A%2F%2Fexample.com%2Fimage.jpg
.
Step 1: Configure origin
- Go to the External Storage section in your ImageKit.io dashboard, and click on the "Add New" button.
- Choose "Web proxy" from the Origin Type dropdown.
- Give your origin a name. It will appear in the list of origins you have added. For example - My proxy origin.
- 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.
With the web proxy origin, when you request
https://ik.imagekit.io/your_imagekit_id/https://www.example.com/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 public URL ┌─────────────────────────────────────┐┌─────────────┐┌───────────────────────────────────────────┐ https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/https://www.example.com/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.
- File public URL (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/https://www.example.com/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
/https://www.example.com/rest-of-the-path.jpg - Resized to 300x300px with transformation as query parameter
https://ik.imagekit.io/your_imagekit_id/https://www.example.com/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.