Milo Land - Smaller images for the web

Skip to main content

Smaller images for the web<br>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.<br>imagemagick<br>I found `sharp`, which is an NPM package, which I don't love, but gets the job done and is very lightweight in comparison.<br>sharp<br>The big things I try and do for image processing for the web are:<br>Lower quality to remove hyper detail<br>Small amount of gaussian blur to reduce file size<br>Interlacing to allow progressive loading on bad connections<br>Remove EXIF metadata that is not relevant<br>What I did with `imagemagick` was:<br>magick "$file" -strip -gaussian-blur 0.05 -interlace Plane -quality 25 "$output"<br>What I'm doing with `sharp` now is:<br>const output = await sharp(file)<br>.rotate()<br>.blur({<br>minAmplitude: .05,<br>sigma: .5,<br>})<br>.jpeg({<br>quality: 25,<br>progressive: true,<br>optimiseScans: true,<br>force: true,<br>})<br>.toBuffer();

fs.writeFileSync(outputFile, output);<br>And always with each file, I double check whether I'm actually helping:<br>old_size="$(wc -c Some files I am seeing compress from 307kb to 12kb with no noticeable degradation, that's 96 percent!<br>You can see my whole preprocessing script on my repo.<br>My website's build script