How to Fix Large PNG Images on Your Website

Large PNGs on a site are almost always a format choice problem, not a compression problem. PNG is lossless, which makes it great for logos and UI, and terrible for photographs. A photographic PNG can easily be five or ten times the size of the same image as WebP. The fix is to split your PNGs into the ones that should stay PNG and the ones that should never have been PNG in the first place.

This is also where a lot of no code sites accidentally end up heavy. Copying a screenshot or a graphic directly out of Figma, Sketch, or a browser inspector puts a PNG on the clipboard by default. Paste that into a Webflow CMS blog post or a Framer image block and you have just shipped an unoptimized photographic PNG where a WebP would have been a fraction of the size. If your blog article pages feel slow, start by looking at the cover and inline images.

This guide focuses on the format decision. For the broader checklist of image optimization, start with slow images. For the markup side, see responsive images HTML.

Step 1: Identify which PNGs are actually large

Open the Network tab, filter by Img, and sort by transfer size. Write down every PNG over a hundred kilobytes. Our Website Optimizer surfaces the same list automatically and marks each PNG with whether it is a likely conversion candidate based on content type.

For whole-site audits, our Heavy Asset Finder crawls the sitemap and returns every heavy PNG on every page in one consolidated list.

Step 2: Decide whether PNG is the right format

PNG's strength is lossless compression with alpha transparency. That matters for specific things.

• Keep as PNG: UI icons, logos, diagrams, screenshots of interfaces, line art, any graphic with transparency against a variable background.
• Convert: Photographs, photographic backgrounds, textured hero images, screenshots of photographs, anything where the edges between colors are soft.

For logos and icons specifically, consider SVG before either PNG or WebP. A vector file is usually smaller than any raster format and scales to every resolution. That is a separate topic, but worth flagging before you re-encode a logo as WebP.

Step 3: Convert photographic PNGs to WebP or AVIF

Both formats beat PNG comfortably on photographic content. WebP is the safe universal choice with broad support. AVIF is smaller at the same quality but takes longer to encode and has slightly younger tooling.

The simplest path is Squoosh, a free browser-based image converter, for one-offs. For batches, write a short script using Sharp, the Node image processing library. Most image CDNs also do the conversion at delivery time, so if you are on Cloudinary, Imgix, or a framework like Next.js, you often just change one setting.

If you build in Webflow, Framer, or a similar visual tool, the workflow is the same but the mechanics are different. Run each photographic PNG through Squoosh, export as WebP, then re-upload the WebP into your asset manager and swap the reference. Some builders also accept WebP uploads directly and handle delivery optimization for you, so check your platform's settings before converting by hand.

Step 4: Compress the PNGs you keep

This step splits along the two audiences. Custom builds use command-line tools. Visual builders use a web app or a desktop image editor. The output is the same.

For custom builds, two command-line tools do the heavy lifting. pngquant quantizes the color palette, which is a lossy step but usually invisible on UI and icon work. oxipng does lossless re-compression on top. Layer both.

pngquant --quality=65-80 --strip --output out.png input.png
oxipng -o max --strip safe out.png

Most build pipelines have plugins for both. For Webpack, image-webpack-loader covers the basics. For Vite, vite-imagetools does the same.

If you work in Webflow, Framer, or another visual builder, you cannot run command-line tools against assets in your builder. The equivalent is an online compressor or a desktop image editor. TinyPNG and Squoosh are both free browser-based tools that handle PNG compression without an install. For Adobe users, Photoshop's Export As or Save for Web feature with PNG-8 at the lowest quality that still looks right does roughly the same job as pngquant. Run each PNG through one of these, then re-upload the compressed file to your asset manager.

Step 5: Update your markup and verify

Swap the new files into your HTML, CMS, or asset bucket. For converted files, update the extension and any hardcoded paths. If you wrapped the image in picture with multiple sources, the fallback img src still points at the PNG and the browser will pick the best supported format automatically.

Reload the page with the Network tab open and confirm the new file sizes. Check transparent PNGs on both a dark and a light background to be sure the alpha channel survived the re-encode cleanly. Then re-run the Website Optimizer to confirm the heavy PNG list is shorter than it was.