Introducing connect-static2x Middleware

connect-static2x is middleware identical to connect’s native static() middleware except for the fact that it enables support for image resizing on the fly. After an image is processed, it’s saved in the same directory as the original so the next request is cached.

This makes it incredibly easy to serve dynamically sized images and support retina devices without having to worry about creating sprites or multiple versions of images. Retina support is a snap when used with something like retina.js on the frontend.

static2x will interpret and process any jpeg or png in the following format using the default options:

  • /example.png Served as usual.
  • /example@2x.png Nothing will happen. Original file will be returned instead of upscaling.
  • /example-200×200.png The original file will be returned proportionally scaled to 200×200.
  • /example-200x200c.png The original file will be returned proportionally scaled and cropped to 200×200.
  • /example-200x200c@2x.png The original file will be returned proportionally scaled and cropped to 400×400.

Documentation and repository is hosted here on Github.