9/23/2023 0 Comments Gulp image resize![]() ![]() Set to true to apply a slight unsharp mask after resizing. Catrom is very good for reduction, while hermite is good for enlargement). Set the filter to use when resizing (e.g. Possible values: Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc Override the output format of the processed file. Ranges from 0 (really bad) to 1 (almost lossless). options.qualityĭetermines the output quality of the resized image. Doesn't have any effect, if options.crop is false. When cropping images this sets the image gravity. Possible values: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast options.cropĭetermines whether images will be cropped after resizing to exactly match options.width and options.height. If set to false (default), image will be copied instead of resized if it would be upscaled by resizing. options.upscaleĭetermines whether images will be upscaled. options.heightĭefault value: 0 (only if width is defined)Ī number value that is passed as pixel or percentage value to imagemagick. Depending on your requirements and the scale of your project, that resizeImages task could easily be made incremental, which would make it even faster.} ) API imageResize(options) options.widthĭefault value: 0 (only if height is defined)Ī number value that is passed as pixel or percentage value to imagemagick. Just to give you an idea, all images and thumbnails for this website get generated in 38 milliseconds only. If you like numbers, check out the performance benchmarks available on their website. build = build "Fast" is an understatementįor any project I have worked on lately, Sharp has proven to be the fastest and most flexible option available. specify transforms const transforms = [ // compose tasks (massively simplified here) const watch = gulp. Let's now create a configuration array of objects that will specify our source and destination folders for each transforms, along with our transform options for sharp. sharp: sharp image manipulation packageĬonst fs = require ( "fs" ) const glob = require ( "glob" ) const path = require ( "path" ) const sharp = require ( "sharp" ).path: node package to work with files and directories.glob: use glob patterns to find files and return them.Let's move to creating our gulp task to resize our images. If you want a better overview of how to use Gulp 4, have a look at this excellent article on upgrading to Gulp 4 by Joe Zimmerman or, alternatively, read my humble take on it. ![]() Our main gulpfile.js is only used to compose complex tasks and to expose relevant tasks to the Gulp CLI using exports. ![]() That way, we can make tasks self-contained and just import or require them. In this case, here is the structure we are going to use: +- gulpfile.js Whenever I deal with complex tasks, I tend to split them into their own external files. Let's first install sharp as a dependency npm install -save-dev sharp It offers a wide range of options and operations we can use and is a whole lot faster and more flexible than alternatives like gulp-image-resize for example. Sharp is a Node.js image processing library to which we can easily use in a Gulp task. wide range of operations available (resize, rotate, masks, filters, etc.).ability to specify transforms characteristics per location.ability to specify different source and output locations.easy integration with Gulp (Node.js based).For many projects I work on, especially JAMstack ones, having a quick way to generate thumbnails based on source images is crucial. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |