Step-by-step guide to batch optimizing portfolio images locally for web designers

12MB vs 1.2MB — What Your Portfolio Page Could Actually Be

Picture two versions of the same portfolio site. Both show identical hero shots, identical case study spreads, identical logo lockups. The first one weighs 12MB across 38 images and takes 6.8 seconds to paint on a cable connection. The second one weighs 1.2MB and paints in 1.4 seconds. Same visuals. Same designer. The only difference is that the second designer ran a local batch optimization pass before pushing to staging.

That gap — 10.8MB and 5.4 seconds — is the entire reason this guide exists. As a web designer, your portfolio is the one project where image quality and image weight are equally non-negotiable. Cloud compressors are fine for blog posts, but they fail you on three fronts that matter: client NDA work can't leave your machine, browser tools throttle batch sizes, and you lose the repeatable preset that keeps future portfolio drops consistent.

What follows is a six-step local batch workflow built specifically for portfolio images. We'll move from chaos to a system, with each step framed against the common wrong way of doing it.

Step 1 — Audit Before You Touch a Single Pixel (Chaotic Folders vs. a Clean Inventory)

The wrong way

You dump 200 raw exports into a single folder named "site_v3_FINAL_forreal", run a compressor over the whole thing with default settings, and hope for the best. Three weeks later you realize your logo PNGs got crushed to 60% quality and your hero photography still came out at 800KB each.

The right way

Before any compression happens, build a plain-text inventory. Open your portfolio folder and list every image with its current weight. A quick terminal pass on macOS or Linux gets you there:

find . -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -exec ls -lh {} \; | awk '{print $5, $9}'

Sort the output by size, descending. You'll typically find that 20% of your images account for 80% of the total payload. Those are your heroes and full-bleed case study shots — the ones that need the most attention, not a blanket setting.

Concrete example: on a recent 42-image portfolio refresh, the audit revealed three hero JPGs at 3.4MB, 2.9MB, and 2.7MB respectively. Those three files alone were 9MB of a 13MB total. Everything else averaged 140KB. Knowing that changed the entire batch strategy.

Step 2 — Pick Local Compression Over Browser Uploads (Client NDA vs. Drag-and-Drop Convenience)

Why local wins for portfolio work

Browser-based compressors are seductive. You drag, you drop, you download. But portfolio work frequently involves client projects under NDA, unreleased branding, or screenshots of internal tools. Uploading those to a third-party server — even one that promises deletion — is a liability most designers underestimate.

Local compression keeps every byte on your machine. It also removes upload time, file count limits, and the quiet quality ceiling that free web tools impose to manage their own server costs.

Tools worth your time

For batch work, three local tools cover the full spectrum:

- ImageOptim (macOS) — drag-and-drop GUI, strips metadata, runs multiple encoders under the hood. Ideal for designers who want a visual workflow. - Squoosh CLI — Google's local encoder, supports AVIF and WebP, runs from terminal. Best for designers comfortable with command line. - FileOptimizer (Windows) — recursive batch processing across folders, dozens of plugin optimizers.

Pick one. Learn its preset system. The goal is repeatability, not tool-hopping.

Step 3 — Group Images by Type Before Batch Processing (One-Size-Fits-All vs. Type-Aware Batches)

The wrong way

Running every image through the same JPEG quality setting. Logos become artifacted messes. Photography stays heavier than it needs to. Screenshots of UI work pick up visible banding in gradient areas.

The right way

Split your inventory into three buckets. Each gets its own batch with settings tuned to how that image type actually behaves.

Photography portfolios

Full-bleed heroes, project photography, environmental shots. These tolerate aggressive JPEG compression because the human eye forgives softness in natural textures. Target 75–82 quality with chroma subsampling enabled. A 3.4MB hero at quality 80 typically lands around 280–340KB with no visible difference at viewing distance.

UI/UX screenshots

App screens, dashboard captures, website mockups. These contain hard edges, text, and flat color blocks — the exact things JPEG mangles. Use PNG with optipng or oxipng, or export directly to WebP lossless. A 1.1MB screenshot optimized losslessly usually drops to 380–450KB.

