Skip to content
/ no.lol Public

🍩 Lauren's personal blog

License

Notifications You must be signed in to change notification settings

poteto/no.lol

Repository files navigation

Netlify Status Build Status

Lauren's personal blog. master is automatically deployed to Netlify.

Image Pre-optimization

Gatsby already optimizes using sharp, but recommends pre-optimizing images to improve build perf. Images in this repo tend to be stored at their highest relative quality so that sharp has the best quality image to generate multiple sizes with. However, this means that we tend to store large images which does increase build times quite heavily.

Prerequisites

  • convert
  • mozjpeg (you will need to compile your own binaries. If you use MacOS, you can install with brew install mozjpeg)

Running the script

Run the yarn preoptimize:images command whenever you add a new image. This will recursively look for jpgs in the specified folder, excluding images with the -optimized.jpg suffix.

The script will first convert the jpg into the pnm format (required by mozjpeg), then pipe the output into cjpeg. See usage here. We run cjpeg with the -optimize flag, then output the file to the same directory with the -optimized.jpg suffix.

Finally, reference the optimized jpg in your blog post.