Getting started overview
Integrating ImageKit involves several steps, from account creation to making your first API request. This guide outlines the process for setting up your ImageKit account, retrieving necessary API credentials, and executing an initial image transformation or delivery task. ImageKit provides real-time image and video optimization, transformation, and delivery via a content delivery network (CDN) ImageKit documentation portal.
The core process includes:
- Signing up for an ImageKit account.
- Locating and understanding your API credentials (Public Key, Private Key, URL Endpoint).
- Configuring your SDK or constructing a direct HTP request.
- Performing an initial image operation, such as serving a transformed image.
ImageKit supports various programming languages and frameworks through its official SDKs, which simplify interaction with the API. For situations where an SDK is not preferred or available for a specific environment, direct HTTP requests can be used. Key credentials facilitate secure authentication and access to your ImageKit media library and transformation features.
Quick Reference Guide
| Step | What to Do | Where |
|---|---|---|
| 1. Sign Up | Create a new ImageKit account or log in. | ImageKit Login/Signup Page |
| 2. Get Credentials | Locate your Public Key, Private Key, and URL Endpoint. | ImageKit Dashboard > Developers > API Options |
| 3. Upload File (Optional) | Upload an image to your media library to transform. | ImageKit Dashboard > Media Library > Upload |
| 4. Configure SDK/API | Initialize an SDK or prepare a direct HTTP request. | Your code editor, referencing ImageKit API reference or ImageKit Quickstart Guides |
| 5. Make First Request | Execute an image transformation or delivery request. | Your application's runtime environment |
Create an account and get keys
To begin using ImageKit, you first need an active account. ImageKit offers a free tier that includes 50 GB of bandwidth and 20 GB of storage per month, sufficient for initial testing and development.
Account Creation Steps:
- Navigate to the ImageKit signup page.
- Choose to sign up using your email address, Google account, or GitHub account.
- Follow the on-screen prompts to complete registration. This typically involves verifying your email address.
- Once registered, you will be directed to your ImageKit dashboard.
Retrieving API Credentials:
Your API credentials are essential for authenticating requests and linking your application to your ImageKit account. These include:
- Public Key: Used for client-side operations, such as generating image URLs.
- Private Key: A secret key used for server-side operations, like uploading files or managing your media library. This key should be kept secure and never exposed in client-side code.
- URL Endpoint: Your unique ImageKit domain, used as the base URL for all image and API requests.
To access these credentials:
- Log in to your ImageKit dashboard.
- In the left-hand navigation, click on Developers, then select API Options.
- On this page, you will find your Public Key, Private Key, and URL Endpoint. Copy these values for use in your application.
- For security practices, you can also generate new private keys or revoke existing ones from this section ImageKit API keys documentation.
Your first request
After obtaining your credentials, you can make your first request to ImageKit. This example demonstrates how to deliver a transformed image using ImageKit’s URL-based transformations, which is a common starting point for many users.
ImageKit's real-time image transformation capabilities allow you to manipulate images by adjusting parameters directly in the URL. A fundamental aspect of web performance is image optimization, which can be achieved through techniques like responsive images and efficient encoding Google Developers image optimization guide.
Example: Delivering a Transformed Image
This example assumes you have already uploaded an image named default-image.jpeg to your ImageKit media library. If you haven't, you can upload one via the dashboard or use the ImageKit upload API documentation.
Using an ImageKit SDK (Node.js Example):
First, install the ImageKit Node.js SDK:
npm install imagekit
Then, initialize the SDK with your credentials and generate a transformed URL:
const ImageKit = require('imagekit');
const imagekit = new ImageKit({
publicKey: 'YOUR_IMAGEKIT_PUBLIC_KEY',
privateKey: 'YOUR_IMAGEKIT_PRIVATE_KEY',
urlEndpoint: 'YOUR_IMAGEKIT_URL_ENDPOINT'
});
// Generate a URL for an image, resized to a width of 400 pixels
const imageUrl = imagekit.url({
src: 'https://ik.imagekit.io/YOUR_IMAGEKIT_ID/default-image.jpeg', // Replace with your actual image URL or path
transformation: [{
width: '400',
height: '300',
cropMode: 'pad_resize',
effectSharpen: '100'
}]
});
console.log('Transformed Image URL:', imageUrl);
// Expected output: https://ik.imagekit.io/YOUR_IMAGEKIT_ID/tr:w-400,h-300,cm-pad_resize,e-sharpen-100/default-image.jpeg
Replace YOUR_IMAGEKIT_PUBLIC_KEY, YOUR_IMAGEKIT_PRIVATE_KEY, YOUR_IMAGEKIT_URL_ENDPOINT, and YOUR_IMAGEKIT_ID with your actual credentials and ImageKit ID.
Direct URL Construction:
Without an SDK, you can construct the URL directly. ImageKit's URL structure for transformations follows a predictable pattern:
https://ik.imagekit.io/YOUR_IMAGEKIT_ID/tr:w-400,h-300,cm-pad_resize,e-sharpen-100/default-image.jpeg
https://ik.imagekit.io/YOUR_IMAGEKIT_ID/is your base URL endpoint.tr:indicates the start of transformation parameters.w-400sets the width to 400 pixels.h-300sets the height to 300 pixels.cm-pad_resizespecifies the crop mode as pad resize.e-sharpen-100applies a sharpen effect with a strength of 100./default-image.jpegis the path to your original image.
For a comprehensive list of transformation parameters, refer to the ImageKit URL-based transformations documentation.
Common next steps
After successfully making your first request, consider these common next steps to further integrate ImageKit into your workflow:
- Explore Advanced Transformations: Experiment with various ImageKit image transformation options, including watermarks, overlays, and color adjustments.
- Integrate File Uploads: Implement the ImageKit Upload API to programmatically upload files from your application, rather than manual uploads via the dashboard.
- Utilize Media Library Features: Organize your assets using folders, tags, and custom metadata within the ImageKit media library.
- Implement Client-side SDKs: If you are building a frontend application, integrate client-side SDKs (e.g., React, Vue.js, Angular) to simplify image URL generation and optimize loading.
- Configure Custom Domains: Set up a custom domain for your ImageKit URL endpoint to align with your brand and improve SEO.
- Monitor Usage: Regularly check your ImageKit dashboard for usage statistics, bandwidth consumption, and storage metrics to manage your plan effectively.
- Webhooks for Events: Integrate ImageKit webhooks to receive notifications for events such as uploads, deletions, or processing completions, enabling automated workflows.
Troubleshooting the first call
When encountering issues with your initial ImageKit requests, consider the following common problems and solutions:
- Incorrect API Keys or URL Endpoint:
- Issue: Your request returns an authentication error or resource not found.
- Solution: Double-check that your Public Key, Private Key, and URL Endpoint are copied exactly from your ImageKit dashboard under Developers > API Options. Ensure no extra spaces or characters are included.
- Missing Image in Media Library:
- Issue: The generated image URL leads to a broken image or a 404 error.
- Solution: Verify that the image file name and path specified in your URL (e.g.,
default-image.jpeg) exactly match an image uploaded to your ImageKit media library. Confirm the image is not in a subfolder if your URL implies a root-level asset.
- SDK Initialization Errors:
- Issue: Your application fails to initialize the ImageKit SDK.
- Solution: Ensure all required parameters (
publicKey,privateKey,urlEndpoint) are provided during SDK initialization. Consult the specific SDK documentation for correct syntax and required dependencies.
- Firewall or Network Restrictions:
- Issue: Requests from your server fail to reach ImageKit.
- Solution: If you are making server-side requests, ensure that your server's firewall or network configuration allows outbound HTTPS traffic to
imagekit.iodomains.
- Transformation Parameter Syntax:
- Issue: Image transformations are not applied correctly, or the URL returns an error.
- Solution: Review the ImageKit URL-based transformations documentation for correct parameter names and values. Ensure commas separate parameters and that values are correctly formatted (e.g.,
w-400, notwidth=400).
- Caching Issues:
- Issue: Changes to images or transformations are not immediately visible.
- Solution: Clear your browser cache or, if applicable, the CDN cache associated with your ImageKit endpoint. ImageKit's CDN layers can sometimes serve cached versions.