Assemble plugin that allows to resize your images

npm install assemble-image-resizer
9 downloads in the last month


Assemble plugin for resizing images found in your templates.


From the same directory as your project's Gruntfile and package.json, install this plugin with the following command:

npm install assemble-image-resizer --save-dev

Modify your assemble-options in your Gruntfile so that the assemble-image-resizer plugin is used. You can also specify imageResizer-options (optional).

  // ...

  assemble: {
    options: {
      // ...
      plugins: [require("assemble-image-resizer")],
      imageResizer: {
        srcRoot: "public", // default
        destRoot: "dest", // default
        subpath: "resize-cache", // default
        defaultFormat: "jpg", // default is "same as source"
      // ...

  // ...

With the above configuration an image will

  • be loaded from public/image.png,
  • be stored in dest/resize-cache/resized-image.jpg, and
  • have the URL /resize-cache/resized-image.jpg.

Usage (with assemble-liquid)

  {{ "/images/selfie.png" | resize:"128x128#" | image_tag }}

With the example-configuration from above this will output

  <img src="/resize-cache/selfie.png-128x128h.jpg">

Possible resize formats

The syntax of the resize-argument is [width]x[height][flags][.extension].

fit Resize image fit within 200x300 (touch from inside).

Resize image to width of at least 200.
Resize image to height of at least 300.
fill Resize image to fill 200x300 (touch from outside).
Resize image to width of at least 200 and convert it to a JPEG.


  • Add option to specify output format (png for alpha-support).
  • Add option to modify JPEG-quality.
  • Add an option that allows customization of missing-file handling (ignore, fail, or generate placeholder).
  • Add !-flag to allow non-proportional resizing.
  • Add support for conditional < and >-flags, that only resize if smaller and if larger respectively.


Marcel Jackwerth

Copyright 2013 Marcel Jackwerth

MIT License

npm loves you