Heavy, unoptimized images are one of the fastest ways to kill a website's load time and drag down your PageSpeed Insights scores. When you're building lightweight, single-file HTML templates, every asset needs to be lean.
Here is my go-to workflow for keeping images small without sacrificing visual quality:
The Squoosh Optimization Process
- Resolution Cap: I resize images down to a clean, crisp standard (typically 800x600 for optimal web display).
- Modern Formats: I convert and compress everything into AVIF and WebP formats. These formats offer incredible compression ratios compared to traditional JPEGs or PNGs.
- Quality Tuning: I dial in the compression settings on Squoosh.app to get file sizes down significantly while keeping details sharp.
By keeping image payloads minimal, every page loads instantly on mobile and desktop alike, keeping performance scores consistently in the 90s and 100s.
How do you handle asset compression in your workflow?