npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

express-imagemin-proxy

v1.3.0

Published

An express middleware to optimize images from a backend, with resizing and converting

Downloads

10

Readme

express-imagemin-proxy

An Express middleware to serve up minified images retrieved from a backend.

https://nodei.co/npm/express-imagemin-proxy.svg?downloads=true&downloadRank=true&stars=true

Dependency Status Coverage Status Known Vulnerabilities

master: Build Status Inline docs

Prerequisites

Your environment must have imagemagick and graphicsmagick available in the $PATH.

Usage

First, instantiate the route. You must pass in two arguments: a backend function and an object of options.

The backend function is passed two arguments: the Express request object, and the Express response object. However, you can't just put an Express route here. This function is expected to return a Promise that resolves to a Buffer containing an image.

In the options, pass in any Imagemin plugins as an array called plugins.

const fetch = require('node-fetch')
const express = require('express')
const app = express()
/* ... plugin requires go here ... */

const imageminProxy = new ImageminProxy((req, res) => {
	// Here's my backend function.
	// This is a very basic function that always returns the same image.
	return fetch('http://my.backend/folder/some-image.png')
		.then(x => x.ok ? x.buffer() : Promise.reject(x))
}, {
	plugins: [
		imageminPngQuant({quality: '45-80', strip: true, speed: 3}),
		imageminJpegOptim({max: 90}),
		imageminGifsicle({colors: 256, optimizationLevel: 3, interlaced: true}),
		imageminSvgo({plugins: [{removeViewBox: false}]}),
	]
})

app.use('/img', imageminProxy)

app.listen()

Examples of Backend Functions

Act as a reverse proxy for some backend:

const url = require('url')
const baseUrl = 'https://some-server-with-a-folder-of-images/imgSubfolder'
const myBackendFunc = (req, res) => {
	// Change the URL so that it's pointing to the other server's folder
	const cleanUrl = url.parse(baseUrl + req.url)

	// Clean out all the query parameters from it
	cleanUrl.search = ''

	return fetch(cleanUrl)
		.then(x => {
			if( !x.ok ) {
				return Promise.reject(x)
			}

			// Set the content type from the backend if there is one
			if( x.headers.has('content-type') ) {
				res.contentType(x.headers.get('content-type'))
			}

			return x.buffer()
		})
		.catch(err => {
			if( 'status' in err ) {
				// A Fetch error -- send it to the client
				res.status(err.status)
				res.send(err.statusText)
			}
			return Promise.reject(err)
		})
}

Options

plugins

Default: []

Specify an array containing Imagemin plugins here. These will be used to minify any applicable images.

guessFormat

Default: true

If this is true and the backend has not set Content-Type headers (or they are set to application/octet-stream), try to figure out what the response really is.

  • If the format query parameter is specified, use that as a file extension for determining a MIME type.
  • Otherwise, try to guess using file-type.

This is a useful option if you're not always certain what you're going to get, or for some reason the backend can't get file extensions on its own.

graphicsmagickPath

Default: undefined

If GraphicsMagick is not in your $PATH, you will get an error like Stream yields empty buffer when attempting to resize or convert images. You can specify a directory containing the Graphicsmagick binaries (not the binary itself) here. See imagemin-gm for more information.

handleBlankResponse

Default: 404

If this is a non-false value and the backend gives an empty response, send this HTTP code.

If this is a false value, throw a EmptyResponseError instead.

EmptyResponseError can be accessed at imageminProxy.errors.EmptyResponseError for type checking if desired.

Query Parameters

If this route receives certain query parameters, it will pass those along to Imagemin.

Currently supported parameters:

  • width: the width of the image as a number of pixels
  • height: the height of the image as a number of pixels
  • gravity: when resizing the image, what side of the image should be prioritized?

See imagemin-gm for more information.

Known Issues / TODO

  • [ ] other GM functions?

Development

Please use the included ESlint configuration to enforce style when developing. Use yarn test --coverage to run the linter and test suite as well as coverage before commits.

To generate documentation, use yarn doc or yarn docdev.

License

MIT