A portfolio lives or dies on two things: how the images look, and how fast the gallery loads. Most photographers and designers export portfolio images as PNG for maximum quality — and end up with gallery pages that weigh 30MB and take forever to open on mobile. WebP fixes both problems at once.
Why PNG is the wrong default for galleries
PNG is lossless, which sounds ideal for a portfolio. But a 3000px PNG screenshot or export routinely weighs 4–8MB. A 20-image gallery page then downloads 100MB+ of images. Visitors on phones bounce before the first row finishes loading — and Google's Core Web Vitals punish the page too.
WebP gives you visually identical results at roughly 60–70% of the PNG file size. For gallery thumbnails and lightbox views, the difference is invisible and the speed gain is dramatic.
The 3-step workflow
- Export at the right size first. Your lightbox probably displays images at 1600–2000px wide. Exporting at 4000px and letting the browser downscale wastes bytes. Resize to the actual display size before converting.
- Convert PNG to WebP. You can convert PNG to WebP for portfolio galleries (https://fileontap.com/png-to-webp/) right in your browser — the conversion runs locally on your device, nothing is uploaded, and there's no account to create. Batch your whole gallery folder at once.
- Keep one master PNG. Convert a copy, keep the original PNGs archived. If a client ever needs print-quality files, you still have them.
Quality settings that matter
For portfolio work, keep quality at 90 or above — below 85, smooth gradients (skies, studio backdrops) start to band. Do a side-by-side check on one gradient-heavy image before batch-converting the whole gallery; it takes 30 seconds and saves regret.
The srcset bonus
If your portfolio is hand-coded, pair WebP with responsive images: serve a smaller WebP for mobile viewports and the full-size WebP for desktop. Most static site generators do this automatically once you feed them WebP sources.
Disclosure: I'm the developer of FileOnTap. The "export at display size, then convert" order is the real takeaway whichever tool you use.
Top comments (0)