ImageKit Netlify plugin

The plugin seamlessly integrates with your Netlify site, delivering high-quality optimized images using ImageKit.

• Prerequisites
• Setup ImageKit Netlify plugin
• Limitations
• Support
• Links
• License

Prerequisites

Before starting, you need an ImageKit account to use the plugin. Then, you must set up a URL endpoint pointing to a web proxy origin, as described below.

• Add web proxy origin by following these steps.

• Add the above web proxy origin as the URL endpoint by following these steps.

After following the above steps, you will have the ImageKit URL endpoint.

https://ik.imagekit.io/{imagekit_id}/{origin_identifier}

Setup ImageKit Netlify plugin

Currently, you can integrate the plugin with the help of file-based installation.

File-based installation

Add the plugin to your Netlify configuration file netlify.toml:

[[plugins]]
  package = "netlify-plugin-imagekit"

Add the ImageKit URL endpoint:

[[plugins]]
  package = "netlify-plugin-imagekit"

  [plugins.inputs]
  urlEndpoint = "https://ik.imagekit.io/{imagekit_id}/{origin_identifier}"

Note: You can also set IMAGEKIT_URL_ENDPOINT env variable as an alternative to providing urlEndpoint in a plugin input. The environment variable can be set in multiple ways through Netlify UI, Netlify API, or Netlify CLI. You can also pass environment variable through Netlify configuration file netlify.toml.

Optionally adding imagesPath:

 [[plugins]]
  package = "netlify-plugin-imagekit"

  [plugins.inputs]
  urlEndpoint = "https://ik.imagekit.io/{imagekit_id}/{origin_identifier}"
  imagesPath = ["/my-image-path","my-image-path-two"] // default value is set to "images"

It specifies the paths, relative to the publish directory, where images are stored and should be served through the ImageKit server. If images are stored in multiple directories, you can provide an array to imagesPath, and all such images will be redirected to ImageKit. If no value is provided, the default value is set to images.

Publish Directory: When deploying a front-end project on Netlify, the deployment is done after running the build command, which generates a folder containing the build output. The name of this folder can vary depending on the framework being used. For example, the folder might be named build or dist in a React project. This folder's path must be specified as the publish directory in Netlify.

Find a comprehensive list of build commands and publish directories for various frameworks on Netlify here.

Lastly, add netlify-plugin-imagekit as a dev dependency as mentioned here.

// using npm
npm install -D netlify-plugin-imagekit

// using yarn 
yarn add --dev netlify-plugin-imagekit

After following the above steps, the ImageKit plugin will work out of the box. Internally, it uses the mechanism described here to deliver highly optimized images.

Limitations

• When external or third-party URLs are used instead of static assets in frameworks like React that do not generate HTML files after the build process or mutate the DOM on the client side, these URLs will not be replaced by ImageKit URLs. To address this issue, you can use the ImageKit client-side SDK, imagekit-react to serve third-party URLs through the ImageKit server.

• Another limitation is that when base64 URLs are used for images, no separate request is made to the backend to fetch the images. As a result, these images cannot be replaced.

Support

For any feedback or to report any issues or general implementation support, please reach out to [email protected]

Links

• Documentation
• Main website

License

Released under the MIT license.