S3-compatible storage like DigitalOcean Spaces or Wasabi can be interfaced using the S3 API and specification. You can seamlessly integrate these storages with your ImageKit.io account. This allows you to use ImageKit.io's real-time optimization, transformation, and streaming features on all existing images and videos in your storage. You will also be able to deliver non-media files like JS, CSS, and more with this integration.
Storage endpoint for S3-compatible origins
When connecting S3-compatible storage to ImageKit, most options and inputs remain the same as a regular AWS S3 bucket integration, except for the Endpoint input parameter. A S3-compatible storage provider, such as Wasabi, will provide a Storage endpoint or a service URL for integration with third-party services like ImageKit.io.
For instance, here's an example endpoint for Wasabi storage: https://s3.us-west-1.wasabisys.com found on 'What are the service URLs for Wasabi's different regions?'. You can similarly find the appropriate endpoint for your S3-compatible storage provider in storage provider documentation.
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 S3-Compatible Storage from the Origin type dropdown.
- Give your origin a name. It will appear in the list of origins you have added. For example - Wasabi - Product images bucket.
- Fill out the Bucket name.
- Specify the Bucket folder in which your files are present. If you have to access files at the root (i.e., present directly in the bucket and not inside a folder), enter
/. - Fill out the Access and Secret keys. These keys should provide read-only access to ImageKit.io, as explained below.
- Enter the Endpoint for your storage provider as explained above.
- Leave the advanced options as it is for now.
- Click on the Save button.
Read-only permission required
ImageKit.io needs read-only access to your storage bucket. You can refer to your S3-compatible storage provider's documentation to figure out how to provide read-only access to a bucket.
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 accesses the object at path /rest-of-the-path.jpg in your bucket (assuming that you added / in the bucket folder input while adding the origin).
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 S3-compatible storage (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.
Handling special characters in the filename
Please refer to the documentation here.
Advanced options for S3 type 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"
Use path-style URLs instead of virtual-hosted style URLs
When enabled, path-style URLs will be used instead of the default, virtual-hosted style URLs while fetching the file from your S3-compatible storage provider. This may be useful if your provider does not yet support the virtual-hosted style URLs i.e. URLs where the bucket name is a part of the hostname.
For example, if your service provider's endpoint is https://s3.wasabisys.com, your bucket is named product-images, and your file is named red-dress.jpg, then the URL generated as per each style will be:
virtual-hosted [default]: https://product-images.s3.wasabisys.com/red-dress.jpg path-style: https://s3.wasabisys.com/product-images/red-dress.jpg