It uses the excellent sharp npm package
It requires a Node.js environment because sharp is a "native" package.
Open this example on CodeSandbox:
From your terminal:
npm run devVisit http://localhost:3000 to view the resized images
The Image component is a simple wrapper which creates the resize url for our /assets/resize/$.ts route
http://localhost:3000/assets/resize/dog-1.jpg?w=600&h=600&fit=cover
- /assets/resize points to the routes/assets/resize/$.ts handler
- /dog-1.jpg points to an asset, it could also point to a nested path
- w=600 the width you want the resized image to have
- h=600 the height you want the resized image to have
- fit=cover one of the sharp fit options https://sharp.pixelplumbing.com/api-resize#resize
Since most of our images are served via a CDN, we don't have to save the resized images. Instead we set cache headers for them and let the cdn cache them for us.
sharp uses a highly performant native package called libvips. it's written in C and is extremely fast.
The implementation of the demo uses a stream based approach where the image is never stored in memory. This means it's very good at handling images of any size, and is extremely performant.
Further improvements could be done by implementing
but that is out of scope for this demo.