Copied to Clipboard
Getting the optimized images on the frontend
Because this IPX instance is running on the Express server it can be easily used by the frontend application and it is not glued in any way with a framework. Thanks to that, you can create such middleware and use it in both Vue and React apps easily.
To get the optimized images you can just add some modifiers to the url like following:
http://localhost:3000/f_webp/static/cat.png
You need to have a folder called static in the directory where the express application and IPX are running as well as the cat.png
For more advanced examples you can go with the approach like following:
http://localhost:3000/embed,f_webp,s_200x200/static/buffalo.png
This will resize the image to 200x200px using embed method and change format to webp.
You can check out all the available options in the sharp documentation here
Summary
You now understand how to use the IPX package to optimize images on the fly! Thanks to it, the performance of your application should improve resulting in better User Experience! π