Netlify is a powerful platform that provides a complete end-to-end solution for building highly performant and dynamic websites, e-commerce stores, and web applications.
This integration with ImageKit will facilitate the delivery of superior, high-quality images to users visiting your Netlify site.
Prerequisites
Before starting, 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 plugin with the help of file-based installation.
1. Add the plugin to your Netlify configuration file netlify.toml:
[[plugins]] package = "netlify-plugin-imagekit"
2. 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.
3. 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.
4. Add dev dependency
Lastly, add netlify-plugin-imagekit as a dev dependency in your front-end project as mentioned here.
// using npm npm install -D netlify-plugin-imagekit // using yarn yarn add --dev netlify-plugin-imagekit
5. Deploy
To see the ImageKit Netlify plugin in action, trigger the build and observe all the image assets being delivered through the ImageKit server. To learn more about how to deploy a site from scratch, check out the blog.
How does it work?
After following the above steps, the ImageKit plugin will work out of the box. Internally, it uses the mechanism below to deliver highly optimized images.
1. Modify URLs in production-ready HTML files
This is useful in scenarios where proper HTML files are generated after the build process. For these frameworks, the plugin taps into the onPostBuild hook, using jsdom to create a node-based representation of the DOM for each output HTML file. It then walks through each node, and upon finding an img or picture tag, it replaces the src or srcset path with an ImageKit URL as shown below for a demo project.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Demo Project</title> </head> <body> <img src="/myImages/girl.webp" alt="girl"> <img src="https://demo.com/premium_photo" width="500" alt="remote"> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Project</title>
</head>
<body>
<img src="https://ik.imagekit.io/{imagekit_id}/{origin_identifier}/tr:f-auto/https://netlify-demoo.netlify.app/myImages/girl.webp"
alt="girl">
<img
src="https://ik.imagekit.io/{imagekit_id}/{origin_identifier}/tr:f-auto/https://demo.com/premium_photo"
width="500" alt="remote">
</body>
</html>
While this approach works well for many situations, especially during the initial page load, it fails when using a framework with client-side routing or features that alter the DOM or that does not generate HTML files on build, such as React. This necessitates the use of the mechanism described below.
2. Redirect assets through the ImageKit Server
In this approach, all asset paths relative to the publish directory as imagesPath is specified. Then, using the redirect feature of Netlify Redirects and rewrites, we redirect the existing image URLs from the Netlify server to the ImageKit server. The ImageKit server fetches the original image, optimizes it, and then serves it back to the end user.
As we can observe in the network tab, the first request to https://react-webpack-netlify.netlify.app/images/cat.jpeg is redirected, and consequently, the asset is fetched through the ImageKit server https://ik.imagekit.io/a1yisxurxo/proxy/tr:f-auto/https://react-webpack-netlify.netlify.app/imagekit-netlify-asset/images/cat.jpeg.
Limitations
When external or third-party URLs are used instead of static assets in frameworks like
Reactthat 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.
Link
The link to official repository can be found here.