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 Photoshop, I dragged them into this PNG to WebP converter. It runs 100% in the browser using the Canvas API, so you don't have to upload your assets to a random server.

2. Compress the file size

Even some of my existing JPGs were too bloated. I ran them through this bulk image compressor. You can just drag and drop 10 files at once, and it spits out optimized versions alongside a data table showing exactly how much KB you saved per file.

3. Fix layout shift with exact dimensions

I was getting hit with CLS (Cumulative Layout Shift) penalties because my images didn't have explicit width and height props in my <Image /> tags. I used this image resizer to batch-crop all my blog headers to exactly 1200x630, eliminating the shift.

The result:
Lighthouse mobile score went from 54 to 94. No new npm packages installed. No server uploads. Just browser-native APIs.

What's your go-to workflow for handling images before deploying?