How to Compress PNG Images for the Web

There is exactly one right way to prepare a PNG for a website. It is not a single setting or tool. It is an ordered pipeline of four steps, and the first two are not compression at all. Follow them in order and you cut file size by 70 to 85 per cent on a typical screenshot before you touch a quality slider. Skip the order and you waste work.

This article answers what is the right way to prepare PNGs for a website. It shows you how to compress png for web without guesswork. Every action has a reason. Every reason traces to how the image is displayed or how the format stores pixels.

Step One: Set the Right Dimensions

File size quadruples when you double the width. A hero image stored at 3000 pixels wide but displayed at 800 carries roughly fourteen times the pixel data anyone will see. The first thing you do is resize the image to its display size or slightly above for high-density screens. A blog image needs about 1600 pixels on the long edge. A full-screen hero needs about 2560 pixels. Do this before anything else. Resize then compress. Compressing pixels you are about to discard is wasted work, and the compressor performs better on the smaller canvas.

On macOS use Preview: Tools > Adjust Size. On Windows use Paint: Resize on the Home tab. In Photoshop use Image Size inside the Export As panel. In GIMP use Image > Scale Image. Type the target pixel width and let the tool scale the height proportionally.

Why Size Matters for Performance

Largest Contentful Paint is very often an image. Shrinking the hero image is the single most effective thing you can do to improve LCP. After resizing, declare the width and height in the HTML. That prevents the layout shift measured by Cumulative Layout Shift. A shift that happens after the image loads costs performance points even if the image itself is small.

Optimize PNG for Website Format Choice

PNG is always compressed and always lossless. The real question is whether PNG is the right format for this image at all. A photograph stored as PNG is roughly ten times the size of the same photo as JPEG at a quality difference invisible at normal viewing distance. JPEG has no alpha channel, so a transparent PNG must stay PNG, but a solid photographic image belongs in JPEG.

For line art, logos, charts or UI screenshots PNG is the correct format because JPEG handles sharp edges badly, producing visible ringing around text and often a larger file than PNG. WebP supports a full alpha channel like PNG and Google's published figure for WebP lossless is about 26 per cent smaller than PNG. WebP is supported by all current browsers. If your audience allows it, WebP is the better container for the same pixel data.

When PNG Is the Wrong Choice

If the image is a photograph with no transparency, change format. Paint on Windows can Save as JPEG. Preview on macOS can Export to JPEG. That saves more than any compression tool ever will. If the image has sharp edges and flat colour, stay with PNG. The format is not a default. It is a deliberate decision based on the image content.

Step Three: Compress the PNG Itself

Once dimensions are correct and the format is confirmed as PNG, you compress the file. This step has two tracks: lossless optimisation and palette reduction. Use both, starting with palette reduction because it produces the large saving.

Palette Reduction

Palette reduction rebuilds the image from an adaptive palette of colours chosen from the colours actually present. A typical screenshot goes from 24 bits per pixel to 8 bits per pixel, and thousands of near identical shades collapse into one entry, creating exactly the repetition DEFLATE feeds on. The savings are 70 to 85 per cent on a UI screenshot, 60 to 80 per cent on a logo or icon, 40 to 65 per cent on an illustration with gradients. A photograph stored as PNG loses 40 to 70 per cent.

In Photoshop use File > Export > Export As and tick Smaller File (8 bit). For finer control use File > Export > Save for Web (Legacy), choose PNG 8, set a Colour count between 64 and 256, and watch the live file size readout. In GIMP export as PNG, then go back to Image > Mode > Indexed, choose Generate optimum palette, and set the maximum colours. The command line tool pngquant does the same thing.

The visible failure mode is banding in smooth gradients and stair step fringes on semi transparent edges. A gentler setting with more palette entries fixes both. Palette reduction cannot be undone, so keep your original and compress a copy.

Lossless Optimisation

After palette reduction run a lossless optimiser. It searches harder for the best filter per row, re runs DEFLATE at maximum effort, and strips metadata chunks. The decoded pixels are identical to what you fed it. Typical saving after palette reduction is 5 to 15 per cent, sometimes zero on an already optimised file. A correct tool returns the original if re encoding would produce a larger file, so it is safe to run. On macOS use ImageOptim. On any platform use optipng or zopflipng from the command line. Strip metadata chunks like tEXt, iTXt, eXIf and iCCP colour profiles. They carry no visual information.

PNG Web Performance and Delivery

The last step is not a file operation. It is how you put the image on the page. Declare width and height attributes on every image tag. This prevents Cumulative Layout Shift. Load the hero image with a priority hint. For images below the fold use lazy loading. Serve WebP to browsers that support it and fall back to PNG for older ones using a picture element or the Accept header on your CDN.

You do not need to compress images for website visitors more than once. If you deliver the same file to mobile and desktop at different pixel counts, resize and compress each variant separately. A 2560 pixel hero at 50 KB serves tablet users the same bytes as desktop but on a smaller screen those pixels are wasted.

Realistic File Size Targets

Worked Example: Running Total

Start with a UI screenshot at 3840 by 2160 pixels, PNG 32, 6.2 MB.

Step one: resize to 1600 pixels wide. The height becomes 900 pixels. The file drops to 1.8 MB.

Step two: format stays PNG because this is a screenshot with sharp edges and flat colour.

Step three: palette reduction to 128 colours using pngquant. The file drops to 0.35 MB. Lossless optimisation with zopflipng strips metadata and re runs DEFLATE. The file drops to 0.31 MB.

Step four: declare width 1600, height 900 in the HTML and serve the file through a CDN with WebP conversion on the origin.

Total reduction from 6.2 MB to 0.31 MB. That is 95 per cent off the original. The image looks identical on screen. The Largest Contentful Paint timings improve because the browser downloads 1.9 MB less on the hero image, and the layout does not shift because the dimensions are declared.