Adaptive Images for ExpressJS

Disclaimer about project

This module is 100% inspired by Matt Wilcox's PHP library, "Adaptive Images". It is not a one-to-one mapping in terms of features, but the general idea is the same.

This is a piece of middleware that can be used with Express and Connect.

Installation

$ npm install express-adaptive-images

Just like the PHP library you also need to add one line of Javascript to the <head> of your page to set a cookie on the browser/client side with the device's resolution.

<script>
  document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
</script>

Dependencies

Since a cookie is needed to know the device's resolution, it is required that you use cookie-parser middleware or any other alternative that would produce an object of cookies on req.cookies.

Internally express-adaptive-images also uses the gm library to resize the images, so you will need to have either GraphicsMagick or ImageMagick installed on your server. This is pretty easy, so I suggest you take a look here for instructions for your operating system.

By default GraphicsMagick is used by this module, or you can choose to use ImageMagick by setting the { useImageMagick: true } property as part of the options.

Usage

var adaptiveImages = require('express-adaptive-images');
var cookieParser = require('cookie-parser');
var express = require('express');

var app = express();
var defaultOptions = {
  imageTypes: [ '.jpg', '.png', '.jpeg', '.gif' ],
  breakpoints: [ 1382, 992, 768, 480 ],
  cachePath: 'ai-cache',
  watchCache: true,
  cachePeriod: 60 * 60 * 24 * 7, // 7 days in seconds
  setExpirationHeaders: true,
  useImageMagick: false,
  debug: false
};
var staticPath = __dirname + '/static';

app.use(cookieParser());
app.use(adaptiveImages(staticPath, defaultOptions));
app.use(express.static(staticPath));

Warning: express-adaptive-images should be used before any middleware that is serving files (e.g. express.static) so that they know to serve the new resized and cached files.

Overview