A portfolio gallery is a strange kind of website: it has to look perfect, because the gallery is the product, but it also has to load fast, because nobody waits for a photographer whose site stutters. For years I did what most people do — exported everything as PNG, because PNG is lossless and therefore "safe." It is safe for quality. It is not safe for page weight. A gallery page full of oversized PNGs punishes every visitor on a phone connection, and most of them will never wait for the last row to appear.
I'm the developer of FileOnTap, and here is the workflow I recommend for turning a PNG gallery into a fast WebP one without learning a build pipeline.
Step 1: Separate your masters from your web exports
Keep the full-resolution originals (RAW, TIFF, or high-res PSD) untouched somewhere safe. The PNGs you export for the web are intermediates, not archives. This matters because once you convert to WebP, the WebP is a delivery format — if a client later asks for a print version, you regenerate from the master, not from the WebP.
Step 2: Export web PNGs at the size they'll actually be shown
A gallery grid that renders images at 900 px wide doesn't need 5000 px PNGs. Export at the display size plus a little headroom for retina screens — 2x at most. Every pixel you export beyond that is weight your visitors pay for and never see.
Step 3: Convert to WebP in the browser, no upload
This is where the format swap happens: convert PNG to WebP for your portfolio right in the browser. The files never leave your machine, which matters when a gallery contains client work that isn't public yet — no upload means no third-party server ever holds the images. Convert the whole gallery in one sitting so every image gets the same treatment and nothing slips through as a forgotten PNG.
Step 4: Spot-check what WebP does to your specific images
Don't trust any format blindly. Open a few converted files at 100% zoom and look at the things that matter in a portfolio: smooth gradients (skies, studio backdrops — this is where lossy compression shows banding first), fine text in watermarks, and any transparency in logos. If a gradient bands badly, reconvert from a higher-quality export rather than from an already-compressed PNG.
Step 5: Serve WebP with a PNG fallback
All modern browsers display WebP, but portfolio links travel everywhere — old apps, embedded previews, email forwards. The safe pattern is the <picture> element with WebP first and the PNG as fallback:
<picture>
<source srcset="gallery-photo.webp" type="image/webp">
<img src="gallery-photo.png" alt="...">
</picture>
If your site builder doesn't offer a <picture> element, check its image settings first — many builders now serve WebP automatically once you upload one.
The honest limitations
WebP won't rescue a gallery hosted on a slow server, and it won't fix images that were exported oversized in the first place — resize at export, then convert. Some desktop apps still don't generate WebP thumbnails, which can make browsing your local folder annoying; keep the PNG exports alongside the WebPs during a project, and archive them with the masters when it's done. And don't delete originals after converting: WebP is a delivery format, not an archive.
What I actually do
For a new portfolio batch I export the PNGs once, convert them locally in the browser, spot-check three or four files at 100%, and push. The conversion takes minutes; the painful part was always the waiting — mine and my visitors'. Fixing that is one of the cheapest wins in web publishing.
Disclosure: I'm the developer of FileOnTap, the free browser-local converter linked above. Files are converted on your device — nothing is uploaded.
Top comments (0)