Webp-jxr-middleware

Express middleware to replace jpg/png/jpeg with webp/jxr

View the Project on GitHub obartra/webp-jxr-middleware

CircleCI API Doc Coverage Status Dependencies DevDependencies

Installation

npm install webp-jxr-middleware

Usage

webp-jxr-middleware should be used before any middleware that is serving files (e.g. express.static) so that it serves changed format file.

import rewriteImg from 'webp-jxr-middleware';
import express from 'express';
import { join } from 'path';

const app = express();
const serverPath = join(__dirname, 'public');

app.use(rewriteImg(serverPath));
app.use(express.static(serverPath));

ES5

An ES5 compatibility build is also included at lib/es5.js. To generate it from the source, run npm run build.

You can then require it like:

var rewriteImg = require('webp-jxr-middleware/lib/es5').default;

Generating Optimized Images (WebP and JXR)

If you want improve your site's performance by serving optimized images but don't know how to get started, check out this guide.

Overview

Middleware to serve jxr and WebP images when the browser supports them. Works with Connect and Express.

It is based off connect-image-optimus and accept-webp. It maintains support for webp and jxr from the connect-image-optimus and avoids the UA parsing like accept-webp.

Development Setup

  1. Fork the repo
  2. Run npm install
  3. Run ./node_modules/.bin/precommit install
  4. Run npm run dev to initiate the development server

Contributing

  1. Commit your changes with npm run commit
  2. Push to a new branch (e.g. git push origin my-awesome-feature)
  3. Create a new Pull Request

License

MIT