You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
After following above steps, the ImageKit plugin will work out of the box. Internally it uses the below mechanism to deliver highly optimized images.
96
-
97
-
### 1. Modify URLs in production-ready HTML files
98
-
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.
99
-
100
-
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.
101
-
102
-
### 2. Redirect assets through the ImageKit Server
103
-
104
-
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](https://docs.netlify.com/routing/redirects/), 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.
93
+
After following the above steps, the ImageKit plugin will work out of the box. Internally, it uses the mechanism described [here](https://imagekit.io/docs/integration/netlify#how-does-it-work) to deliver highly optimized images.
105
94
106
95
## Limitations
107
96
@@ -114,7 +103,7 @@ In this approach, all asset paths relative to the publish directory as `imagesPa
114
103
For any feedback or to report any issues or general implementation support, please reach out to [[email protected]](mailto:[email protected])
0 commit comments