$ npm i -D lepto-resizeSee lepto documentation for usage.
Default options:
"use": [
{
"name": "lepto-resize",
"kernel": null, /* "nearest", "cubic", "lanczos2" or "lanczos3", see Sharp doc */
"width": null,
"height": null,
"maxWidth": null,
"maxHeight": null,
"maxSize": null,
"retina": [], /* List of retina sizes, eg: 2, 3... */
"prefix": "@", /* Retina prefix of the number */
"suffix": "x" /* Retina suffix of the number */
}
]The maxSize will keep image's aspect ratio and limit his width and height to its value.
To generate retina alternatives, simply add the retina option like this: "retina": [2, 3], it will output 3 files, the original one, a two times bigger suffixed with a @2x suffix, and a three times bigger with a @3x.
The simplest solution to employ retina resources is to use the <pictures> tag:
<img srcset="assets/output/image.jpg,
assets/output/[email protected] 2x,
assets/output/[email protected] 3x"
src="assets/output/image.jpg" alt="">Easy, isn't it?
You can learn even more with the images.guide by Addy Osmani.
This project is licensed under the MIT license.