How I cut my Next.js image payload by 60% without changing a line of code

I was doing a routine Lighthouse audit on a Next.js app I'm building and realized my LCP (Largest Contentful Paint) was terrible. The culprit? Unoptimized hero images and Open Graph meta images. I didn't want to set up a heavy Sharp pipeline in my CI/CD just for a few static assets. I needed a quick way to optimize them before committing. Here is the exact 3-step workflow I used to fix it: 1. Convert formats to WebP Browsers love WebP. I had a few legacy PNGs that were huge. Instead of opening P