Image Processing and Pre-Rendering

Image processing is a huge performance pitfall in static website generators when it comes to total build time, so I don’t automate this part where I can or do it at runtime when I have the opportunity. 

For example, I prefer handmaking the social cards of my blog articles to make them more unique and eye-catching, but I will add a step in the webserver to create the cards if I have 1000 articles without one to show to web crawlers. If it takes 250ms to generate a 1200 * 628 image (that’s about what it takes from my dev machine), it would save me 250s of build time for 1000 web pages: it’s non-negligible since your total build time is the main pricing metric for static web providers like Netlify, Gatsby Cloud, or Vercel (“only” 300 free build minutes per month using Netlify, for example).

Image optimization is also an important factor to improve a website’s loading speed, so static generators apply resizing algorithms, blur up techniques, and compression mechanisms to help you deliver better content. But again, these things take time, and I’d wage it’s often better to open your photo editor once rather than going through the aforementioned steps every time you build your static repository. 

I use Gimp or Sharp to resize my images, CSS to display loading animations, and TinyJPG or the compress-images library to compress images, depending on how many I need to deal with. I put the resulting assets in my regular picture folder and entirely skip the image processing step at build time.