My first portfolio site loaded in nine seconds on a phone, and the whole reason was images. Twenty-two photos straight off the camera, a handful of GIF screen recordings, and a logo exported as a 2 MB PNG. Lighthouse was blunt about it. So I spent a weekend learning how image compression actually works, and I ended up using four different tools for different parts of the job. This is the map I wish I had at the start.
The first thing I learned is that "compress" hides two separate operations. One is lowering quality, which throws away detail the eye is unlikely to notice. The other is scaling down, which throws away pixels the layout never displays. A 4000-pixel photo shown in a 700-pixel column is wasting most of itself before quality even enters the picture, and scaling did more for my page than any slider. The second thing I learned is that tools split into ones that upload your file to a server and ones that do the work inside your browser, and that split explains most of their differences.
For understanding what the sliders do, Squoosh from Google was the right classroom. It runs in the browser, is free with no account, and shows the original and the compressed version side by side with a draggable divider. I spent an hour dragging that divider on one photo at different quality values and different formats, and that hour taught me more than any article. It handles one image at a time and does not open animated files, but as a place to learn what JPEG, WebP and AVIF look like at various settings, it is where I would send anyone.
For the twenty-two photos as a batch, I switched to ImgIng at imging.ai. It also runs in the browser, so the photos stayed on my laptop, and it lets you drop the whole folder, set a quality value and a scale value together, and download the folder back. No login, no watermark, no monthly count. The scale lever is what I had been missing: I set a maximum width for the gallery and every photo shrank to fit before it was compressed. It also handled the GIF screen recordings, which most tools either refuse or leave untouched, by compressing across frames. If a file would not get smaller it left the original alone, which I appreciated after Squoosh had once given me a WebP bigger than the source at a high setting.
For a couple of one-off large files, I used the server-based tools. compressor.io took a 9 MB scan that other free tiers refused, since its free ceiling is 10 MB per file, and it is the one in my list that handles SVG. TinyPNG is the name every tutorial mentions, and its free plan of 500 images a month at 5 MB each is more than a portfolio needs; the reason I did not use it for the gallery was simply that I did not want to upload personal photos when a local option existed. docsmall, which I found through a Chinese forum, does batch and PDF on a 5 MB free ceiling with a membership for larger files, and would be the pick if I were compressing a PDF résumé alongside the images.
| Situation | Tool I used | Why |
|---|---|---|
| Learning what settings do to one image | Squoosh | side-by-side viewer, all encoders |
| A folder of photos and GIFs | ImgIng | batch, scale + quality, animation, stays local |
| One 9 MB scan or an SVG | compressor.io | 10 MB free ceiling, SVG support |
| Automated uploads later on | TinyPNG | mature API, 500 free per month |
| A PDF in the same pile | docsmall | PDF plus batch |
A few beginner mistakes worth flagging. I once compressed an already-compressed JPEG three times and wondered why it looked muddy; compress from the original export each time. I also assumed AVIF was always the answer because the files were tiny, then discovered an older browser on a friend's phone did not display them, so I now keep a JPEG fallback. And "runs in the browser" is a per-format promise, not a blanket one: common formats stay local, but check the tool's own notes before assuming anything sensitive never left your machine.
The site now loads in under two seconds on the same phone. The tools mattered less than knowing which job each one was built for, and that turned out to be the actual lesson of the weekend.
Top comments (0)