ss
Navigate back to the homepage

Spaceout

Interstellar design

UX/UI design, Web and Native App develeopement.

about meHow it's doneContact
Link to $https://www.facebook.com/spaceout/Link to $https://twitter.com/spaceoutLink to $https://www.instagram.com/spaceout/Link to $https://blog.spaceout.pl/Link to $https://dribbble.com/spaceoutLink to $https://behance.com/spaceoutLink to $https://github.com/massivDash/
Cli

Sharpmachine

by
Luke Celitan
category: project, reading time: 2 min

Sharp Machine

During my intial years of development, much of my time, I have spent on frontend and frontend optimalizastions. One of those things I had to constaly do was to optimize images for web use, I had to do a upload a lot of pictures manually via backend server. Image optimalizastions are considred one of the most important step in website optimalizastion, after all one unoptimized image can weight 16 x as much as the website bundle, and we were also checed on the google page speed insights.

The idea for a cli optimizing came to me as obvious choice, and so the shapmachine was born. Sharp Machine is an image optimizing program cli meant to be installed globally. After execution Sharp Machine will scan for images and optimize them according to config set up via interactive cli. You can resize, crop and force format and edit whole sharp module config (will open your fav editor) via cli command. Uses sharp npm module as base for image manipulation.

Sharpmachine was the the second project I considred publishing to npm. I try to keep it up to date. Sometime aga I have also rewritten it into typescript. Making your own cli tool was definetly fun, a lot of ASCII and raw command console work. A great idea into getting more into interacting more with the OS rather then the user.

Sharp Machine

link to npm: https://www.npmjs.com/package/sharpmachine

Installation

1npm i -g sharpmachine

Run sharp machine

Navigate to a folder with images and run

1sharpmachine
1|_|
  1. Either type folder name, or type ”.” for current folder (required)
  2. Enter output folder (required)

Commands

If selected folder contains images (png, jpg, gif, webp), you can :

  1. Optimize images with default config; Images will optimized with 80 quality, unless specified via cli, the images will not be resized.

  2. Optimize images to webp format with default config; Images will optimized with 80 quality, unless specified via cli, the images will not be resized.

For both options cli will ask for resizing options, if specified yes, cli will demand width (number: required), height (number: leave empty to keep the aspect ration) and image quality (0 - 100)

  1. Custom Config; custom config option will open your favorite text editor, where global sharp image config resides:
1{
2 "quality":90,
3 "rotate":false,
4 "trim":false,
5 "jpegQuality":90,
6 "pngQuality":90,
7 "webpQuality":90,
8 "jpegProgressive":true,
9 "cropFocus":"left top",
10 "width":false,
11 "height":false,
12 "pngCompressionLevel":9,
13 "pngCompressionSpeed":4,
14 "toFormat":"",
15 "useMozJpeg":false
16 }

edit, save and quit

Configuration options and types can be found at: https://sharp.pixelplumbing.com/en/stable/api-operation/

  1. Show Stats (yes/no) Shows simple statistics on executed files. (Slower)

  2. Add watermark to images, cli will ask for watermark addition, in order to make this work put watermark.png into input folder. Sharpmachine will add the watermark image in the bottom right corner, please note that watermark should be smaller than the pictures you are optimizing

Contribution

All requests are more than welcome

ToDo

  • Select files from the list
  • Improve progress bars
  • Improve verbose statistics

License:

Type: ISC

Author: Lukasz Celitan, “Spaceghost”, https://spaceout.pl, info@spaceout.pl Sourcecode: github

s