express-adaptive-images
Advanced tools
Connect/Express middleware for serving up adaptive images based on device width.
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.
$ 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>
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.
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.
The first argument of express-adaptive-images (required) is the path to your static assets on the filesystem.
It should generally be the same path that you pass to express.static.
The second argument (optional) is an object of options (see the usage example for default values).
FAQs
Connect/Express middleware for serving up adaptive images based on device width.
We found that express-adaptive-images demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.