Published July 16, 2018
This blog lives entirely in Dropbox. I consider it a blesssing: I can access it from virtually anywhere, provided I have an Internet connection. However, it does mean it’s left up to me to organize the files.
Given the title of this post, images are the focus so I want to:
- keep a relatively flat directory structure while
- keeping filesize to a minimum and
- reduce the probability of name collisions.
All “assets” go in a
/_static/ directory. Like my posts, I create a directory for each year and the files go in there. For example, an image for a post in 2018 would look like
/_static/2018/example.png, that’s it.
If I have an Internet connection my go-to is TinyPNG. The service is easy to use, supports JPEG & PNG, and has good compression results.
If I have no Internet connection my go-to is the imagemin-cli. It’s slower & typically doesn’t have as good compression results but, it’s installed via npm (
npm i -g imagemin-cli) which provides solid cross-platform support.
Appending the content hash to the filename of an image provides a reasonable way of reducing the chances that I’ll have two (unique) images collide, even if they share the same base filename. It’s the same strategy that asset-revision tools like gulp-rev-all1 use.
Given these requirements, I wanted a way to automate the process. Naturally, I created a small2 shell script aptly named
optimg. It will handle the task of compressing (by using the previously-mentioned
imagemin-cli) & renaming or simply just renaming images.
The script lives in my dotfiles repo. It’s been tested on Bash 4.x in a macOS & Linux environment. To install, the easiest method is to add it to your
N.B. I’m a huge fan of Gulp & use it in most projects.↩︎
Around 100 sloc with adequate whitespace & comments.↩︎
Last modified January 31, 2019 #dev #blot #bash #productivity