To be clear, there are a number of options out there. But I wanted to benchmark possible node-based tools out there to see how they compared for image compression. Not slow in a bad way, granted, because it’s doing lossless compression.
#Imageoptim cli for mac#
The imageoptim tool for Mac is fantastic the one drawback is that its kinda slow. Image Manipulation Options for NodeĪs mentioned, I was previously using imagemagick to resize images and imageoptim to optimize them (both triggered via CLI commands). So that’s what led me to the following rabbit-hole of research and comparison. This would be easier to setup and control if I used node-based tools available on npm. I could, say, just POST to a URL with the iTunes app link (and any extra metadata) and my post would be created automagically by some server in the cloud. Then I don’t have to open my laptop to create a post.
#Imageoptim cli code#
But I’ve wanted to get to a future where the code that creates a post could, conceivably, be run as a lambda. In the past, I’ve really only ever run this code on my own laptop so I could ensure imagemagick and imageoptim were installed on my computer and available. In addition to not writing bash scripts anymore, I wanted to migrate this logic to node so that I didn’t have to rely on specific CLI tools being installed on the computer running this code. # At this point, I now have a `title-of-post.md` file and a `icon.png` file # Now I create a number of variations of the source `icon.png` file for file in *.png do # resize with imagemagick # optimize with imageOptim done # Move to appropriate locations, commit, and push the changes sh file which looked (simplistically) like this: # Fire my node script for adding an icon to my gallery Previously, I was using imagemagick and imageoptim on my local computer to resize and optimize each icon before committing it to git.
An optimized, resized 256×256px version.An optimized, resized 512×512px version.An optimized, resized 1024×1024px version.An untouched, 1024×1024px original from iTunes.This means that, for every icon I add to my gallery, I (as a general rule) store five different versions of that icon: Instead, I keep a number of resized and optimized variants on hand for contextual usage throughout the site. You see, iTunes will give me a large 1024×1024px icon, but I don’t want to serve that icon everywhere on my site. By the time my node script handed the reigns back to bash, I had everything I needed except for the optimized/resized icon variants. sh file that, when run, triggered a node script which gathered all of the details about an icon, fetched its artwork from iTunes, wrote it to disc, then handed control back to bash. My previous bash script was essentially a. Why? Because bash syntax baffles me and anytime I need to tweak a thing or two, it takes me hours to figure out the right syntax.Īt the moment, I’ve migrated all of the steps listed above to a single node script except for that last step-that’s what this post is about. My bash script used to power all four of those steps, but I’ve been slowly migrating to a script that will do all of that in JavaScript (node). Creates smaller variations of the source icon file and compresses them (for use on the web).Fetches the icon’s artwork from iTunes and writes it to disk.Asks for additional meta information (for the “post”).Asks me for the iTunes store URL of the app whose icon I want to add to my gallery.It’s basically a CLI script that does the following: "remark-lint-ordered-list-marker-value": "^1.0.For some time, I’ve been powering the automation around adding a new icon to my icon gallery sites using a bash script. "browser-test": "npm run test-prep & open-cli & static -p 8000" "test": "testcafe chrome test/ui-tests/**/*.js -skip-js-errors", "test-prep": "npm run eslint & npm run build-html & npm run rollup & npm run build-by-config", "test-no-build": "npm run eslint & npm run build-html & npm run build-by-config & open-cli & static -p 8000", "start": "echo \"Open file to & static -p 8000", "compress-images": "imageoptim 'chrome-app/*.png' & imageoptim 'editor/extensions/*.png' & imageoptim 'editor/spinbtn/*.png' & imageoptim 'editor/jgraduate/images/*.'", "build-html": "npx babel-node -plugins build-html.js", "build-docs": "rm -rf docs/jsdoc/* jsdoc -pedantic -c docs/jsdoc-config.js editor", "description": "Powerful SVG-Editor for your browser ",
0 kommentar(er)
