Site Build - Image Optimization

Before getting into this, it's important to realize this is an optimization problem. So, we're looking for "adequately good enough" results.

• Without taking too much development time
• Make simple-as-possible changes
• Strive for repeatable results/changes

Quick Tips (tl;dr;)§

1. Check Next.js next/image docs
2. Cover your bases, install the sharp npm package
3. Resize images & convert to WebP

Tracking the changes made§

This is what it looked starting out. Notice the slow image loading.

Next.js Image component doc§

This is good to read just to make sure we're using all of the basic functionality that's required.

• https://nextjs.org/docs/api-reference/next/image

Check for the sharp package§

As covered here, this is automatically handled in production for Vercel deployments, but I'm adding it anyway just to be safe in case I ever move to another hosting provider.

npm install sharp

• https://nextjs.org/docs/messages/sharp-missing-in-production
• sharp package: https://www.npmjs.com/package/sharp

Image Format§

Switching to the WebP format could provide some performance benefits over the PNG format. However, we need to be wary of browser support before switching our images over to this format.

• CanIUse: https://caniuse.com/webp
  • Note: The only browser to have an issue is Safari on Mac OS Big Sur.

Converting PNG to WebP§

I needed to convert PNG to WebP. Seemingly, the easiest way to do this after a cursory Google search is to use any of the dozen online auto-converters. However, this is very manual, and we have no controls over quality. (Also, what's happening with my image on their servers?)

So! Looking for some way to do this locally, we have this section of the Google Developers site on WebP.

Download the utility, run the following command, and you get your new WebP.

cwebp -q 80 image.png -o image.webp

Note: It would be really nice to configure this utility to the Windows context menu (or automate it in some way) to create the ability for batch conversion. 😎

• Getting Started: https://developers.google.com/speed/webp/docs/using
• Pre-compiled utilities: https://developers.google.com/speed/webp/docs/precompiled
• Downloads page (notice, newest at the bottom): https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

References§

StackOverflow post.§

• https://stackoverflow.com/questions/66637391/next-images-components-are-too-slow-to-appear

Suggested to use the sharp package for production deployment. The StackOverflow post recommends using this, and I've included the link to the "Sharp Missing in Production" article where they explain more why this is necessary.

It's automatically handled on Vercel deployments (which I use), but since I want this repeatable on as many deployed environments as possible, I'll add this package anyway.

• https://nextjs.org/docs/messages/sharp-missing-in-production
• sharp package: https://www.npmjs.com/package/sharp

They're suggesting to use the priority prop and make use of the WebP format.

WebP from Google§

• Getting Started: https://developers.google.com/speed/webp/docs/using
• Pre-compiled utilities: https://developers.google.com/speed/webp/docs/precompiled
• Downloads page (notice, newest at the bottom): https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html