Responsive Images Generator

Let's say you need to generate some responsive images. Automatically. This package will help you do it. Greatly inspired by gulp-responsive, which reduced the time it took to build this down to a mere hours. The configuration object is basically the same. If you're using Gulp, just go and use it.

npm install responsive-images-generator

Usage Example

Simple Scaling

Let's say you have two images aileen.jpg and kevin.jpg and want said images to be resized.

const configs = [
    {width: '20%', rename: {suffix: '@1x'}},
    {width: '40%', rename: {suffix: '@2x'}},
    {width: '60%', rename: {suffix: '@3x'}},
    {width: '80%', rename: {suffix: '@4x'}},
    {width: '100%', rename: {suffix: '@5x'}}
]
const images = [
  path.join(__dirname, 'aileen.jpg'),
  path.join(__dirname, 'kevin.jpg')
]

generateResponsiveImages(images, configs)

🔍 Output on disk will be:

aileen.jpg
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
kevin.jpg
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Renaming Images To Width

If you want to use your scaled images with a srcset (or something similar), you might need to rename your images sensibly. Let's go and do that.

const pattern = /(?:.*)(@[0-9]{0,10}x)$/
const files = fs.readdirSync('/path/to/my/images')
  .filter((file) => file !== '.DS_Store')
  .map((file) => `/path/to/my/images/${file}`)

renameImagesToSize(files, pattern)

🔍 Output on disk will be:

aileen-120x.jpg
aileen-180x.jpg
aileen-240x.jpg
aileen-300x.jpg
aileen-60x.jpg
aileen.jpg
kevin-120x.jpg
kevin-180x.jpg
kevin-240x.jpg
kevin-300x.jpg
kevin-60x.jpg
kevin.jpg

Configuration

Configuration unit is an object:

• name: String — filename glob pattern.
• width: Number or String — width in pixels or percentage of the original, not set by default.
• height: Number or String — height in pixels or percentage of the original, not set by default.
• withoutEnlargement: Boolean — do not enlarge the output image, default true.
• skipOnEnlargement: Boolean — do not write an output image at all if the original image is smaller than the configured width or height, default false.
• min: Boolean — preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to the width and height specified.
• max: Boolean — resize to the max width or height the preserving aspect ratio (both width and height have to be defined), default false.
• quality: Number — output quality for JPEG, WebP and TIFF, default 80.
• progressive: Boolean — progressive (interlace) scan for JPEG and PNG output, default false.
• withMetadata: Boolean — include image metadata, default false.
• compressionLevel: Number — zlib compression level for PNG, default 6.
• rename: String, Object or Function — renaming options, file will not be renamed by default. When extname is specified, output format is parsed from extension. You can override this autodetection with format option.
• format: String — output format jpeg, png, webp or raw, default is null.
• crop: Crop the resized image to the exact size specified, default is false.
• embed: Preserving aspect ratio, resize the image to the maximum width or height specified then embed on a background of the exact width and height specified, default is false.
• ignoreAspectRatio: Boolean — Ignoring the aspect ratio of the input, stretch the image to the exact width and/or height provided via resize, default is false.
• interpolator: String — The interpolator to use for image enlargement, defaulting to bicubic.
• kernel: String — The kernel to use for image reduction, defaulting to lanczos3.
• background: Color — Set the background for the embed and flatten operations, '#default is fff'.
• flatten: Boolean — Merge alpha transparency channel, if any, with background, default is false.
• negate: Boolean — Produces the "negative" of the image, default is false.
• rotate: Boolean — Rotate the output image by either an explicit angle or auto-orient based on the EXIF Orientation tag, default is false.
• flip: Boolean — Flip the image about the vertical Y axis. This always occurs after rotation, if any. The use of flip implies the removal of the EXIF Orientation tag, if any. Default is false.
• flop: Boolean — Flop the image about the horizontal X axis. This always occurs after rotation, if any. The use of flop implies the removal of the EXIF Orientation tag, if any. Default is false.
• blur: Boolean — When used without parameters, performs a fast, mild blur of the output image. This typically reduces performance by 10%. Default is false.
• sharpen: Boolean — When used without parameters, performs a fast, mild sharpen of the output image. This typically reduces performance by 10%. Default is false.
• threshold: Number or Boolean — Converts all pixels in the image to greyscale white or black, default is false.
• gamma: Boolean — Apply a gamma correction by reducing the encoding (darken) pre-resize at a factor of 1/gamma then increasing the encoding (brighten) post-resize at a factor of gamma. Default is false.
• grayscale: Boolean — Convert to 8-bit greyscale; 256 shades of grey, default is false.
• normalize: Boolean — Enhance output image contrast by stretching its luminance to cover the full dynamic range. This typically reduces performance by 30%. Default is false.
• tile: Boolean or Object — The size and overlap, in pixels, of square Deep Zoom image pyramid tiles, default is false.
• withoutChromaSubsampling: Boolean — Disable the use of chroma subsampling with JPEG output (4:4:4), default is false.

Detailed description of each option can be found in the sharp API documentation.

Renaming

Renaming is implemented by the rename module. Options correspond with options of gulp-rename.

License

MIT, Please see license for details. Code taken from gulp-responsive MIT © Evgeny Vlasenko