Website Update - Image Optimization Ideas
While developing the landing page for this site, I was finally confronted with the issue of needing to optimize the image loading behavior. Admittedly, this has been a problem for a while, but I've been ignoring it.
Note: If you want to see the more technical info I documented while working through this, check out the docs. 😎
Image loading has been super basic:
- Upload image to AWS S3
- Throw URL in
<Image />component, next/image
...And if used in MDX, use special
<CenteredImage />...which just passes props to
So, that's: loading a PNG from AWS S3, and with no image-resizing, a shameless 3-5MB per image. Horrible for loading times.
Stumbling Upon WebP§
While it was obvious to see that my large images were slowing down the page loading, I wasn't sure how to properly optimize images for faster loading times. It seemed obvious to try resizing the images smaller, or somehow compressing them to smaller data sizes, but how to do this while handling:
- page responsiveness
- different sizes for different viewports
- keeping up some level of quality
It wasn't long searching around, that I ran into mentions WebP. Turns out Google was working on this problem way back in 2010, when they acquired On2 Technologies.
Converting to WebP§
A quick Google search shows a bunch of quick conversion websites providing some quick and dirty means to get your images converted. I'm sure these sites are pretty harmless, but I don't like the idea of sending images to a remote server for a conversion. So, I went looking for the actual executable that performs the conversion, with the hopes of keeping the process local.
Google hosts the whole thing here
Which gave me exactly what I wanted—a CLI-based tool to perform local image conversions.
For a simple way to run this, try the following command. I've found that it works just as well for JPGs, too.
cwebp -q 80 image.png -o image.webp
All I can say about measurable performance gains for now is...the page feels much faster. I tried to load the different images on the page, and test the capture the different loading times within my browser's dev tools but the results weren't consistent. The best explanation I have for now is Next.js is performing some default optimization that I'm not sure how to properly test.
Now that I have way to convert images from a CLI-based tool. There's a couple things I would like to try incorporating into this process.
- Windows context-menu conversion tie-in
- VSCode plugin
I write all of my blog posts within VS Code, and most of the time on my main workstation. So, incorporating images typically involves downloading stock images, or transferring from a camera, and then uploading to AWS. Adding another step for conversion feels tedious, so anything to automate the process is great!
It would be awsome if I could just right-click, convert an image right from within Windows file explorer.
Integrating new tools into the Windows-context menu seems to require creating a key in
the registry, under:
HKEY_CLASSES_ROOT > Directory > Background > shell. I haven't attempted this yet,
but it appears to be a straight-forward way to have image conversion on-hand, without manually
entering the command each time I need it.
This registry key could be manually configured, or handled with a specially-built Windows installer, or a Powershell script.
Since I write these blog posts from within VSCode, incorporating a VSCode extension might be more convenient. This might still require configuring a path for the extension to use the CLI tool, and somehow selecting the image to be converted, from with VSCode, but at least more of the process would be avaiable without leaving VSCode.
All in all, I hope sharing this helps if you're having similar issues optimizing images for your websites, and it helps me get one step closer to my ideal of writing blog posts, using Next.js, from an iPad 🤷♂️