Image optimization with mozjpeg and webp

image-optim.sh

# this is not a bash file to execute, but run the following commands in your terminal
# requirements (install instructions at bottom of page)
# imagemin-cli, imagemin-mozjpeg, imagemin-pngquant, imagemin-webp, imagemagick (mogrify)

--------------------------------------------------------------
# 1. create the appropriate directories
$ mkdir build large large-webp small small-webp

# 2. mozjpeg compression of fullsize images
$ imagemin *.jpg --out-dir=build --plugin=mozjpeg && imagemin *.png --out-dir=build --plugin=pngquant

# 3. scale down to 50% in large dir and convert to webp
$ mogrify -path large -resize 50% build/*
$ imagemin  ./large/* --out-dir=large-webp --plugin=webp

# 4. scale down to 30% in small dir and convert to webp
$ mogrify -path small -resize 30% build/*
$ imagemin ./small/* --out-dir=small-webp --plugin=webp
--------------------------------------------------------------

# install instructions
$ npm install -g imagemin-cli imagemin-mozjpeg imagemin-webp imagemin-pngquant
$ brew install imagemagick