ImageKit WordPress Plugin

Integrate ImageKit into your WordPress website using our official WordPress plugin. The plugin automatically optimizes and delivers your images, videos, and static assets through ImageKit's CDN, improving your site's performance without requiring code changes.

With the Enhanced Media Library integration, you can browse, search, and insert assets from your ImageKit Media Library directly within WordPress - in both the classic media modal and the Gutenberg block editor. This eliminates the need to switch between WordPress and ImageKit when working with your media assets.

The plugin source code is available on GitHub.

Here is what you need to do:

Install and activate the ImageKit WordPress plugin from the WordPress plugin directory. After activation, the plugin launches a setup wizard that walks you through configuring your credentials and delivery preferences.

Enter your ImageKit credentials from the Developer section of your ImageKit dashboard. You'll need to provide your URL endpoint (e.g., https://ik.imagekit.io/your_imagekit_id), public key, and private key.

The wizard also guides you through configuring your WordPress site as a web server origin in ImageKit, with your site URL as the base URL. If you have a different setup, such as an Amazon S3 bucket, configure the appropriate origin in the external storage section of your ImageKit dashboard.

You can verify that asset delivery is working by fetching an asset through your ImageKit URL endpoint. When you add the first origin in your account, it automatically becomes accessible through the default URL endpoint, that is https://ik.imagekit.io/your_imagekit_id. Otherwise, you will have to configure an existing URL endpoint or create a new one to fetch assets from this newly added origin.

If your old asset URL was https://www.example.com/wp-content/uploads/image.jpg, then the same asset should be accessible through your ImageKit URL endpoint:

https://ik.imagekit.io/your_imagekit_id/wp-content/uploads/image.jpg

Choose what you'd like to deliver through ImageKit. All options are enabled by default and can be changed later in the plugin settings. You can enable delivery for Images (optimized via ImageKit CDN with automatic format conversion), Videos (for faster playback), and Assets (theme, plugin, and WordPress core CSS & JS files).

Access your ImageKit Media Library directly from WordPress. This feature integrates seamlessly with both the classic media modal and the Gutenberg block editor.

To use the Enhanced Media Library:

1. Open the WordPress media modal (when adding an image to a post or page)
2. Click Open Media Library button to browse your ImageKit assets
3. Search, filter, and select assets from your ImageKit account
4. Insert selected assets directly into your content

This integration requires your public key and private key to be configured in the plugin settings.

After setup, navigate to ImageKit in the WordPress admin sidebar to access the plugin settings. The settings are organized across multiple pages:

The General settings page shows your connection status, configured credentials, media library upload settings, and current usage summary.

Displays your current ImageKit connection state and configured credentials (URL endpoint, public key, private key). From here you can Reconfigure to re-run the setup wizard and update credentials, or Disconnect to remove the ImageKit connection.

Configure how new media library uploads are handled. The ImageKit folder path specifies the folder in your ImageKit account where WordPress assets are uploaded to (leave blank to use the root). The Storage option lets you choose where your assets are stored:

The sidebar displays your current ImageKit account usage, including Media Library Storage, Original Cache Storage, Bandwidth, Video Processing Units, and Extensions Units. Click Go to ImageKit Dashboard for detailed analytics.

Control how images are delivered through ImageKit.

Toggle Image delivery to enable or disable delivering images from ImageKit (when disabled, images are served from WordPress). Global image transformations lets you apply a set of ImageKit URL-based transformations to all images using ImageKit transformation syntax, e.g., q-80,f-webp for 80% quality in WebP format.

Control how videos are delivered through ImageKit.

Toggle Video delivery to enable or disable delivering videos from ImageKit (when disabled, videos are served from WordPress). Global video transformations lets you apply a set of ImageKit video transformations to all videos using ImageKit transformation syntax, e.g., h-400,w-400.

Control which static assets (CSS and JavaScript files) are delivered through ImageKit CDN.

The plugin provides six granular toggles organized by source: Theme CSS, Theme JS, Plugin CSS, Plugin JS, WordPress Core CSS, and WordPress Core JS. Each toggle controls whether that category of static files is delivered through ImageKit CDN.

To exclude specific assets from being rewritten to ImageKit URLs, use the WordPress filter hooks imagekit_exclude_url (for media URLs) or imagekit_exclude_asset_url (for CSS/JS asset URLs).

Example:

// Exclude a specific CSS file from ImageKit delivery.
add_filter( 'imagekit_exclude_asset_url', function( $exclude, $url, $handle, $type ) {
    if ( 'my-plugin-style' === $handle ) {
        return true;
    }
    return $exclude;
}, 10, 4 );

Serve perfectly sized images to every device, reducing bandwidth usage and improving page load speeds. This feature automatically generates custom srcset breakpoints, allowing browsers to download only the image size they need - smaller images for mobile devices, larger ones for desktop.

Toggle Enable responsive image breakpoints to automatically generate responsive srcset breakpoints for your images. When enabled, you can customize:

• Breakpoint distance - Minimum pixel difference between breakpoints (default: 150px)
• Maximum images - Maximum number of breakpoint images to generate (default: 15)
• Minimum image width - Smallest breakpoint width (default: 32px)
• Maximum image width - Largest breakpoint width (default: 3840px)

If you encounter issues, a detailed system report is available on the Get Help page in the plugin settings. The report includes your WordPress environment details, active theme, plugins, ImageKit plugin configuration, and PHP settings. You can copy or download the report to share with ImageKit support.

1. Always back up your site before installing the plugin or making significant configuration changes.
2. Start with images and videos - enable these first for immediate performance gains.
3. Test asset delivery gradually - enable CSS and JS delivery one category at a time to ensure compatibility.
4. Monitor your usage - check the usage summary in General settings regularly to track bandwidth and storage.
5. Configure API keys - provide public and private keys to unlock all features including media uploads and Enhanced Media Library.