Smaller images for the web

To prepare my images for my website to be smaller and progressively loaded, I had been using `imagemagick`. But my computer is now too old to properly install it with homebrew or macports, so I had to find another solution.

imagemagick

I found `sharp`, which is an NPM package, which I don't love, but gets the job done and is very lightweight in comparison.

sharp

The big things I try and do for image processing for the web are:

• Lower quality to remove hyper detail
• Small amount of gaussian blur to reduce file size
• Interlacing to allow progressive loading on bad connections
• Remove EXIF metadata that is not relevant

What I did with `imagemagick` was:

magick "$file" -strip -gaussian-blur 0.05 -interlace Plane -quality 25 "$output"

What I'm doing with `sharp` now is:

const output = await sharp(file)
  .rotate()
  .blur({
    minAmplitude: .05,
    sigma: .5,
  })
  .jpeg({
    quality: 25,
    progressive: true,
    optimiseScans: true,
    force: true,
  })
  .toBuffer();

fs.writeFileSync(outputFile, output);

And always with each file, I double check whether I'm actually helping:

old_size="$(wc -c <$old_file)"
new_size="$(wc -c <$new_file)"
if [[ "$new_size" -lt "$old_size" ]]; then
  cp "$new_file" "$old_file"
fi

Some files I am seeing compress from 307kb to 12kb with no noticeable degradation, that's 96 percent!

You can see my whole preprocessing script on my repo.

My website's build script