fastify-modern-images

This fastify plugin will automatically transform your images to modern formats like avif or webp.

Compatibility

Versions 0.2.x and above are compatible with fastify 4.x
For fastify 3.x use version 0.1.x of this plugin

Features

supports avif, webp, jpeg and png
changes format based on current browser
reduces quality automatically
resize images on the fly using query parameters

Installation

npm i fastify-modern-images

Usage

const path = require('path');
const fastify = require('fastify')({ logger: { level: 'trace' } });

fastify
    .register(require('@fastify/static'), {
        root: path.join(__dirname, 'public'),
        prefix: '/'
    })
    .register(require('fastify-modern-images'), { quality: 7 })
    .listen({ port: 3000 }, err => {
        if (err) throw err;
    });

Options

{
    regex: /.*/, // If it is set will check this regex against the request path. Will only apply plugin if it is true.
    quality: '7', // Sets the default quality from '1' (worst), '2', ... '9' (best).
    rembg: {
        modal: 'u2netp' // https://github.com/danielgatis/rembg#models
    },
    compression: {
        avif: {
            enabled: true, // Define if this format should be used.
            format: 'avif', // One of 'avif', 'webp', 'jpeg', 'png'.
            priority: 4, // Set a higher number to prefer a format over another one. Defaulting to avif -> webp -> jpeg -> png.
            alpha: true, // Define if the format supports images with an alpha layer.
            quality: { // Maps the overall quality to a quality specific for this format.
                '1': 50,
                '2': 55,
                ...
                '9': 95
            },
            options: {}, // Options which should be passed to sharp (https://sharp.pixelplumbing.com/api-output#parameters-5).
            contentType: 'image/avif', // Set the Content-Type header for this image format.
            supported: (accept: string) => boolean, // A function which checks based on the Accept-Header, if this image format is supported.
        },
        webp: { ... },
        jpeg: { ... },
        png: { ... }
    }
}

Image transformation

You can add query parameters to the url to resize your images on the fly. Here are some examples.

http://localhost:3000/test.jpg?width=150
http://localhost:3000/test.jpg?height=150
http://localhost:3000/test.jpg?width=150&height=200
http://localhost:3000/test.jpg?width=150&height=200&fit=contain&background=red
http://localhost:3000/test.jpg?width=150&height=200&position=bottom
http://localhost:3000/test.jpg?rotation=45
http://localhost:3000/test.jpg?trim

You can also use short versions of the parameters.

http://localhost:3000/test.jpg?w=150
http://localhost:3000/test.jpg?h=150
http://localhost:3000/test.jpg?w=150&h=200
http://localhost:3000/test.jpg?w=150&h=200&f=contain&b=red
http://localhost:3000/test.jpg?w=150&h=200&p=bottom
http://localhost:3000/test.jpg?r=45
http://localhost:3000/test.jpg?t

Have a look at the sharp documentation for all available options.

You can also set the quality via a query parameter:

http://localhost:3000/test.jpg?quality=9
http://localhost:3000/test.jpg?q=2

AI Background Removal

Make sure python and rembg is installed.

pip install rembg[cli]

Examples:

http://localhost:3000/product.jpeg?ai
http://localhost:3000/product.jpeg?ai=u2netp // Define which model should be used.
http://localhost:3000/product.jpeg?ai&background=red
http://localhost:3000/product.jpeg?a // Short version

joberthel/fastify-modern-images