Logo and vector exports

SVG is almost always the right answer here, but when you must use raster, PNG-8 with adaptive palette often beats PNG-24 by 60–70% on simple two- or three-color marks. Run them through zopflipng for the final squeeze.

Step 4 — Configure Compression Settings That Respect Your Work (Crushed Artifacts vs. Invisible Savings)

JPEG settings

Quality 80 is the sweet spot for portfolio photography on retina displays. Below 75, skin tones and sky gradients start showing blocky artifacts that scream "compressed." Above 85, you're paying file size for quality no one can see. Enable progressive encoding — it loads in three passes and gives perceived performance a real boost on slower connections.

PNG settings

For UI screenshots and logos, use lossless optimization only. oxipng at level 3 strips metadata and re-compresses without altering a single pixel. A typical 24-bit PNG screenshot drops 25–35% with zero visual change. Avoid "lossy PNG" modes on anything with text — the artifacts around letterforms are immediately noticeable to anyone who works with type.

WebP and AVIF exports

If your portfolio CMS supports modern formats (and it should in 2025), export a WebP variant alongside your JPEGs. WebP at quality 78 typically beats JPEG quality 80 by 25–30% at equivalent visual quality. AVIF pushes that further — often 50% smaller than JPEG — but encode times are longer and browser support, while broad, isn't universal. For a portfolio, the safe play is JPEG as fallback, WebP as primary, AVIF as progressive enhancement.

Step 5 — Run the Batch and Verify With Real Numbers (Eyeballing vs. Measuring)

Before/after comparison

Never trust a compressor's reported savings without verifying. After each batch, regenerate your file inventory and diff the two lists. A simple spreadsheet works: original weight, optimized weight, percentage reduction, format.

On that 42-image portfolio mentioned earlier, the numbers broke down like this:

- 3 hero JPGs: 9.0MB → 0.94MB (89.5% reduction) - 18 UI screenshots (PNG): 4.2MB → 1.6MB (62% reduction) - 9 project thumbnails (JPG): 1.1MB → 0.31MB (72% reduction) - 12 logo and icon assets (PNG/SVG): 0.8MB → 0.22MB (72.5% reduction) - Total: 15.1MB → 3.07MB

That's a 79.7% payload reduction from a single batch pass with type-aware settings.

Quality check

Open five representative images at 100% zoom — one from each bucket plus a couple of edge cases. Look specifically at: skin tones in portraits, sky or gradient areas in photography, text edges in screenshots, and color fidelity in logos. If anything looks wrong, adjust that bucket's settings and re-run just those files. Local batch tools make targeted re-runs trivial because nothing has to upload.

Step 6 — Lock the Workflow So Future Drops Stay Lean (One-Off Fixes vs. Repeatable Systems)

Save your presets

The biggest mistake designers make after a successful optimization pass is failing to save the configuration that got them there. Every tool mentioned in Step 2 supports preset saving. Name them clearly: portfolio-hero-jpg-q80-progressive, portfolio-ui-png-oxipng-l3, portfolio-logo-webp-q90. Future you will thank present you when the next case study drops and the workflow is one click away.

Folder actions and watch scripts

For designers who add portfolio pieces regularly, set up a watched folder. On macOS, Hazel or a short shell script with fswatch can trigger ImageOptim's CLI automatically whenever a new file lands in your portfolio source directory. On Windows, FileOptimizer's command-line mode pairs well with a PowerShell FileSystemWatcher.

The goal is a system where adding a new project to your portfolio never requires thinking about compression. You drop the raw export into the watched folder. The preset runs. The optimized file lands in your build directory. Your portfolio stays fast without manual intervention.

Document the pipeline

Write a one-page README in your portfolio repo describing the buckets, the settings, and the tool versions. When you hand the site to a collaborator, or when you revisit it six months later and can't remember why heroes are quality 80, that document saves an hour of re-deriving decisions you already made.

The contrast between a designer who runs this workflow once and a designer who runs it as a system is the difference between a portfolio that's fast today and a portfolio that stays fast for every future project you add to it.