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

Comments

[ckshen8]

Hi Jakub, thanks for the article! We are using Vue Storefront/ Nuxt to develop our ecommerce frontend. I notice that you are a dev at Vue Storefront. I have a question for you, since VSF / Nuxt uses IPX by default, does IPX generate and save those images on the server running VSF/ Nuxt? Meaning can those images be rendered once on the first request and be saved/ available to subsequent requests so repeated rendering isn't necessary and that the saved images be made available to CDN whose origin is the VSF server? Trying to build a self-hosted image manipulator that can function like e.g. Cloudinary with its CDN / image manipulation functions.

[Jakub Andrzejewski]

Hey Buddy,

Good question. VSF is a server rendered app, which means that each request will trigger server to build page dynamically. This means that you cannot normally have these images cached as this is how IPX works. It creates server endpoints that you can send a request to to have the ipx do the image optimization for you.

But you can also configure a server middleware or route rules (depending on which version of VSF you are running) to set certain Cache Control headers to make these images generated from the server to be cached by the browser or CDN :)