responsive-images-generator
v0.2.2
Published
Generate responsive images
Downloads
15
Readme
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)
:mag: 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)
:mag: 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
andheight
specified. - max: Boolean — resize to the max width or height the preserving aspect ratio (both
width
andheight
have to be defined), defaultfalse
. - 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 withformat
option. - format: String — output format
jpeg
,png
,webp
orraw
, default isnull
. - crop: Crop the resized image to the exact size specified, default is
false
. - embed: Preserving aspect ratio, resize the image to the maximum
width
orheight
specified thenembed
on abackground
of the exactwidth
andheight
specified, default isfalse
. - ignoreAspectRatio: Boolean — Ignoring the aspect ratio of the input, stretch the image to the exact
width
and/orheight
provided viaresize
, default isfalse
. - 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 isfalse
. - 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 isfalse
. - 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 EXIFOrientation
tag, if any. Default isfalse
. - 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 EXIFOrientation
tag, if any. Default isfalse
. - 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 ofgamma
. Default isfalse
. - 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