Optimizing images in JS apps with IPX

We often think that the only performance improvements we can make for our website is related to the backend like making SQL queries more efficient, implement cache, joining requests, etc while there are actually many things we can do on the frontend side.

When inspecting whether a website is performant or not, the first thing I take a look at are the images. Not exactly what images does the page include, but either how it handles them.
I usually ask myself following questions:

1. Are these images properly sized?
2. Are they served with the modern format like webp?
3. Do these images come in a correct quality?

And probably some more.

In this tutorial, I want to introduce you to a great tool that I am using on the daily basis (but not exactly in its pure form but as a module in another framework) -> IPX.

What is IPX?

IPX is a high performance, secure and easy to use image proxy based on sharp and libvips.

You can read more about IPX here, about sharp here and about libvips here

So basically, IPX allows you to solve the problems and answer questions that I stated in the section above because by using it you can easily change the format, apply sizing and quality to the both static and remote images, and do many many more!

Using IPX

There is a way to actually use ipx as a proces and can be done like following:

npx ipx

But I prefer to use it in the code of my JS based applications and for that, I can use the IPX package in the following way as an Express JS Middleware:

import { createIPX, createIPXMiddleware } from "ipx";

const ipx = createIPX(/* options */);
const app = express();
app.use("/image", createIPXMiddleware(ipx));

We can pass here a global options for the IPX instance like the default format of the images like following:

const ipx = createIPX({ format: 'webp' });

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! 🚀