Optimising Images

David Baines edited this page Aug 16, 2018 · 2 revisions

Applications

Commandline

There are several handy image compression tools available on the commandline.

Make sure you have the binaries installed:

npm install -g optipng svgo jpegoptim-bin

Set up your aliases in a file such as ~/.image-aliases

##############################################
# Image optimisations
#
# Install tools
# npm install -g optipng svgo jpegoptim-bin
# 
# https://github.com/papandreou/node-optipng
# https://github.com/tjko/jpegoptim
# https://github.com/svg/svgo
# 
# References
# https://www.jeremywagner.me/blog/faster-bulk-image-optimization-in-bash/
# https://www.jeremywagner.me/blog/bulk-image-optimization-in-bash
#
##############################################

# Settings

IMAGE_FIND_PATH_EXCLUDES="-not -path '*node_modules*' -not -path '*public/assets*' -not -path '*public/system*' -not -path './tmp/*'"
IMAGE_PNG_OPTIMISATIONS="optipng -o7 {}"
IMAGE_JPG_OPTIMISATIONS="jpegoptim --strip-all {}"
IMAGE_SVG_OPTIMISATIONS="svgo {} --disable=removeViewBox"

# Aliases for file formats

alias ojpg="find ./ -type f \( -name '*.jpg' -or -name '*.jpeg' \) $IMAGE_FIND_PATH_EXCLUDES -exec $IMAGE_JPG_OPTIMISATIONS \;"
alias opng="find ./ -type f -name '*.png' $IMAGE_FIND_PATH_EXCLUDES -exec $IMAGE_PNG_OPTIMISATIONS \;"
alias osvg="find ./ -type f -name '*.svg' $IMAGE_FIND_PATH_EXCLUDES -exec $IMAGE_SVG_OPTIMISATIONS \;"

# Optimise everything

alias optimiseimages="ojpg;opng;osvg"

Then include these aliases in your shell config (eg. ~/.zshrc, ~/.bashrc etc.)

source ~/.image-optimisation-aliases
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.